UseState
或 UseReducer
管理 FormData
我有一个问题,对于在React中渲染表单数据(例如登录、注册、联系表单数据),更好
UseReducer
还是UseState
?
两者都有优点和缺点,这是来自 docs 的一些信息:
- 代码大小:通常,使用 useState 你必须预先编写更少的代码。使用useReducer,你必须编写两个reducer函数 和调度动作。然而,useReducer 可以帮助减少 如果许多事件处理程序以类似的方式修改状态,请编写代码。
- 可读性:当状态更新很简单时,useState 非常容易阅读。当它们变得更加复杂时,它们会让你的 组件的代码,使其难以扫描。在这种情况下, useReducer 可让您将更新逻辑的方式与 事件处理程序发生了什么。
- 调试:当 useState 出现错误时,很难判断状态设置不正确的位置以及原因。通过 useReducer, 您可以将控制台日志添加到您的减速器中以查看每个状态更新, 以及为什么会发生(由于什么操作)。如果每一个动作都是正确的 你会知道错误出在减速器逻辑本身。然而, 与 useState 相比,您必须单步执行更多代码。
- 测试:reducer 是一个纯函数,不依赖于您的组件。这意味着您可以单独导出并测试它 隔离。虽然通常最好在更广泛的环境中测试组件 现实环境,对于复杂的状态更新逻辑它可能很有用 断言您的减速器返回特定状态 特定的初始状态和动作。
- 个人喜好:有些人喜欢减速器,有些人不喜欢。没关系。这是一个偏好问题。您始终可以在之间进行转换 useState 和 useReducer 来回:它们是等价的!
如果您经常遇到由于以下原因而导致的错误,我们建议您使用减速器: 某些组件的状态更新不正确,并且想要引入更多 其代码的结构。你不必对所有事情都使用减速器: 随意混合搭配!你甚至可以在中使用State和useReducer 相同的组件。