【温故知新】梳理React中HOC的点点滴滴

前言

由于不可避免的遗忘曲线和最初潦草学习等诸多因素，我获得的某些技术点会存在没有吃透或者出现了被遗忘的情况。幸运的是，我有经验积累这个增益buff，能够不时的有新的开发思路诞生。

此消彼长，也不是长久之计。于是我想通过温故知新的方式，重拾部分技术知识或者提炼一些有趣的“奇思妙想”。

本篇主要重新梳理一下React的HOC。

温故而知新，可以为师矣。

带着问题去寻找答案

如果我还是单纯的看一遍文档，到最后估计收获不大。所以，我在开始前，列了一些自己的疑问以及带着这些疑问要找到答案。

• 为什么提起HOC总会看到Mixins的身影？
• 横切关注点到底是什么？为什么文档里面提到HOC解决了横切关注点问题？
• React为什么用HOC替代Mixins？
• 为什么我平时用不上HOC？
• 我怎样才能用的上HOC？

…

HOC和它的兄弟Mixins

先来聊一下HOC和Mixins这对兄弟的前情提要。

为了解决横切关注点问题，早先React也是采用Mixins方式，但是随着组件的增加，Mixins方式带来了一系列的问题，比如隐式依赖、名称冲突、代码复杂性增加等。

所以React采用HOC的设计模式替代Mixins解决横切关注问题。

名词解释时间

横切关注点

React文档里面提到

如果完全不同的组件有相似的功能，这就会产生“横切关注点（cross-cutting concerns）“问题。

知乎文章 《面向对象困境之 —— 横切关注点》 ，介绍了关注点和横切关注点，并举了日志功能的例子，写的非常好，我把前面的介绍贴出来，帮助大家更好理解。

什么是关注点（Concern）？

A Concern is a term that refers to a part of the system divided on the basis of the functionality.

关注点是指基于功能划分系统的一部分。

什么是横切关注点（Crosscutting Concern）？

部分关注点「横切」程序代码中的数个模块，即在多个模块中都有出现，它们即被称作「横切关注点（Cross-cutting concerns, Horizontal concerns）」。

这样说好像还是特别抽象？那我们举个例子。

日志功能就是横切关注点的一个典型案例。日志功能往往横跨系统中的每个业务模块，即“横切”所有需要日志功能的类和方法体。所以我们说日志成为了横切整个系统对象结构的关注点 —— 也就叫做横切关注点啦。

解决横切关注点不是提炼某个公共方法那么简单，公