前言：Crispum 是一个适用于 React 的 hook，用于实现组件操作时的撤销/重做操作，是一款非常实用的 npm 包。
安装 crispum
你可以使用 npm 或 yarn 来安装 crispum，打开终端并输入以下命令：
- npm：
npm install crispum
- yarn：
yarn add crispum
安装完毕后，你可以使用下面的方法在你的 React 类组件或函数组件中使用 crispum。
使用 crispum
创建一个可撤销的操作
下面是一个例子，我们创建了一个计数器，该计数器可以通过 crispum 进行撤销和重做操作。
-- -------------------- ---- -------
------ - ------- -------- - ---- --------
------ - ---------- - ---- ----------
-------- --------- -
-- -- ----- - ---
----- ------- --------- - ------------
----- ------------ - --------- -- --------
-- ---- ------- ---
----- - ----- ----- -------- ------- - - -------------
-- ------
----- ----------- - ------- -- -
---------------- -- ----
-------------------- - - -- ------
----- --------
------
--
--
-- ------
----- ---------- - -- -- -
-- ---------- ------- -- ---------
----- --------- - ------- -- --------
-- ----------- -
----- - ----- ----- - - ----------
-- ----- --- -------- ----------------
-
--
----- ---------- - -- -- -
-- ---------- ------- -- ---------
----- --------- - ------- -- --------
-- ----------- -
----- - ----- ----- - - ----------
-- ----- --- -------- ----------------
-
--
------ -
--
------------------
------- ----------- -- ----------------- - ---------------
------- ----------- -- ----------------- - ---------------
------- -------------------- -------------------------------
------- -------------------- -------------------------------
---
--
-这里，我们使用了 useCrispum 获取了与撤销/重做相关的函数和属性：undo、redo、canUndo 和 canRedo。
undo：撤销操作，返回上一步修改信息。redo：重做操作，返回下一步修改信息。canUndo：是否可以进行撤销操作。canRedo：是否可以进行重做操作。
注意，我们在修改值时都会记录操作信息，并将其存储在了操作 ref 中。这样，在进行撤销/重做时，我们就可以获取到上/下一步的操作信息并进行处理。
与自定义 Hook 结合使用
当我们需要在多个组件中使用撤销/重做操作时，我们可以将操作过程封装成一个自定义 Hook，这样可以提高代码复用性。
-- -------------------- ---- -------
------ - ------ - ---- --------
------ - ---------- - ---- ----------
------ -------- ----------------------- - -- -
----- ------- --------- - -----------------------
----- ------------ - --------- -- --------
----- - ----- ----- -------- ------- - - -------------
----- ----------- - ------- -- -
----------------
-------------------- - - ----- -------- ----- --
--
----- ---------- - -- -- -
-- ---------- ------- -- ---------
----- --------- - ------- -- --------
-- ----------- -
----- - ----- ----- - - ----------
-- ----- --- -------- ----------------
-
--
----- ---------- - -- -- -
-- ---------- ------- -- ---------
----- --------- - ------- -- --------
-- ----------- -
----- - ----- ----- - - ----------
-- ----- --- -------- ----------------
-
--
------ -
------
------------
-----------
-----------
--------
--------
--
-然后，我们可以在其他组件中直接使用该自定义 Hook。
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
-------- --------- -
----- -
------
------------
-----------
-----------
--------
--------
- - -------------
------ -
--
------------------
------- ----------- -- ----------------- - ---------------
------- ----------- -- ----------------- - ---------------
------- -------------------- -------------------------------
------- -------------------- -------------------------------
---
--
-这里，我们可以看到，使用自定义 Hook 可以提高代码的复用性，并使代码更清晰。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb581e8991b448da2b3