高阶组件

呜呜呜介绍一下高阶组件

基本概念

这里直接看官方文档: 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。
组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。

官方文档用了一个demo解释了一下，这里我就说个大概，就是当我们需要两个组件，一个是CommentList用于获取用户评论，一个是BlogPost用于订阅单篇博客，他们都共享订阅数据————渲染————取消订阅这么一个逻辑，这样我们就可以把这个公共逻辑抽象成一个函数，这个函数就是一个高阶组件，因为这个函数接受了一个普通组件作为参数返回了一个有着订阅逻辑后的新组件，直接上代码: (这里我随便写写，跟官方不一样了)

// 原本组件逻辑
function CommentList(){
  const [data, setData] = useState()
  useEffect(()=>{
    DataSource.getComment(handleChange())//获取订阅
    return DataSource.removeComment(handleChange())//清除订阅
  })
  handleChange = () => {
    setData(data)
  }
  return <div onClick={handleChange}>{data}</div>
}

function BlogPost(){
  const [data, setData] = useState()
  useEffect(()=>{
    DataSource.getBlog(handleChange())//获取订阅
    return DataSource.removeBlog(handleChange())//清除订阅
  })
  handleChange = () => {
    setData(data)
  }
  return <div onClick={handleChange}>{data}</div>
}

// 高阶组件函数

getDataComp = (Comp, getDataType,removeDataType) => {

  const [data, setData] = useState()

  return function() {
    useEffect(() => {
      DataSource.getDataType()
      return DataSource.removeDateType()
    })
  }

  handleChange = () => {
    setData(data)
  }

  return <Comp data={state.data} props={...props}/>
}

这里的订阅数据就会作为props传递了，可能这里我写的没有很明白，那就还是可以去官方文档看看。
然后高阶组件是纯函数，绝不要在高阶组件中修改原组件模型，并且要将不向关的props传给被包裹的组件，大多数 HOC 都应该包含一个类似于下面的 render 方法：

render() {
  // 过滤掉非此 HOC 额外的 props，且不要进行透传
  const { extraProp, ...passThroughProps } = this.props;

  // 将 props 注入到被包装的组件中。
  // 通常为 state 的值或者实例方法。
  const injectedProp = someStateOrInstanceMethod;

  // 将 props 传递给被包装组件
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}

mad 写着写着突然发现，自定义hook是不是可以代替高阶组件和 render props？？？哇日！？我麻了我麻了我麻了
这东西可以深挖，先放一放