React 是一个流行的 JavaScript 库，用于构建用户界面。其中一个主要的特性是组件化，可以将 UI 拆分成小的可重用的组件。在 React 中，高阶组件（Higher-Order Component，HOC）是一种非常有用的模式，可以帮助我们更好地组织和复用组件代码。
什么是高阶组件
高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的增强组件。通俗点说，就是将一个组件作为输入，返回另一个新的组件。
function withHOC(WrappedComponent) {
return class extends React.Component {
render() {
return <WrappedComponent {...this.props} />;
}
};
}在上面的代码中，withHOC 函数接受一个名为 WrappedComponent 的组件作为参数，并返回一个新的组件，这个新组件将 WrappedComponent 作为其子组件进行渲染。
高阶组件的作用
高阶组件最常见的作用是用来增强组件的功能。它可以在不修改原始组件的情况下，动态地添加一些新的功能或行为。例如，我们可以创建一个名为 withLogger 的高阶组件，它可以在组件渲染时输出一条日志。
-- -------------------- ---- -------
-------- ---------------------------- -
------ ----- ------- --------------- -
------------------- -
---------------------- ------------------------ --- ---- ----------
-
-------- -
------ ----------------- --------------- ---
-
--
-在上面的代码中，withLogger 函数返回一个新的组件，在这个新组件的 componentDidMount 生命周期方法中，会输出一条日志，记录当前组件的名称。我们可以使用这个高阶组件来增强任何一个组件的功能。
const EnhancedComponent = withLogger(MyComponent);
在上面的代码中，我们使用 withLogger 高阶组件来增强 MyComponent 组件的功能，将增强后的组件赋值给 EnhancedComponent 变量。
除了增强组件的功能外，高阶组件还可以用来解决一些横切关注点的问题，例如登录验证、权限控制、数据获取等。我们可以在高阶组件中实现这些逻辑，然后将增强后的组件作为输出，使得组件本身只需要关注自己的业务逻辑，而不需要关注这些横切关注点。
高阶组件的注意点
虽然高阶组件非常有用，但是在使用时也需要注意一些问题。
1. 命名冲突
在使用高阶组件时，有可能会出现命名冲突的情况。例如，我们使用 withLogger 高阶组件对 MyComponent 进行增强，得到的新组件名称为 EnhancedComponent，如果我们再次使用 withLogger 对 EnhancedComponent 进行增强，那么得到的新组件名称也是 EnhancedComponent，这样就出现了命名冲突。
为了避免这种情况，我们可以使用 displayName 属性来为组件指定一个显示名称。例如：
-- -------------------- ---- -------
-------- ---------------------------- -
----- ------ ------- --------------- -
------------------- -
---------------------- ------------------------------- --- ---- ----------
-
-------- -
------ ----------------- --------------- ---
-
--
------------------ - ------------------------------------------ -- -------------------------
------ -------
-在上面的代码中，我们为 Logger 组件指定了一个 displayName 属性，这个属性的值是一个字符串，包含了原始组件的名称和增强组件的名称。
2. 不要修改原始组件
在编写高阶组件时，我们要注意不要修改原始组件的属性和状态。这样做会导致组件的行为变得不可预测，可能会引发一些难以调试的问题。
如果需要修改组件的属性和状态，应该通过属性代理的方式进行。例如，我们可以将某个属性传递给原始组件，并在高阶组件中对这个属性进行修改。
-- -------------------- ---- -------
-------- ------------------------- -
------ ----- ------- --------------- -
-------- -
----- -------- - -
--------------
----- ------------------------------
--
------ ----------------- ------------- ---
-
--
-在上面的代码中，我们将 name 属性传递给原始组件，并在高阶组件中将其转换为大写字母。这样做不会修改原始组件的属性，而是创建了一个新的属性对象，将修改后的属性传递给原始组件。
高阶组件的应用示例
下面是一个使用高阶组件实现表单验证的示例代码。
-- -------------------- ---- -------
-------- ----------------------------------- -
------ ----- ------- --------------- -
------------------ -
-------------
---------- - -
------- ---
--
--------------- - ---
-
------------------- ---------- -
--------------------- - ----------
-
------------------- -
----- ------ - ---
--- ------ ---- -- ---------------- -
----- --------- - ----------------------
----- ----- - -----------------
----- ----- - -----------------
-- ------- -
------------ - ------
-
-
--------------- ------ ---
-
-------- -
----- -------- - -
--------------
------- ------------------
-------------- ------------------------------
------------------ ----------------------------------
--
------ ----------------- ------------- ---
-
--
-在上面的代码中，我们定义了一个名为 withFormValidator 的高阶组件，它接受一个组件作为参数，并返回一个新的增强组件。这个增强组件包含了表单验证的逻辑。具体来说，它定义了两个方法 validateField 和 validateAllFields，用于对表单字段进行验证，并将错误信息保存在组件的状态中。
使用这个高阶组件时，我们可以将需要进行表单验证的组件作为参数传递给它。
-- -------------------- ---- -------
----- --------- ------- --------------- -
-------- -
------ -
------
------ ----------- --------------- ------------------------------ --
------ --------------- --------------- ------------------------------ --
------- --------------------------------------------
-------
--
-
-
----- ----------------- - -----------------------------
----- --- ------- --------------- -
-------------- -
-------------------------------
-- -------------------------------------- --- -- -
----------------- --------- ---------------
- ---- -
----------------- ---------- ---------
-
-
-------- -
------ -
-----
------------------
------------------------------
---------------------------------------
----------------------------------------
------------------------------------------------
--------------------------
--
------
--
-
-
----- ----------- - -----------------------在上面的代码中，我们将 LoginForm 组件作为参数传递给 withFormValidator 高阶组件，得到一个新的增强组件 EnhancedLoginForm。然后，我们将 EnhancedLoginForm 组件作为子组件传递给 App 组件，并将 validateField 和 validateAllFields 方法以及 errors 属性传递给它。这样，App 组件就可以对表单进行验证，并根据验证结果来决定是否提交表单。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d90af6a941bf7134078113