前端开发中，高阶组件（HOC）是一个常用的设计模式。但是在大型项目中使用 HOC 可能会导致组件树嵌套过深或者 HOC 组合过于复杂。这时可以使用 extract-hoc-compose 来解决这个问题。
extract-hoc-compose 简介
Extract HoC Compose 是一个库，它可以将 HOC 组合的代码从组件中提取出来，将 HOC 的组合逻辑放在可复用的工具函数中。这样可以简化组件的代码，减少代码重复，且使 HOC 组合逻辑更为清晰易懂。
相较于将 HOC 组合逻辑放在组件中，这种方法让 HOC 组合逻辑最终都存在一个函数中，可以更方便地进行单元测试。
使用方法
安装
在使用 extract-hoc-compose 之前，需要先将其安装到项目中。可以在命令行中使用 npm 进行安装：
npm i extract-hoc-compose
基本用法
下面是一个使用了 HOC 组合的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------
------ --------- ---- --------------
------ -------- ---- -------------
----- ----------- ------- --------------- -
------------------- -
-- ---
-
-------- -
----- - ---- - - -----------
------ --------------------
-
-
------ ------- ----------------------------------------------使用 extract-hoc-compose，可以将上面的代码重写为：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ----------------------
------ ----------- ---- ----------------
------ --------- ---- --------------
------ -------- ---- -------------
----- ----------- ------- --------------- -
------------------- -
-- ---
-
-------- -
----- - ---- - - -----------
------ --------------------
-
-
------ ------- --------
---------
----------
-----------
---------------上面的代码中，使用了 compose 函数。这个函数接受任意个 HOC 作为参数，返回一个新的函数，新的函数将组件作为参数包装起来，达到与上面相同的效果。
高级用法
extract-hoc-compose 还提供了一些高级特性来帮助处理更为复杂的场景。
withDefaults
有些 HOC 可能需要配置参数。这时可以使用 withDefaults 函数来设置默认值：
import { withDefaults } from 'extract-hoc-compose';
const withClassName = withDefaults(
({ className }) => ({ className: `my-class ${className || ''}` })
);
export default withClassName(MyComponent);上面的代码中，withClassName 接受一个对象参数，这个参数包含了默认的 className 属性值。在使用 withClassName 包裹组件时，如果没有传入 className 属性，那么这个属性将使用默认值。
withHandlers
有时候我们需要给组件传递一些处理函数作为 props。这时可以使用 withHandlers 函数来帮助创建这些处理函数：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------
----- ------------------ - --------------
------------ -- -------- ----- -- -- ------- -- -
------------------- -------- -----------
-- --------- -
---------------
-
-
---
----- -------- - -- ------------ -------- -- -- -
------- -----------------------------------------
--
------ ------- -----------------------------上面的代码中，withCustomHandlers 接受一个对象参数，这个参数包含一些处理函数。在使用 withCustomHandlers 包裹组件时，这些处理函数将被注入到组件的 props 中。
withProps
有时候我们想要对组件的 props 进行一些额外处理。这时可以使用 withProps 函数来完成这个工作：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------------- ----- --------------- - ------------ ---- -- -- -- --------- ---- - - ---- ----- ----------- - -- -------- -- -- - --------------------- -- ------ ------- -----------------------------
上面的代码中，withCustomProps 接受一个函数参数，这个函数会接收到组件的 props 作为参数，并返回一个包含了新的 props 值的对象。在使用 withCustomProps 包裹组件时，这些新的 props 将注入到组件的 props 中。
branch
有时候我们需要根据一些条件来控制 HOC 是否生效。这时可以使用 branch 函数来设置这个条件：
-- -------------------- ---- ------- ------ - ------ - ---- ---------------------- ------ --------- ---- -------------- ----- ------------------------ - ------- -- ------------ -- -- ------------- --------- -- ----- ----------- - -- ---- -- -- - ----------------- -- ------ ------- --------------------------------------
上面的代码中，withConditionalRendering 接受两个参数，第一个参数是一个函数，这个函数用来判断是否使用 HOC，第二个参数是一个 HOC。在使用 withConditionalRendering 包裹组件时，如果 shouldRender 的值为 true，那么将会使用 withError HOC 包裹组件。
结论
extract-hoc-compose 可以让 HOC 组合更加清晰易懂，从而提高代码的可维护性。它支持多种高级特性，可以适应各种复杂的场景。如果你的代码中有 HOC 的使用，那一定要试试使用 extract-hoc-compose 来优化你的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bde81e8991b448e58c0