前言
近年前端技术层出不穷，React 也是程序员间讨论最多的 Javascript 框架之一。借这个机会开始学习 React，并把笔记作为 React 基础教程系列（参考 React 官网）。
因为属于入门，不太适合对 React 有经验的同学，但希望到此的同学多少都有所收获。
什么是高阶组件
高阶组件是参数为组件，返回值为新组件的函数。
这不是 React 特有的，平时我们一定接触过高阶函数，高阶组件无非就是返回一个组件式的函数，这点是基于 React 组合特性，也是其特有的设计模式。
示意 React 高阶组件
用法示例
问题场景
比如有个很简单的 Info 组件，渲染出一个数字：
Info Component
调用 Info
但如果我们有一堆类似 Info 的组件，又碰巧所有的组件需要将 num 做个特殊处理，比如都 +1 。
很显然，我们就要到这堆组件中，人为的做处理。
这种"硬代码"写多了，虽然解决了需求问题，但事后只会徒增一堆 bug、和工作量。
使用高阶函数
所以利用高阶组件技巧，可以将 Info 等组件进行装饰，我们只要套同一层高阶组件即可达到最终效果。
他是怎么做的呢？
定义一个 hocFactory 工厂方法，其接受一个组件参数，并对于处理逻辑后，返回另一个组件函数：
高阶组件函数 hocFactory
最后我们调用这个工厂方法，将其结果作为组件在 JSX 模板中当组件标签使用：
调用高阶组件
这样我们就不用修改 Info 组件，直接使用 HocInfo 组件就能使得所有的 num 渲染结果统一处理。
最佳实践
返回的组件上，只定义关键 props
精简属性参数，不要传无用数据。
例如 HocInfo 组件，只为 Info 组件设置 num 属性；额外的属性只会降低高阶组件的灵活性：
HOC 工厂方法的传参的设计
类似 Koa 的 compose 方法，可以最大程度的设计 HOC 工厂方法的参数传递方式。
比如，React Reduc 的 connect 是一个返回高阶组件的高阶函数！
对 HOC 工厂方法设置一个名字
不要 return 一个匿名函数，这样不利于 debugger 调试：
不要在 render 方法中使用 HOC
因为组件每次数据更新，最后都会触发 render 来重新渲染，里面涉及 React 的 diff 算法。
如果每次如下图，重新对组件声明，会造成性能等问题：
把静态 static 方法也要移至到 HOC 组件内定义
避免静态 static 方法在组件进行"加强"时丢失掉，需要移至组件内部：
Refs 不会被传递
因为 ref 不属于 this.props 属性，所以需要使用 React forwardRef 在子组件转发来自父组件的 ref 引用。
作为高阶组件，如果有 ref 的传递需要，则需要单独进行设置：
总结
以上就是高阶组件基本概念，通过高阶组件将帮助我们提高组件单元的复用性，使我们组件之间更好的衔接。
为了更好的阅读体验，可以在文章底下的“了解更多”中查看原文。
閱讀更多 前端雨爸 的文章
