React 高阶组件

高阶函数基本概念

    函数可以作为参数传递， 比如 setTimeout，数组的操作方法：map，forEach，find.........

    函数可以作为返回值输出，function 里面 return function。

高阶组件基本概念

    高阶组件就是接受一个组件作为参数，并返回一个新组建的函数。

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

为什么需要高阶组件

     重复是优秀系统设计的大敌，多个需要某个相同功能的组件，使用高阶组件减少重复实现，也就是 DRY 原则。

怎么做？

    编写高阶组件

        1 实现一个普通组件

        2 将普通组件使用函数包裹

  编写高阶组件

    使用高阶组件

方式一

---

高阶组件的应用

    代理方式的高阶组件

        返回的 新组件类 直接继承自 React.Component类，新组件扮演的角色 传入参数组件 的一个代理， 在新组件的 render 函数中， 将被包裹组件渲染出来，除了高阶组件自己要做得工作，其余功能全部转手给了包裹的组件

        主要作用

            1. 操作 props

                可以对 传入的参数进行 筛选

1 2 3

            注意： HOC 应该透传与自身无关的 props。

操作 props

            2 抽取状态

                相当于状态提升，将公共逻辑抽离到 HOC，以后所有 input 都可以复用 value 和 onChage 事件，减少重复的代码。

抽取状态