React注册表单setFormFields中扩展运算符的作用问询

先看你写的这部分核心代码：

const handleChange = (event) => {
  const { name,value } = event;
  setFormFields({...formFields,[name]:value})
};

这行代码的核心逻辑是创建一个新的表单状态对象，只更新当前输入的字段，同时保留其他字段的原有值，完全符合React状态不可变的要求，咱们拆开来解释：

1. 扩展运算符 ...formFields 的作用
   它会把当前formFields对象里的所有键值对，完整复制到新创建的空对象中。比如当前formFields是{displayName: "", email: "", password: "", confirmPassword: ""}，复制后新对象就会拥有这四个属性和对应的值，相当于把旧状态的“基础数据”先搬过来。

2. 动态属性 [name]: value 的作用
   这是ES6的动态属性名语法，这里的name对应你输入框上设置的name属性（比如<input name="email" />），它会把这个name作为新对象的属性名，输入框的value作为属性值。

3. 为什么这么写？顺序的关键
   因为对象中后面的属性会覆盖前面同名的属性，所以当你把[name]:value放在扩展运算符后面时，就会用当前输入的新值，替换掉刚才复制过来的旧值，其他没被修改的字段则保持原来的状态不变。

举个例子：当用户在email输入框输入test@example.com时，name就是email，value是test@example.com，新对象会先复制旧的formFields所有属性，然后把email的值替换成新输入的内容，最终新的formFields就是：

{
  displayName: "",
  email: "test@example.com",
  password: "",
  confirmPassword: ""
}

这么做的根本原因是React的状态不能直接修改：如果你直接修改原formFields对象（比如formFields.email = value），React检测不到状态的引用变化，就不会触发组件重新渲染。而通过扩展运算符创建新对象，状态的引用变了，React就能感知到变化并更新UI。

内容的提问来源于stack exchange，提问作者Muhammad Usman