React高阶组件（HOC），让组件复用与扩展变得简单，省时、省力又省心，何不用起来？

大家好，欢迎来到IT知识分享网。

说到React的高阶组件，不得不摘抄官网一段经典的介绍：

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。

组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。

HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 和 Relay 的 createFragmentContainer。

关键词：复用逻辑、组合、设计模式。

熟悉vue的朋友可能知道，在组件复用逻辑（状态、方法等）的一种方式是使用mixins（混入），即将多个组件复用的逻辑单独出来，通过混入的方式引入组件，通过与当前组件的状态、方法等进行组合，得到最终组合后的组件，说白了就是复用与扩展了当前组件的一些能力。不理解的可以参考vue官网的mixins，写的很详细：

混入 — Vue.jsVue.js – The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/mixins.html当然，react里面也有mixins，用法与vue里面的大同小异，但是官网对其做出的描述是：

也就是说，react将弃用mixins，取而代之的有高阶组件（HOC）、render props等。

不得不说render props也是个神器，yyds！

React高阶组件（HOC），让组件复用与扩展变得简单，省时、省力又省心，何不用起来？OK，闲话少说，直接走起。

官网的例子很具有代表性，我先使用其进行分析，然后再举个简单的例子帮助理解。（也可以直接往下查看我的简单例子）

组件是 React 中代码复用的基本单元。但你会发现某些模式并不适合传统组件。

例如，假设有一个CommentList组件，它订阅外部数据源，用以渲染评论列表：

class CommentList extends React.Component { constructor(props) { super(props); 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 ( <div> {this.state.comments.map((comment) => ( <Comment comment={comment} key={comment.id} /> ))} </div> ); } }

主要观察上面的代码，稍后，编写了一个用于订阅单个博客帖子的组件，该帖子遵循类似的模式： 

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 <TextBlock text={this.state.blogPost} />; } }

有没有发现，CommentList和BlogPost不同 – 它们在数据源DataSource上调用不同的方法，且渲染不同的结果。但它们的大部分实现都是一样的：

• 在挂载时，向 DataSource 添加一个更改侦听器。
• 在侦听器内部，当数据源发生变化时，调用 setState。
• 在卸载时，删除侦听器。 

你可以想象，在一个大型应用程序中，这种订阅DataSource和调用setState的模式将一次又一次地发生。我们需要一个抽象，允许我们在一个地方定义这个逻辑，并在许多组件之间共享它。这正是高阶组件擅长的地方。

对于订阅了DataSource的组件，比如CommentList和BlogPost，我们可以编写一个创建组件函数。该函数将接受一个子组件作为它的其中一个参数（可以是多个参数），该子组件将订阅数据作为 prop。

//withSubscription为高阶组件，复用逻辑提取到里面 const CommentListWrapper = withSubscription( CommentList, (DataSource) => DataSource.getComments() ); const BlogPostWrapper = withSubscription( BlogPost, (DataSource, props) => DataSource.getBlogPost(props.id) ); //CommentListWrapper、BlogPostWrapper分别为扩展（共享逻辑）之后的新组件

第一个参数是被包装组件。第二个参数通过DataSource和当前的 props 返回我们需要的数据。当渲染这两个组件时，CommentList和BlogPost将传递一个data prop，其中包含从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) //DataSource全局数据源 }; } componentDidMount() { // 负责订阅相关的操作 DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { // 清除订阅 DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ data: selectData(DataSource, this.props) }); } render() { // 并使用新数据渲染被包装的组件! // 请注意，我们可能还会传递其他属性 return <WrappedComponent data={this.state.data} {...this.props} />; } }; }

请注意，HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。

被包装组件接收来自容器组件的所有 prop，同时也接收一个新的用于 render 的data prop。HOC 不需要关心数据的使用方式或原因，而被包装组件也不需要关心数据是怎么来的。

因为withSubscription是一个普通函数，你可以根据需要对参数进行增添或者删除。例如，您可能希望使data prop 的名称可配置，以进一步将 HOC 与包装组件隔离开来。或者你可以接受一个配置shouldComponentUpdate的参数，或者一个配置数据源的参数。因为 HOC 可以控制组件的定义方式，这一切都变得有可能。

与组件一样，withSubscription和包装组件之间的契约完全基于之间传递的 props。这种依赖方式使得替换 HOC 变得容易，只要它们为包装的组件提供相同的 prop 即可。例如你需要改用其他库来获取数据的时候，这一点就很有用。

以上就是官网高阶组件的经典例子，描述的也比较清楚，如果还不太明白，接下来看一个非常简单的实例，帮助大家理解。

现在，有两个组件，分别是Page和OtherPage：

//Page.js import React from 'react'; class Page extends React.Component { constructor(props) { super(props); this.state = { msg: '', user: '', title: 'Page' } } componentDidMount(){ let greet = sessionStorage.getItem('greet') let name = sessionStorage.getItem('name') this.setState({ msg: greet, user: name }) } render(){ return ( <div> <h3>{this.state.title}</h3> <p>{this.state.msg}</p> <span>{this.state.user}</span> </div> ) } } export default Page

（主要观察两个组件之间的逻辑与功能 ）

//OtherPage.js import React from 'react'; class OtherPage extends React.Component { constructor(props) { super(props); this.state = { msg: '', user: '', title: 'OtherPage' } } componentDidMount(){ let greet = sessionStorage.getItem('greet') let name = sessionStorage.getItem('name') this.setState({ msg: greet, user: name }) } render(){ return ( <div> <h3>{this.state.title}</h3> <div> <span>这里是关于当前组件的介绍......</span> </div> <p>{this.state.msg}</p> <span>{this.state.user}</span> </div> ) } } export default OtherPage

展示两个组件，页面效果如下：

展示比较简单，主要是结合代码，对比页面，发现两个组件的逻辑有一部分的代码是相似的，同样地试想一下，如果相似的逻辑代码量比较大，且使用到的组件比较多，若每个组件重新写一遍，会造成代码重复、冗余，因此我们借鉴官网的例子，将相同逻辑的代码单独定义，并允许多组件之间共享，使用高阶组件实现。

现在，我们需要定义一个高阶组件（一个函数，参数是组件，返回一个新组件），即包裹组件，将相同逻辑提取于此。

//高阶组件Wrapper.js import React from 'react'; // 此函数接收一个组件与组件的标题（当然也可以是自己定义的其他扩展能力） export default function wrapper(WrappedComponent, pageTitle) { // 并返回一个新组件 return class extends React.Component { constructor(props) { super(props); this.state = { msg: '', user: '', title: pageTitle }; } componentDidMount(){ let greet = sessionStorage.getItem('greet') let name = sessionStorage.getItem('name') this.setState({ msg: greet, user: name }) } render() { // 将属性props（或扩展能力）传给被包裹的组件 return <WrappedComponent {...this.state} />; } }; }

此时，Page、OtherPage组件相应调整，去掉重复逻辑部分：

//Page.js import React from 'react'; import wrapper from './Wrapper'; //导入高阶组件（即一个函数） class Page extends React.Component { render(){ //此时相似的逻辑已经被提取到高阶组件中，通过props获取状态或扩展能力 return ( <div> <h3>{this.props.title}</h3> <p>{this.props.msg}</p> <span>{this.props.user}</span> </div> ) } } //使用高阶组件对其包裹，传入当前组件与当前组件标题，扩展成新组件 export default wrapper(Page,'Page')

//OtherPage.js import React from 'react'; import wrapper from './Wrapper'; class OtherPage extends React.Component { render(){ //此时相似的逻辑已经被提取到高阶组件中，通过props获取状态或扩展能力 return ( <div> <h3>{this.props.title}</h3> <div> <span>这里是关于当前组件的介绍（高阶组件）......</span> </div> <p>{this.props.msg}</p> <span>{this.props.user}</span> </div> ) } } //使用高阶组件，传入当前组件与当前组件标题，也可以像官网那样在外部使用 //const WrapperOtherPage = wrapper(OtherPage,'OtherPage')，效果一致 export default wrapper(OtherPage,'OtherPage')

页面效果与未使用高阶组件前一致，达到目的。

现在，我们已经定义了一个高阶组件，其他需要这个逻辑（功能）的组件只需要将自身的当成参数传入即可，而不需要重复写入该逻辑；自身组件不需要感知到外部的高阶组件的存在，可以直接使用props获取扩展属性与功能。现在，你学会了吗？

最后，在使用高阶组件时有一些需要注意的地方，官网描述得很清楚，可以前往查看。高阶组件 – Reacthttps://react.docschina.org/docs/higher-order-components.html