React高阶组件

高阶组件本质上是一个函数，这个函数一定是接收一个组件，加工后，返回一个新组件

上代码

Test.js

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <p>{this.props.name}</p>
        <p>{this.props.title}</p>
      </div>
    );
  }
}

export default Test

WithLog.js

WithLog就是一个高阶组件
WithLog接收一个组件，打印接收的组件名，然后给组件添加一个属性name，并返回新的组件

import React, { Component } from 'react';

const WithLog = (Comp) => {
  console.log(Comp.name);
  
  const attr = { name: '高阶组件' }
  const NewComp = (props) => {
    return (
      <Comp {...props} {...attr}></Comp>
    )
  }
  return NewComp
}

export default WithLog;

使用 WithLog

import React from 'react';
import Test from "./Test";
import WithLog from "./WithLog";

function App() {
  return (
    const NewComp = WithLog(Test)
    <div className="App">
      <NewComp title='11111'></NewComp>
    </div>
  );
}

高阶组件的应用

当出现下面的场景：
有10个组件Comp1~Comp10，要在这10个组件中都添加一段相同的逻辑处理，此时就需要创建一个高阶组件Hoc.js，在Hoc中编写这段逻辑，然后将传入的组件处理后返回

使用时，const NewComp1 = Hoc(Comp1)，即可拿到已添加相关逻辑的NewComp1

附官方说明链接