在前端开发中，我们经常需要在用户操作后更新 UI 状态。通常情况下，我们使用 React 或 Vue 这类的前端框架来组织代码和管理状态。当然，框架自带的状态管理工具也能够满足大多数场景的需求。但是，在一些复杂的场景中，我们需要通过一定的方式，使得动作的创造者能够访问到归来的状态，以便于进行进一步的操作或者处理。
什么是动作的创造者
在前端应用中，用户可以通过界面上的交互元素触发各种操作，比如点击按钮、输入文本等。这些操作会引起应用状态的改变，从而导致 UI 的更新。我们把这些操作的产生者称为“动作的创造者”。
什么是归来的状态
在用户触发某个操作后，应用状态会被修改，从而导致 UI 的变化。但是这种变化并不是一成不变的，有时候用户需要撤销当前的操作，从而回到之前的状态。我们把这种状态称为“归来的状态”。
如何访问归来的状态
在 React 中，我们可以使用 useRef 和 useState 配合使用，来实现在一个动作的创造者访问归来的状态。具体实现方式如下：
------ ------ - ------- -------- - ---- --------
-------- ----- -
----- ------ -------- - -------------
----- ----------- - -----------
-------- ------------------- -
----- - ----- - - -------------
------------------- - -----
---------------
-
-------- ------------ -
-----------------------------
-
------ -
-----
------ ----------- ------------ ----------------------- --
------- --------------------------------
------
--
-在上述代码中，我们使用了 useState 来管理文本框的值和 UI 状态的更新。同时，我们利用 useRef 创建一个引用类型的变量 prevTextRef，来记录前一个状态的文本框值。在文本框值改变时，我们把当前的值存储到 prevTextRef.current 中。当用户点击“撤销”按钮时，我们就可以通过 prevTextRef.current 获取到之前的状态，并将其设置为当前值，从而回到之前的状态。
结语
以上就是在一个动作的创造者访问归来的状态的方法。虽然这个例子比较简单，但是这种技巧在一些复杂的场景中也非常有用。在实际开发中，我们可以根据实际需要做出相应的调整，以满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9928