React表单输入场景：useState与useRef该如何选择？

核心结论 #

优先使用useState实现受控组件，这是React官方推荐的表单处理标准实践。你提到的useRef方案属于过度优化，不仅增加了逻辑复杂度，还违背了React状态驱动UI的核心设计理念，完全没必要在这个场景下使用。

关于useState方案的重渲染担忧 #

React的重渲染远比你想象的高效：

• 单个输入框的状态更新触发的重渲染，性能开销微乎其微，用户根本感知不到差异。
• React会通过虚拟DOM的diff算法，只更新实际变化的DOM节点，不会全量刷新页面。
• 只有当组件层级极深、状态更新频繁且涉及大量DOM操作时，才需要考虑性能优化，你的联系人应用显然不属于这类场景。

useRef方案的弊端 #

用useRef配合useEffect实现的非受控组件，存在多个明显问题：

1. 逻辑冗余复杂：需要同时维护useState、useRef和useEffect三个Hook，代码可读性和可维护性大幅下降，新手更容易踩坑。
2. 脱离React管控：非受控组件让输入框的DOM状态脱离了React的状态管理体系，后续如果要添加输入验证、实时提示等功能，扩展难度会非常大。
3. 潜在异常风险：依赖people状态变化来清空输入框的逻辑，一旦people有其他更新路径，可能会导致输入框被意外清空。

更优的useState优化方案 #

你可以对原useState方案做一点小优化，使用函数式更新避免闭包陷阱，同时保持逻辑简洁：

const [inputState, setInputState] = useState('');
const [people, setPeople] = useState([]);

const onChange = (event) => {
  setInputState(event.target.value)
}

const onSubmit = (e) => {
  e.preventDefault()
  // 函数式更新确保拿到最新的people状态，避免闭包问题
  setPeople(prevPeople => [...prevPeople, inputState])
  setInputState('')
}

// ...
<form onSubmit={onSubmit}>
  <input onChange={onChange} value={inputState} />
</form>
//...

这个方案既保留了受控组件的直观性，又解决了潜在的状态更新异常，是更稳健的实践。

关于“无验证表单可使用useRef”的观点 #

这种说法并不严谨：

• 即使当前没有验证需求，后续也可能需要添加输入长度限制、格式提示等功能，受控组件的扩展性远优于非受控组件。
• 非受控组件仅适合极少数一次性的简单输入场景（比如弹窗里的单个提交输入），对于需要维护输入状态或有扩展可能的场景，受控组件始终是更好的选择。

总结 #

• 你的联系人应用，useState受控组件方案是正确实践，逻辑清晰、易于维护，性能完全够用。
• useRef方案带来的性能提升可以忽略不计，反而增加了代码复杂度，属于过度优化。
• 如果要优化，优先选择函数式更新的useState方案，而非切换到useRef。

内容的提问来源于stack exchange，提问作者Matvey Sokolovsky