高阶组件是react中用于重用组件逻辑的高级技术。可以说是一种模式。具体来说呢,高阶组件是一个函数,它接收一个组件并返回一个新的组件。

就像这样,

const EnhancedComponent = higherOrderComponent(WrappedComponent);

我们知道,组件将props转为UI,而高阶组件是将一个组件转为另一个组件。组件是React中代码重用的最小单元。然而你会发现某些模式并不能直接适应传统组件。

我们可以写一个函数,能够创建类似于CommentListBlogPost这类订阅DataSource的新的组件。这个函数接受一个子组件作为参数,这个子组件接受订阅数据源作为props,调用withSubscription如下,

const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
); const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);

第一个参数是被包含的组件,第二个参数根据给定的DataSource和当前的props取回我们需要的数据。

当 CommentListWithSubscription 和 CommentListWithSubscription 被渲染时,CommentList 和 BlogPost 将会被传递 data 属性,其中包含从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 <WrappedComponent data={this.state.data} {...this.props} />;
}
};
}

高阶组件既不会修改输入组件,也不会通过继承来复制行为。相反,通过包裹的形式,高阶组件将原先的组件组合在container组件中。高阶组件是纯函数,没有副作用。

在react-router4.0中我们使用的withRouter就是一个高阶组件,以及redux中的connect等。

关于react16.4——高阶组件(HOC)的更多相关文章

  1. 高阶函数 HOF & 高阶组件 HOC

    高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...

  2. 高阶组件 HOC

    一. A higher-order component (HOC) is an advanced technique in React for reusing component logic. a h ...

  3. react系列(二)高阶组件-HOC

    高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...

  4. React: 高阶组件(HOC)

    一.简介 如我们所知,JavaScript有高阶函数这么一个概念,高阶函数本身是一个函数,它会接收或者返回一个函数,进而对该函数进行操作.其实,在React中同样地有高阶组件这么一个东西,称为HOC, ...

  5. 高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)

    一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入 ...

  6. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  7. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  8. 高阶类 & HOC & anonymous class extends

    高阶类 & HOC & anonymous class extends js 匿名 class extends / mix-ins / 多继承 高阶函数 HOF, 接收一个 funct ...

  9. React HOC(高阶组件)

    一.定义 高阶函数:函数接受函数作为输入,或者输出一个函数. 高阶组件:接受React组件作为输入,或是输出一个组件.即hocFactory:: W: React.Component => E: ...

随机推荐

  1. P4246 [SHOI2008]堵塞的交通

    思路 同LOJ121 动态图连通性的板子 好像有很神的线段树做法,不会,先码住 代码 #include <cstdio> #include <algorithm> #inclu ...

  2. Python实现机器学习算法:K近邻算法

    ''' 数据集:Mnist 训练集数量:60000 测试集数量:10000(实际使用:200) ''' import numpy as np import time def loadData(file ...

  3. c# 重试机制

    protected async Task<T> TryOperation<T>(int maxRetryCount,Func<Task<T>> func ...

  4. 【NOIP 2018】Day2 T3 保卫王国

    Problem Description Z 国有\(n\)座城市,\(n - 1\)条双向道路,每条双向道路连接两座城市,且任意两座城市 都能通过若干条道路相互到达. Z 国的国防部长小 Z 要在城市 ...

  5. webpack插件配置(二)- HtmlWebpackPlugin

    作用 简化Html文件的创建,以便为你的webpack bundle包提供服务.这对于在文件名中包含每次会随着编译而发生变化的hash的webpack bundle尤其有用.插件可以生成一个HTML文 ...

  6. layer 弹出层 回调函数调用 弹出层页面 函数

    1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...

  7. vue--toutiao

    git:https://github.com/vinieo/vue-toutiao 顶部导航栏 内容 底部导航按钮 组件

  8. 蚂蚁金服“定损宝”现身AI顶级会议NeurIPS

    小蚂蚁说: 长期以来,车险定损(通过现场拍摄定损照片确定车辆损失,以作为保险公司理赔的依据)是车险理赔中最为重要的操作环节.以往传统保险公司的车险处理流程,一般为报案.现场查勘.提交理赔材料.审核.最 ...

  9. 使用CSS渐变

    转载自:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients CSS 渐变 是在 CSS3 Image ...

  10. 添加删除tag

    为某个分支打tag git tag -a v1. 9fceb02 删除tag git tag -d test_tag git push origin --delete tag test_tag 推送: ...