&emsp;&emsp;高阶组件（High Order Component，简称HOC）不是一个真的组件，而是一个没有副作用的纯函数，以组件作为参数，返回一个功能增强的新组件，在很多第三方库（例如Redux、Relay等）中都有高阶组件的身影。由于遵循了装饰者模式的设计思想，因此不会入侵传递进来的原组件，而是对其进行抽象、包装和拓展，改变原组件的行为（图9形象的表达出了高阶组件的作用）。这样不仅增强了组件的复用性和灵活性，还保持了组件的易用性。灵活使用高阶组件，可大大提高代码质量。 :-:  图9 高阶组件的作用 &emsp;&emsp;高阶组件有两种常见的实现方式：代理和继承，下面会分别做讲解。 ## 一、代理方式 &emsp;&emsp;高阶组件作为原组件的代理，不但会将其包裹住，还会给它添加新特性，并且提供了众多控制原组件的功能，例如操纵props、抽取state、访问实例和再包装等。 **1）操纵props** &emsp;&emsp;在原组件（即被包裹组件）接收到props之前，高阶组件可以将其拦截，执行增删改操作，再将处理过的props传给原组件。下面是一个简单的示例，会在高阶组件中新增了一个name属性。 ~~~js //原组件 class Btn extends React.Component { render() { return <button>{this.props.name}</button>; } } //高阶组件 function HOC(Wrapped) { class Enhanced extends React.Component { constructor(props) { super(props); this.state = { name: "strick" }; } render() { return <Wrapped {...this.state} />; } } return Enhanced; } const EnhancedBtn = HOC(Btn); ~~~ &emsp;&emsp;HOC()函数就是高阶组件，在函数体中声明了用于修饰原组件Wrapped的新组件Enhanced，它的name状态作为props传给了Wrapped，并在render()方法中将Wrapped渲染出来。当执行HOC(Btn)后，就能得到增强了的EnhancedBtn组件。 **2）抽取state** &emsp;&emsp;将原组件的state和与之相关的处理函数抽取到高阶组件中，从而使得原组件无状态，变成容易复用的展示型组件。以一个能维护自己状态的Input组件为例，如下所示。 ~~~js class Input extends React.Component { constructor(props) { super(props); this.state = { value: "" }; this.handle = this.handle.bind(this); } handle(e) { this.setState({ value: e.target.value }); } render() { return ( <input type="text" value={this.state.value} onChange={this.handle} /> ); } } ~~~ &emsp;&emsp;现在将Input组件处理value状态和onChange事件的代码提升到高阶组件中，如下代码所示，在render()方法中初始化了一个newProps对象，用于把处理好的value状态和事件处理程序handle()回传给Input组件。 ~~~js function stateHOC(Wrapped) { class Enhanced extends React.Component { constructor(props) { super(props); this.state = { value: "" }; this.handle = this.handle.bind(this); } handle(e) { this.setState({ value: e.target.value }); } render() { let newProps = { value: this.state.value, onChange: this.handle }; return <Wrapped {...newProps} />; } } return Enhanced; } ~~~ &emsp;&emsp;经过高阶组件的抽象后，Input组件就变得很简单，如下代码所示，没有额外的逻辑操作，只要接收传过来的props即可。 ~~~js class Input extends React.Component { constructor(props) { super(props); } render() { return <input type="text" {...this.props} />; } } ~~~ **3）Refs** &emsp;&emsp;通过[第5篇](https://www.cnblogs.com/strick/p/10593862.html)提到的Refs访问方式，可以得到被包裹组件的实例，从而就能操纵组件中的DOM元素。以下面的Btn组件为例，在高阶组件中给它定义ref属性，这样就能在新组件的componentDidMount()方法中访问到Btn组件的实例。 ~~~js class Btn extends React.Component { render() { return <button>提交</button>; } } function refHOC(Wrapped) { class Enhanced extends React.Component { render() { return <Wrapped ref={btn => { this.myBtn = btn }} />; } componentDidMount() { console.log(this.myBtn); //Btn组件的实例 } } return Enhanced; } ~~~ &emsp;&emsp;注意，ref属性不会传递给原组件，如果在上面的Btn组件中读取this.props.ref，那么得到的值将是undefined，如下所示。 ~~~js class Btn extends React.Component { render() { console.log(this.props.ref); //undefined } } ~~~ **4）包装** &emsp;&emsp;在高阶组件中，还能通过引入其它React元素包装原组件，既能改变布局，也能增加样式。例如用一个包含内边距的元素包裹原组件，并在其邻近的位置新增一个文本框，如下所示。 ~~~js function wrappedHOC(Wrapped) { class Enhanced extends React.Component { render() { return ( <div style={{ padding: 10 }}> <input type="text" /> <Wrapped /> </div> ); } } return Enhanced; } ~~~ ## 二、继承方式 &emsp;&emsp;继承是另一种构建高阶组件的方式，即新组件直接继承原组件（如下代码所示），从而实现通用逻辑的复用，并且还能使用原组件的state和props，以及生命周期等方法。 ~~~js function inheritHOC(Wrapped) { class Enhanced extends Wrapped { } return Enhanced; } ~~~ &emsp;&emsp;在代理方式下的新组件和原组件会各自经历一次完整的生命周期，而在继承方式下，两者会共用一次生命周期。 **1）渲染劫持** &emsp;&emsp;在高阶组件中，可以通过super.render()渲染原组件，从而就能控制高阶组件的渲染结果，即渲染劫持。例如在新组件的render()方法中克隆原组件并为其传递新的props，如下所示。 ~~~js function inheritHOC(Wrapped) { class Enhanced extends Wrapped { render() { //获取原组件 const origin = super.render(); //合并原组件的属性，并新增value属性的值 const props = Object.assign({}, origin.props, {value: "strick"}); return React.cloneElement(origin, props, origin.props.children); } } return Enhanced; } ~~~ &emsp;&emsp;代码中的React.cloneElement()方法能接收3个参数，第一个是要克隆的React元素，后两个是要传递的新props和原来的children属性。 &emsp;&emsp;除了render()方法，其余诸如componentWillMount()、componentWillUpdate()等生命周期中的方法也是能劫持的。 **2）使用state** &emsp;&emsp;在高阶组件中，不仅可以读取原组件的state，还能对其进行修改或增加，甚至是删除。不过，这三类带有侵略性的操作，会让原组件内部变得混乱不堪，因此要慎用。在下面的示例中，Input组件包含一个value状态，高阶组件内的新组件Enhanced会在其构造函数中增加一个name状态，并修改value状态的值。 ~~~js class Input extends React.Component { constructor(props) { super(props); this.state = { value: "" }; } render() { return <input type="text" value={this.state.value} />; } } function stateHOC(Wrapped) { class Enhanced extends Wrapped { constructor(props) { super(props); this.state.name = "strick"; //增加状态 this.state.value = "init"; //修改状态 } render() { return super.render(); } } return Enhanced; } let EnhancedInput = stateHOC(Input); ~~~ ## 三、参数传递 &emsp;&emsp;高阶组件除了一个组件参数之外，还能接收其它类型的参数，例如为高阶组件额外传递一个区分类别的type参数，如下所示。 ~~~js HOC(Wrapped, type) ~~~ &emsp;&emsp;不过，在React中，函数式编程的参数传递更为常用，即使用柯里化的形式，如下代码所示，其中HOC(type)会返回一个高阶组件。 ~~~js HOC(type)(Wrapped) ~~~ &emsp;&emsp;而在第三方库中，这种形式的高阶组件被大量应用，例如Redux中用于连接React组件与其Store的connect()函数，它是一个能返回高阶组件的高阶函数，其参数可以是两个函数，如下所示。 ~~~js const Enhanced = connect(mapStateToProps, mapDispatchToProps)(Wrapped); ~~~ &emsp;&emsp;将上面这条语句拆分成两条目的更为清晰的语句，就能让人更容易理解代码的意图，如下所示。 ~~~js const enhance = connect(mapStateToProps, mapDispatchToProps); const Enhanced = enhance(Wrapped); ~~~ &emsp;&emsp;虽然这种形式的高阶组件会让人困惑，但是更易于组合。因为它会把参数序列处理到只剩一个组件参数，而高阶组件的返回值也是一个组件，也就是说，前一个高阶组件的返回值可以作为后一个高阶组件的参数，从而使得这些高阶组件可以组合在一起。例如有三个高阶组件f、g和h，它们可以像下面这样组合在一起。 ~~~js f(g(h(Wrapped))) ~~~ &emsp;&emsp;如果要嵌套的高阶组件很多，那么这种写法将变得异常丑陋且难以阅读。这个时候，就可以引入compose()函数，它能将函数串联起来，即用平铺的写法实现函数的组合，如下代码所示，省略了compose()函数的具体实现。 ~~~js compose(f, g, h) ~~~ &emsp;&emsp;compose()函数的执行方向是自右向左，并且还有一个限制，那就是第一个高阶组件（即h）可以接收多个参数，但之后的就只能接收一个参数。 ## 四、命名 &emsp;&emsp;在高阶组件中创建的新组件，不会再沿用原组件的名称。为了便于在React Developer Tools中调试，需要为新组件设置一个显示名称，例如新组件的名称是“Enhanced”，原组件的名称是“Input”，那么就以“Enhanced(Input)”为显示名称。 &emsp;&emsp;为了完成这个功能，高阶组件可以修改成下面这样。注意，在定义displayName属性时，用到了ES6新增的模板字面量。 ~~~js function HOC(Wrapped) { class Enhanced extends React.Component { } Enhanced.displayName = `Enhanced(${getDisplayName(Wrapped)})`; return Enhanced; } ~~~ &emsp;&emsp;getDisplayName()函数用于获取组件的名称（如下代码所示），如果组件的displayName属性不存在，那么就改用name属性，即类或函数的名称。 ~~~js function getDisplayName(Wrapped) { return Wrapped.displayName || Wrapped.name || "Component"; } ~~~ ## 五、注意事项 &emsp;&emsp;（1）不要在组件的render()方法中使用高阶组件。因为高阶组件每次都会创建一个新组件，而根据React的diff算法可知，原组件（即前一次所创建的组件）会先被卸载掉，然后重新挂载新组件。这么做不仅性能低下，而且原组件的状态和其所有子组件都将丢失。 &emsp;&emsp;（2）高阶组件创建的新组件不会包含原组件的静态方法，如果需要，那么就得手动复制。 ***** > 原文出处： [博客园-React躬行记](https://www.cnblogs.com/strick/category/1455720.html) [知乎专栏-React躬行记](https://zhuanlan.zhihu.com/pwreact) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。