背景
高阶组件的这种写法的诞生来自于社区的实践,目的是解决一些交叉问题(Cross-Cutting Concerns)。而最早时候 React
官方给出的解决方案是使用 mixin
。而 React 也在官网中写道:
We previously recommended mixins as a way to handle cross-cutting concerns. We’ve since realized that mixins create more trouble than they are worth.
官方明显也意识到了使用mixins
技术来解决此类问题所带来的困扰远高于其本身的价值。更多资料可以查阅官方的说明。
高阶函数的定义
说到高阶组件,就不得不先简单的介绍一下高阶函数。下面展示一个最简单的高阶函数
1
| const add = (x,y,f) => f(x)+f(y)
|
当我们调用add(-5, 6, Math.abs)
时,参数 x,y 和f 分别接收 -5,6 和 Math.abs
,根据函数定义,我们可以推导计算过程为:
1 2 3 4
| x ==> -5 y ==> 6 f ==> abs f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11
|
用代码验证一下:
高阶在维基百科的定义如下
高阶函数是至少满足下列一个条件的函数:
高阶组件的定义
那么,什么是高阶组件呢?类比高阶函数的定义,高阶组件就是接受一个组件作为参数并返回一个新组件的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意。
同时这里强调一点高阶组件本身并不是 React
API。它只是一种模式,这种模式是由 React
自身的组合性质必然产生的。
更加通俗的讲,高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced)的 React 组件,供其他组件调用。