React高阶组件(HOC)

官方定义

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

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

理解

1. 高阶组件是一个函数

2. 参数为一个组件(参数也可是多个)

3. 返回一个新的组件(被包装后的组件)

4. 高阶组件内的状态可以给被包装组件

实例

高阶组件

import React from 'react'

function WithHocName(WrapC)
{
  return class extends React.PureComponent {
    constructor(props) {
      super(props)

      this.state = {
        data : {
          a: 1,
          b:2,
          c:3
        }
      }
    }

    render() {
      return (
        <React.Fragment>
          <span>这是高阶组件的内部</span>
          <WrapC data={this.state.data} {...this.props} />
        </React.Fragment>
      )
    }
  }
}

export default WithHocName

被包装组件

import React from 'react'
import WithHocName from './WithHocName'

function App() {
  return (
     <>
        我是要使用高阶组件的组件
     </>
  );
}

export default WithHocName(App);

使用高阶组件后的props

高阶组件获取被包装组件的参数

使用

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App name="zhy" age={23} />
  </React.StrictMode>,
  document.getElementById('root')
);

总结

官方文档还是官网文档最仔细，忘记的时候在去看！