摘要:用简单的话来说,主要是为了更大程度的复用现有代码,抽离代码而产生的一个模式高阶组件的参数可以为一个组件,通过一个组件再去生成另一个组件用官方的例子来解释现有一个组件如下就是全局的数据源添加事件处理函数订阅数据清除事件处理函数任何时候数据发生
用简单的话来说,主要是为了更大程度的复用现有代码,抽离代码而产生的一个模式
高阶组件的参数可以为一个组件,通过一个组件再去生成另一个组件
用官方的例子来解释:
现有一个CommentList组件如下
class CommentList extends React.Component { constructor() { super(); this.handleChange = this.handleChange.bind(this); this.state = { // "DataSource" 就是全局的数据源 comments: DataSource.getComments() }; } componentDidMount() { // 添加事件处理函数订阅数据 DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { // 清除事件处理函数 DataSource.removeChangeListener(this.handleChange); } handleChange() { // 任何时候数据发生改变就更新组件 this.setState({ comments: DataSource.getComments() }); } render() { return ({this.state.comments.map((comment) => (); } }))}
同时有另一个BlogPost组件如下:
class BlogPost extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { blogPost: DataSource.getBlogPost(props.id) }; } componentDidMount() { DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ blogPost: DataSource.getBlogPost(this.props.id) }); } render() { return; } }
可以看出这两个组件中的结构基本一致,都是通过DataSource接收数据,然后监听,解除监听,然后渲染
那么我们就可以将公共的部分提取出来,如下:
// 函数接受一个组件参数…… function withSubscription(WrappedComponent, selectData) { // ……返回另一个新组件…… return class extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { data: selectData(DataSource, props) }; } componentDidMount() { // ……注意订阅数据…… DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ data: selectData(DataSource, this.props) }); } render() { // ……使用最新的数据渲染组件 // 注意此处将已有的props属性传递给原组件 return; } }; }
然后就可以通过withSubscription组件来生成新的组件:
const CommentListWithSubscription = withSubscription( CommentList, (DataSource) => DataSource.getComments() ); const BlogPostWithSubscription = withSubscription( BlogPost, (DataSource, props) => DataSource.getBlogPost(props.id) );
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105034.html
摘要:创建一个普通函数因为的存在所以变成构造函数创建一个方法在方法中,创建一个中间实例对中间实例经过逻辑处理之后返回使用方法创建实例而恰好,高阶组件的创建逻辑与使用,与这里的方法完全一致。因为方法其实就是构造函数的高阶组件。 很多人写文章喜欢把问题复杂化,因此当我学习高阶组件的时候,查阅到的很多文章都给人一种高阶组件高深莫测的感觉。但是事实上却未必。 有一个词叫做封装。相信写代码这么久了,大...
摘要:也明确了大数据时代,前端所应该具备的职业素养高阶组件高阶组件,高阶组件就是一个组件包裹着另外一个组件中两种的实现方法中两种的实现方法返回的类继承了。之所以被称为是因为被继承了,而不是继承了。在这种方式中,它们的关系看上去被反转了。 前言 最近一直再做数据可视化,业务的理解,数据的理解确实如数据可视化要求的一样,有了更多的理解。但是技术上还停留在echart,Hchart, 画图上。正好...
摘要:为了代码进一步解耦,可以考虑使用高阶组件这种模式。开源的高阶组件使用提供了一系列使用的高阶组件,可以增强组件的行为,可以利用此库学习高阶组件的写法。通过使用此库提供的高阶组件,可以方便地让列表元素可拖动。 1. Decorator基本知识 在很多框架和库中看到它的身影,尤其是React和Redux,还有mobx中,那什么是装饰器呢。 修饰器(Decorator)是一个函数,用来修改类的...
摘要:高阶组件主要又分为属性代理和反向继承两种类型,上述举例中的函数就属于属性代理的类型。记住,高阶函数返回的是一个函数,我们只是对其进行了相对应的包装。 首先在正式的高阶组件之前我们先来了解一下函数的类似操作: function hello () { console.log(hello) } function WrapperHello (fn) { return func...
阅读 2827·2021-11-16 11:55
阅读 2570·2021-09-29 09:34
阅读 3344·2021-09-01 14:21
阅读 3674·2019-08-29 12:36
阅读 663·2019-08-26 10:55
阅读 3773·2019-08-26 10:20
阅读 997·2019-08-23 18:19
阅读 1163·2019-08-23 17:56