我的回答

HOC, 一个函数接收React组件, 返回一个新的React组件, 主要适用于组件的复用

参考回答

高阶组件

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

  • 高阶组件(HOC)就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，他只是一个组件的设计模式，这种设计模式是由react自身的组合性质必然产生的。我们称他们为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。
    1. //hoc的定义
    2. function withSubscription(WrappedComponent,selectData){
    3.   return class extends React.Component{
    4.       constructor(props){
    5.           super(props);
    6.           this.state={
    7.               data:selectData(DataSource,props)
    8.           }
    9.       };
    10.       // 一些通用的逻辑处理
    11.       render(){
    12.           // 使用新数据渲染被包装的组件
    13.           return <WrappedComponent data={this.state.data} {...this.props} />;
    14.       }
    15.   };
    16.   //使用
    17.   const BlogPostWithSubscription=withSubscription(BlogPost,(DataSource,props)=>DataSource.getBlogPost(props.id))
    18. }

1.hoc的优缺点

  • 优点：逻辑复用，不影响被包裹组件的内部逻辑
  • 缺点：hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖

2.适用场景：

  • 代码复用，逻辑抽象
  • 渲染劫持
  • State抽象和更改
  • Props更改