React中为何用useState存储表单数据？适用场景解析

用useState存表单数据的核心原因 #

本质是把表单的状态控制权从DOM转移到React组件，带来几个关键能力：

• 实时交互与校验：比如输入邮箱时实时检查格式是否正确、输入手机号时自动补空格，这类操作需要React拿到当前输入值，处理后再更新输入框内容——只有把值存在state里，修改state才能触发重渲染，让输入框显示处理后的结果。
• 表单联动逻辑：比如选择「自定义地址」选项时显示额外的输入框，或者输入密码时根据长度实时更新强度提示。这些逻辑依赖当前表单值来控制组件的显隐/状态，必须通过state触发重渲染来实现。
• 数据同步与共享：如果表单数据需要同步给父组件、全局状态（比如Redux），或者在多个子组件间共享，用state存住值后，能方便地通过props或状态工具传递，而不用直接操作DOM取数。
• 便捷的初始化与重置：比如从接口拉取用户信息填充表单默认值，或者点击「重置」按钮清空所有输入——直接修改state就能批量更新所有表单字段，不用逐个操作DOM元素。

适合直接取表单值的场景 #

如果不需要React实时介入表单状态，用非受控方式（直接取DOM值）更简单：

• 仅需提交时取值的简单表单：比如登录、注册这类只有几个字段，不需要实时校验的表单，点击提交按钮时，通过event.target.elements.username.value或者useRef获取输入值即可，没必要每次输入都更新state。
• 原生受限的表单元素：比如文件上传输入框（<input type="file">），它的value是只读的，React没法通过state控制，只能用非受控方式通过ref获取文件对象。
• 大型表单的性能优化：如果表单有几十个输入框，每次输入都触发重渲染可能造成性能损耗，这时候可以用非受控方式，只在提交或需要的时候一次性取值，减少不必要的重渲染。

一句话总结 #

需要React实时参与表单状态管理（校验、联动、同步）时，用useState做受控组件；只需要一次性获取表单结果时，直接取DOM值即可。

内容的提问来源于stack exchange，提问作者Sumrender Singh