6.React 的高阶组件（HOC）

什么是高阶组件

1. 高阶函数接收函数作为参数，并且返回值也是一个函数
2. 类似的，高阶组件接收React组件作为参数，并且返回一个新的React组件。
3. 高阶组件本质上也是一个函数，并不是一个组件，这一点一定要注意。

高阶组件的作用

1. 如下面的代码，封装了一个通用的功能：需从LocalStorage中获取数据，然后渲染出来
2. 本质上的作用：封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用
3. 本质上是一个装饰者设计模式

import React, { Component } from 'react'

function withPersistentData(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem('data');
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

class MyComponent2 extends Component {  
  render() {
    return <div>{this.props.data}</div>
  }
}

const MyComponentWithPersistentData = withPersistentData(MyComponent2)

缺点

1. 高阶组件（HOC）则容易导致Dom树嵌套很深。
2. React hook 可以减少组件嵌套的层数

React Hooks最佳使用场景：

1. 每个组件需要单独定制相关逻辑；
2. 目标行为只在局部有限的几个组件使用，而不是全局很多组件在使用；
3. 目标行为为组件添加很多属性；