React 高阶组件 (Higher-Order Component, HOC) 是一种高阶函数，用于将组件逻辑复用。它不是 React API 的一部分，而是一种模式，通过这种模式，我们可以将多个组件共享的逻辑抽离出来，这样我们编写的代码更加简洁和易于维护。
什么是高阶组件？
高阶组件是接受一个组件作为参数并返回一个新组件的函数。使用高阶组件，我们可以将共享的组件逻辑提取出来，并让代码更加优雅。
以下示例为一个简单的高阶组件，它可以在传入的组件中添加一个布尔类型的 isLoading 属性:
------ ----- ---- --------
-------- ---------------------- -
------ -------- ------------------ -
----- --------- - ----- -- ---------
------ --------- - ----------------- - ---------- ---------- --------------------- ---
--
-
-------- ------------- --------- -- -
------ ------------- - ------------ - --------------
-
----- ---------------------- - -------------------------
-------- ----- -
------ ----------------------- ---
-在上面的代码中， withLoading 是一个高阶组件，它将一个组件作为输入并返回一个新的增强型组件。 WithLoading 组件将 isLoading 属性传递给接受者组件作为一个新属性。
高阶组件的使用场景
高阶组件主要解决以下问题:
- 横切关注点 (Cross-Cutting Concerns): 比如说身份验证、日志记录、性能优化等等。
- 代码复用: 如果项目有多个组件要实现同样的逻辑，用高阶组件会让你避免代码的重复。
高阶组件的缺点
虽然高阶组件提供了很多好处，但是如果使用不当的话，有以下缺点：
- 嵌套地狱: 过多的高阶组件嵌套会让代码难以维护和理解，因为它们往往会形成一个巨大的嵌套层次。
- 副作用问题：高阶组件可以改变传入组件的运行方式，这可能会对程序的功能和效率产生不必要的影响。
- 命名冲突： 高阶组件的名称与接受者组件的名称可能会产生冲突，特别是在比较大的应用程序中。
高阶组件的最佳实践
使用高阶组件时，需要注意以下几点：
- 在设计应用程序时尽可能减少高阶组件的使用。它们不是没有代价的。将它们应用在组件的单个方面或管理组件识别之间的共同行为上。
- 使用高阶组件为组件添加行为时，始终约定使用
with前缀，以便于其他开发人员识别。 - 尽量使 HOC 的传递属性的名称和类型更具体化，并且与传递给底层组件的属性名称不同，以避免名称冲突和重复。
- 尽量使用 React 的 Context API，它能提供更灵活的解决方案。
- 记得在编写代码时使用高阶组件的类型来了解代码的细节。使用
with前缀命名的高阶组件通常会返回一个新组件。所以，我们要在使用时了解是否会如此。此外，在这种情况下，我们必须对返回的组件以另一种方式进行操作.
结论
高阶组件是一个优秀的功能，它为 React 应用程序提供了模块化和复用的特性。但是，在使用高阶组件时，我们必须注意防止嵌套地狱和命名冲突等问题。如果你在编写 React 应用程序并且想使代码更具有模块化和可维护性，那么请尝试使用高阶组件。
代码示例
这里提供一个典型的使用高阶组件来实现身份验证的示例代码：
------ ----- ---- --------
-- --------
-------- ----------------------------- -
----- ------------------ ------- --------------- -
------------------ -
-------------
---------- - -
---------------- -----
--
-
------------------- -
-- -----------
--------------- ---------------- ---- ---
-
-------- -
----- - --------------- - - -----------
-- ------------------
-- ----------------- -
------ ---------- --------------- ---
- ---- -
------ ------------
-
-
-
------ -------------------
-
-- ---------
-------- ----------- -
------ ------------------
-
-- ----------------------------
----- --------------------------- - ------------------------------
-- ---------
-------- ----- -
------ ---------------------------- ---
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6702475ed91dce0dc846fa69