React中为何使用扩展运算符...form而非直接赋值form？

问题背景 #

以下是一段可正常运行的React注册表单组件代码：

import React, { useState } from 'react'; 

export default function RegisterForm() { 
  const [form, setForm] = useState({ 
    firstName: 'Luke', 
    lastName: 'Jones', 
    email: 'lukeJones@sculpture.com', 
  }); 

  return ( 
    <> 
      <label> 
        First name: 
        <input 
          value={form.firstName} 
          onChange={e => { 
            setForm({ 
              ...form, 
              firstName: e.target.value 
            }); 
          }} 
        /> 
      </label> 
      <label> 
        Last name: 
        <input 
          value={form.lastName} 
          onChange={e => { 
            setForm({ 
              ...form, 
              lastName: e.target.value 
            }); 
          }} 
        /> 
      </label> 
      <label> 
        Email: 
        <input 
          value={form.email} 
          onChange={e => { 
            setForm({ 
              ...form, 
              email: e.target.value 
            }); 
          }} 
        /> 
      </label> 
      <p> 
        {form.firstName}{' '} 
        {form.lastName}{' '} 
        ({form.email})
      </p> 
    </> 
  ); 
} 

疑问：调用setForm时使用扩展运算符...form而非直接传入form的原因是什么？背后的执行机制是怎样的？

原因解析 #

• 遵守React状态不可变原则：React的状态是不可直接修改的，如果你直接修改原form对象（比如form.firstName = e.target.value）再传入setForm，React无法检测到状态变化——因为对象引用没改，React会判定状态未更新，不会触发组件重渲染，页面也就不会同步显示新值。
• 保留未修改的状态字段：扩展运算符会把原form里的所有键值对复制到新对象中，之后我们只覆盖需要更新的字段（比如firstName）。如果直接传{firstName: e.target.value}，新对象就只有这一个字段，lastName和email会丢失，页面展示会直接出错。

执行机制 #

1. 引用对比触发更新：React更新组件的核心逻辑是对比状态的引用变化。当你调用setForm时，React会把传入的新对象和当前form状态的引用做对比：如果是同一个引用（比如直接传原form），React会跳过重渲染；如果是新引用（用...form创建的新对象），则触发重渲染。
2. 浅拷贝生成新状态：...form是ES6的对象扩展语法，作用是浅拷贝原form的所有可枚举属性到新对象中。之后我们通过firstName: e.target.value覆盖新对象中对应的属性，最终得到一个包含所有原有字段+更新后字段的新状态对象。
3. 状态更新与组件重渲染：React接收到新的状态对象后，会更新组件的form状态，然后重新执行组件函数，渲染最新的UI内容（比如输入框的新值、下方的用户信息展示）。

内容的提问来源于stack exchange，提问作者Minato Uzumaki