React表单更新中对象内方括号的底层逻辑与用法疑问

先看你给出的代码片段：

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

1. 这个语法是不是数组解构？ #

不是。数组解构是用来从数组中提取元素的语法，比如const [first, second] = [1, 2]。而代码里的[name]是ES6对象字面量的计算属性名，属于对象语法范畴，和数组解构完全是两回事。

2. 为什么这个写法能生效？ #

ES6新增了计算属性名的特性：当你在对象字面量中用[表达式]作为属性名时，JavaScript会先计算方括号内表达式的值（这里name是从表单元素上拿到的属性值，比如"username"或"email"），把计算结果转为字符串后，作为对象的实际属性名，再将后面的value赋值给这个属性。

举个实际例子，如果当前name的值是"username"，value是"张三"，那这段代码等价于：

setFormFields({ ...formFields, username: "张三" });

3. 为什么不使用对象解构？ #

对象解构的作用是从已有对象中提取属性，比如代码里的const { name, value } = event.target就是用对象解构拿到表单元素的name和value。但我们这里的需求是动态更新状态对象的某个属性——表单可能有N个字段，每个字段的name都不一样，对象解构没法帮你动态指定要更新的属性名，总不能为每个字段都写一套重复的更新逻辑吧？

4. 采用这个写法的原因是什么？ #

核心就是复用性和动态性：

• 复用性：一个handleChange函数就能处理所有表单字段的onChange事件，不用给每个输入框单独写处理逻辑
• 动态性：不管后续新增多少表单字段，只要字段的name属性和状态对象的属性名对应，就能自动适配，不用修改处理函数
• 简洁性：避免冗余代码，让表单逻辑更紧凑、易维护

底层实现逻辑 #

从JS引擎的角度看，计算属性名的处理步骤是：

1. 计算方括号内的表达式（name变量的值）
2. 将计算结果转换为字符串（因为对象的属性键只能是字符串或Symbol）
3. 将这个字符串作为属性键，把value赋值给对象的对应属性

在React的状态更新中，我们用...formFields展开原有状态对象，保留所有未修改的属性，再用[name]: value覆盖指定属性，最后把这个新对象传给setFormFields，React会对对象类型的状态做浅合并更新，最终完成表单字段的状态同步。

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