DEV Community ·

如何在React中构建持久的撤销/重做栈而不使用Redux

💡 原文英文，约500词，阅读约需2分钟。

📝

内容提要

撤销/重做功能对富应用程序（如表单构建器和设计工具）至关重要。本文介绍如何在React中利用hooks和context构建持久的撤销/重做栈，包括创建撤销上下文、构建可编辑组件、添加撤销/重做按钮，并将应用程序包装在撤销提供者中。这种方法轻量且易于扩展，适合小型和中型状态。

🎯

🔎

撤销/重做功能在富应用程序中至关重要，尤其是在表单构建器和设计工具中。它不仅能帮助用户轻松恢复错误，还能提升复杂编辑流程的用户体验。通过实现这一功能，开发者可以为用户提供更流畅的操作体验，减少因错误操作带来的挫败感。

使用hooks和context构建撤销/重做栈的优点在于其轻量性和无第三方依赖，适合小型和中型状态。然而，内存使用可能会增加，且不适合处理大型状态或批量相似操作。因此，开发者在选择此方法时需考虑应用的复杂性和状态管理需求。

虽然本文提供了一种基于context的撤销/重做实现，但开发者也可以考虑使用Zustand或use-undo等npm包。这些替代方案可能在处理更复杂的状态或提供批处理功能时更具优势，因此在选择实现方式时应根据具体需求进行比较。

❓

可以通过创建撤销上下文、构建可编辑组件、添加撤销/重做按钮，并将应用程序包装在撤销提供者中来实现。

优点包括轻量、无第三方依赖、完全持久的历史栈和易于扩展；缺点包括内存使用增加、适合小/中型状态以及没有批处理功能。

适合富应用程序，如表单构建器、设计工具和配置编辑器，能够轻松恢复用户错误并改善复杂编辑流程的用户体验。

通过使用React的createContext和useState，创建一个包含历史记录和当前索引的上下文，并提供记录、撤销和重做功能。

可以使用useUndo钩子来获取记录函数，并在输入值变化时调用该函数以记录历史。

可以使用Zustand与中间件或use-undo npm包作为替代方案。

🏷️