React多输入表单中useState与useRef的性能对比及渲染疑问

一、useState表单中输入框state变化时的重渲染逻辑 #

当你用useState实现受控表单时，只要组件的state发生变化，整个组件会触发重渲染——也就是LoginForm函数会重新执行一遍，生成新的虚拟DOM。

但React的diffing算法会对比新旧虚拟DOM：

• 比如在email输入框输入时，form.email更新，新虚拟DOM里email输入框的value和旧值不同，而password输入框的value和旧值一致。
• 这时React只会更新email输入框对应的真实DOM，password输入框的真实DOM不会有任何改动。

结论：组件会整体重渲染，但真实DOM仅更新变化的输入框，并非只有单个输入框单独重渲染组件。

二、useRef的性能表现与原因 #

用useRef实现的是不受控表单，输入操作不会调用setState，所以输入过程中组件不会触发任何重渲染——组件函数只在初始渲染时执行一次，之后的输入操作完全绕开React的组件更新机制，直接操作DOM。

这种方式在输入阶段确实没有组件重渲染的开销，对比受控表单每次输入都触发的组件重渲染（哪怕diff后只更新一个DOM），性能上会有轻微优势，但这种优势只有在极端场景（比如超大量表单输入、复杂嵌套组件）下才会明显。

同时要明确两者的适用场景：

• 受控表单（useState）适合需要实时同步状态、做实时表单验证、实时反馈的场景；
• 不受控表单（useRef）适合只需要在提交时获取输入值、不需要实时同步状态的场景，代码更简洁，也避免了频繁重渲染。

补充：React重渲染与diffing的核心逻辑 #

React的重渲染指组件函数重新执行，生成新的虚拟DOM树；diffing算法则是快速对比新旧虚拟DOM树，找出差异部分，只更新对应的真实DOM，这是React性能优化的核心机制之一。

受控表单每次输入触发的组件重渲染，其实开销很小——因为React的虚拟DOM对比非常高效，大部分日常场景下完全不需要担心性能问题。只有当组件本身非常复杂、或者包含大量子组件时，才需要考虑用memo、useCallback等方式优化重渲染。

内容的提问来源于stack exchange，提问作者Matei Dumitrescu