阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式

 

具体而言，高阶组件是参数为组件，返回值为新组件的函数

 

注意：

• HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用
• 高阶组件(HOC)约定使用withXXX来命名
• 约定：包装显示名称以便轻松调试
• 不要在 render 方法中使用 HOC
• Refs 不会被传递

 

 

例子： 例如我们很多页面都需要用到表格，但是我们每次都是声明page, pageSize, total等state，以及handlePageCurrent函数，那么我们是可以使用HOC高阶函数把公用函数抽离出去啦

const WithTableComponent = Component => {
 // 返回class 组件
 return class HocComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       total: 0,
       page: 1,
       pageSize: 1,
   }
     this.handlePageCurrent = this.handlePageCurrent.bind(this);
   }
   handlePageCurrent(page, pageSize) {
     console.log(page, pageSize);
     this.setState({
       page,
       pageSize,
   })
  }

 render() {
   return <Component
     {...this.props} 
       {...{ 
         tableProps: this.state, 
         handlePageCurrent: this.handlePageCurrent,
    }}
   />
    }
  }
}
export default WithTableComponent;


调用
const UserList = (props) => {
   const { 
     tableProps
  } = props;

   return <div>
     <Table 
       dataSource={[
      { id: 1, title: 'aa'},
      { id: 2, title: 'bb'},
    ]}
       columns={[
      { title: 'ID', dataIndex: 'id'},
      { title: '名称', dataIndex: 'title'},
     ]}
       rowKey='id'
       pagination={{
         current: tableProps.current,
         pageSize: tableProps.pageSize,
         total: 2,
         onChange(page = 1, pageSize = 20){
             props.handlePageCurrent(page, pageSize);
      }
    }}
   />
 </div>
}


export default WithTableComponent(UserList);