React Hook状态初始化中{}的含义及作用解析

你看到的const [{ formBasicUsageExample }, setState] = useState(...)是数组解构+对象解构的组合写法，核心是把两步操作合并成了一步，拆解开来就很好理解：

第一步：useState的返回值 #

useState(initialState)会返回一个数组，第一个元素是当前的状态值，第二个是更新状态的函数。这里初始化的状态是一个对象：

{ formBasicUsageExample: colors[0] }

所以useState返回的数组就是[状态对象, setState函数]。

第二步：嵌套解构 #

你看到的外层[]是对useState返回的数组做解构，拿到第一个元素（也就是那个状态对象）；紧接着的内层{}是对这个状态对象做对象解构赋值，直接把对象里的formBasicUsageExample属性提取成单独的变量。

这种写法完全等价于分开写的两行代码：

// 先解构useState的返回数组，拿到状态对象
const [stateObj, setState] = useState({ formBasicUsageExample: colors[0] })
// 再从状态对象中解构出需要的属性
const { formBasicUsageExample } = stateObj

基础示例帮你理解 #

先看纯对象解构的基础用法：

const product = { id: 1, name: 'T-Shirt', price: 59 }
// 从product对象中提取name属性，变成单独变量
const { name } = product
console.log(name) // 输出 "T-Shirt"

再看结合useState的简化写法：

// 初始化状态为包含多个属性的对象
const [productState, setProductState] = useState({ id: 1, name: 'T-Shirt', price: 59 })
// 如果只需要用到name属性，可以直接合并解构
const [{ name }, setProductState] = useState({ id: 1, name: 'T-Shirt', price: 59 })

这种写法的适用场景 #

当组件的状态是一个对象，且你只需要用到其中某一个属性时，这种写法可以减少一行代码。但如果后续需要用到对象里的其他属性，建议还是保留完整的状态对象（比如上面的productState），再按需解构或访问属性，会更灵活。

内容的提问来源于stack exchange，提问作者Ae Leung