前言
@wordpress/compose 是 WordPress 的一个 npm 包，它被设计为使用 ES6 class 和高阶函数方式编写 React 组件的工具集。该 npm 包提供了一些有用的函数来帮助开发者在编写 React 组件时轻松实现高阶组件和实现在 React 组件间共享状态和逻辑等功能。
本文将详细介绍 @wordpress/compose 的使用方法，以帮助前端开发者更好地使用这个强大的工具集。
安装和使用
使用 @wordpress/compose 的前提是你已经安装并且使用 React 来构建你的应用程序。接下来，你可以在你的项目中使用 npm 或者 yarn 安装 @wordpress/compose：
npm install @wordpress/compose --save
或者
yarn add @wordpress/compose
安装成功后，可以在你的项目中引入 @wordpress/compose：
// ES6
import { compose } from '@wordpress/compose';
// CommonJS
const { compose } = require('@wordpress/compose');使用 compose 函数实现高阶组件
在 React 中，高阶组件（Higher Order Component，缩写为 HOC）被广泛应用。HOC 是一个以组件为参数并返回一个新组件的函数。
使用 @wordpress/compose 中的 compose 函数可以轻松地实现 HOC。compose 函数接受多个函数作为参数，并返回一个组合了这些函数的新函数，这个新函数接受一个 React 组件作为参数，最终返回一个新的 React 组件。
比如，我们可以使用 compose 函数来实现一个名为 withAuth 高阶组件，为组件提供验证功能。
-- -------------------- ---- -------
------ - ------- - ---- ---------------------
-------- -------------------------- -
------ --------------- -
----- --------------- - ----- -- ----------
-- ----------------- -
------ ----------------- ---------- ---
-
------ ----------------
--
-
----- ----------- ------- --------------- -
-------- -
------ ------------------------
-
-
------ ------- -------------------------------在上述示例中，我们定义了一个名为 withAuth 的 HOC，这个 HOC 接受一个 React 组件作为参数，并返回一个新的组件。具体实现中，我们接入了身份验证逻辑，并根据验证的结果来决定是否渲染 WrappedComponent 或者返回一个提示信息。最后我们使用 compose 函数将 withAuth 作为参数传入，并将其应用到 MyComponent 组件上。
使用其他函数实现组件状态与逻辑的复用
在 React 中，组合是比继承更加优秀的实践，因此在编写组件时，我们更应该考虑如何复用组件状态和逻辑。
在 @wordpress/compose 中，有一些函数帮助我们实现这样的代码复用。这些工具可以让我们重构代码，将公共代码提取到可重用的子函数或广义函数中。
接下来，我们将介绍其中几个函数：
bindActionCreators
bindActionCreators 函数的作用是将 action creators 转化为拥有相同 key 的对象，但是使用 dispatch 将每个 action creator 包裹起来，这样可以直接调用它们。
-- -------------------- ---- -------
------ - ------------------ - ---- ---------------------
-------- ----------- -
------ -
----- -----------
--
-
-------- ----------- -
------ -
----- -----------
--
-
----- ------- ------- --------------- -
--------------- - -- -- -
-----------------------
-
--------------- - -- -- -
-----------------------
-
-------- -
------ -
-----
------- -----------------------------------------
-------------------------------
------- -----------------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
-------- ---------------------------- -
------ --------------------
----------
---------
-- ----------
-
------ ------- ------------------------ -----------------------------在上述示例中，我们定义了两个 action creators increment 和 decrement，这两个 action creators 用来分别对应增加和减少计数器的操作。我们使用 bindActionCreators 将这两个 action creators 转换成拥有相同 key 的对象，以便我们可以直接通过 this.props.increment() 和 this.props.decrement() 调用它们。
withState
withState 函数接受一个名称和默认值作为参数，然后返回一个函数，这个函数接受一个 React 组件作为参数，并返回一个新的组件，这个新组件将注入传递给 withState 的名称和默认值作为 props。
-- -------------------- ---- -------
------ - --------- - ---- ---------------------
----- ----------- ------- --------------- -
----------- - -- -- -
---------------------------------------- - ----- - ------
-
-------- -
------ -
------- ---------------------------
--------------------- - --- - ----
---------
--
-
-
------ ------- ---------------------- --------------------在上述示例中，我们使用 withState 函数将 isToggled 和初始值 false 作为参数注入到 MyComponent 组件中，这意味着 MyComponent 组件将接受一个名称为 isToggled 的 props。MyComponent 组件的 handleClick 函数在被调用时会通知 withState 执行 setState 方法，以此来实现组件状态的更改。
总结
本文介绍了 @wordpress/compose 的基本使用方法和几个常用的函数，这些函数帮助我们在编写 React 组件时实现高阶组件、实现组件状态与逻辑的复用等。这些工具可以帮助我们更好地优化我们的代码，提高代码复用率，从而提高前端开发的效率。在实际开发中，我们建议结合实际情况灵活运用这些函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb46cb5cbfe1ea0611285