React - 你使用过高阶组件吗

难度级别：初级及以上                                 提问概率：55% 

---

高阶组件并不能单纯的说它是一个函数，或是一个组件，在React中，函数也可以做为一种组件。而高阶组件就是将一个组件做为入参，被传入一个函数或者组件中，经过一定的加工处理，最终再返回一个组件的组合过程。

在面试中，除了要回答知识点的定义，最好可以给出一些应用场景，这样才更有说服力。接下来我们就举例说明高阶组件的一些应用场景。

第一个场景就是将入参组件做为最终返回组件的组成部分。例如最初开发了一个学生信息组件，当时的需求要求只展示基础的学生属性信息即可，而且这个组件已被多个页面同时使用。但由于需求的迭代，现在要求补充学生主修课程信息。这个时候就可以将最初的学生信息组件做为入参，在高阶函数中进行加工，最终将学生基础信息和学生主修课程做为一个大组件返回。这样做既满足了特殊场景的需求，也不会干扰其他页面的效果。

第二个场景就是对入参组件的属性就行修改。例如最初开发的地址组件，可以展示省、市、县、区4个属性，但由于当时未能获取到“区”的数据，这个属性只能根据组件传入的属性判断是否显示。但随着业务的发展，个别“区”有数据了。这个时候就可以将地址组件做为入参，在高阶组件进行属性修改，从而使“区”的数据完美显示。

第三个场景就是根据业务需求对组件进行显示判断。例如将支付按钮做为一个入参组件，在高阶组件中就可以根据当前用户是否已支付，从而判断返回的是支付按钮，还是已支付的提示信息。

但通过以上3个案例可以发现，高阶组件都是在复用入参组件的功能，并不会对入参组件做出行为上的修改。所以高阶组件可以理解为React中一种复用组件的使用技巧。

---

刷题思考

    这道题需要掌握的重点是，高阶组件的入参是一个组件，而且不会对这个组件进行修改，总结起来就是组件的复用。单说知识点并不复杂，所以一定要提前准备一些使用场景。很多时候面试官也会设定一些场景，让求职者回答面对这些场景该如何使用高阶组件。

---

类似考点

    关于React组件的知识，面试官很可能还会提问以下这些问题，例如你知道什么是受控组件吗？例如你能说一说对有状态组件和无状态组件的理解吗？例如你知道如何区分一个React组件是类组件还是函数组件吗？