React Hooks useReducer 或 useState

【问题标题】：React Hooks useReduce or useStateReact Hooks useReducer 或 useState
【发布时间】：2020-11-21 11:03:27
【问题描述】：

我有一个包含 30 个字段的表单，所有这些字段都是来自下拉列表中的值的模板，如果我更改模板的值，我最终将创建一个自定义模板。

所以动作是：

如您所见，有一些上下逻辑，我担心多重 setState 声明和调用。我应该使用useReducer 还是useState？

【问题讨论】：

【解决方案1】：

来自useReducer documentation：

当您有涉及多个子值的复杂状态逻辑或下一个状态取决于前一个状态时，useReducer 通常比useState 更可取。

您应该使用 useReducer 来管理您的复杂表单，否则当其中一个 useState 更改时，您最终将拥有许多 useState 和许多 useEffects 来更新所有其他状态。在这种情况下，useReducer 绝对是最好的选择。

通过这种方式，您的所有 UI 元素都将是 useReducer 状态的可视化表示，因此字段中的任何值更改都必须触发更新状态和 UI 的操作。

您也可以尝试使用现有的库，例如 react-hook-form，但这个选择取决于您，取决于您的要求。

【讨论】：