React Hooks useReduce 或 useState

IT技术 reactjs react-hooks use-reducer
2021-05-07 12:09:00

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

所以动作是:

  • 当我们更改表单中的值时,模板将在自定义模板中更改

正如您所看到的,有一些逻辑上下波动,我担心多个 setState 声明和调用。我应该使用useReducer还是useState

1个回答

来自useReducer 文档

useReduceruseState当您具有涉及多个子值的复杂状态逻辑或下一个状态取决于前一个状态时,通常更可取

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

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

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