十二、高阶组件

Higher - Order Components：其实就是一个函数，传给它一个组件，它返回一个新的组件

形如：

const NewComponent = HOC(YourComponent)

• 高阶组件是强化组件的一种方式，一般是具备复用的，如果只是某个组件需要强化，则没有必要写成高阶组件的形式
• HOC实现步骤
  • 创建一个函数
  • 指定函数参数，参数应该以大写字母开头
  • 在函数内部创建一个类组件，提供复用的状态（如有）及逻辑代码，并返回
  • 在该组件中，渲染参数组件，同时将状态通过props传递给参数组件（可选，如有）
  • 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

例如：自动注入一个版权信息

// src/Hoc/Hoc_copyright.jsx
// Fragment是一个伪标签，渲染的时候是不会显示在页面中的，因此也不会影响样式，可以写key属性
import React, { Component, Fragment } from "react";

const withCopyright = (Cmp) => {
  return class Hoc extends Component {
    render() {
      return (
        <Fragment>
          <Cmp></Cmp>
          <div>&copy; 2020 开始发行</div>
        </Fragment>
      );
    }
  };x
};
export default withCopyright;

使用方式

import React, { Component } from "react";
// 引入HOC
import Hoc from './Hoc/Hoc_copyright'

class App extends Component {
  render() {
    return (
      <div>
        <h1>网站首页</h1>
      </div>
    );
  }
}
// 使用HOC
export default Hoc(App);