JavaScript中React数组式useState声明的工作原理及名称是什么？

1. 这类声明的名称 #

你看到的写法是ES6 数组解构赋值语法，这是JS原生支持的变量赋值语法，和React本身没有绑定，这里是搭配React的useState Hook一起使用。

2. 从声明角度的工作逻辑 #

你熟悉的let array = []是把一整个数组赋值给单个变量，而数组解构赋值的作用是一次性把数组中对应位置的元素，分别赋值给左侧的多个变量：

• 举个基础的原生JS示例：

  // 解构写法
  let [a, b] = [10, 20];
  // 等价于普通写法
  let a = 10;
  let b = 20;
  

回到你给出的React代码：
let [count, setCount] = useState([]);
首先useState是React提供的状态Hook，它的返回值固定是一个包含2个元素的数组：

• 数组第0位：状态存储变量，也就是这里的count，你调用useState时传入的空数组[]就是count的初始值
• 数组第1位：状态更新函数，也就是这里的setCount，调用这个函数传入新值时，React会更新count的取值、触发组件重渲染，并且持久化保存状态不会在组件重渲染时被重置

如果你不用解构语法，完全可以写成熟悉的普通数组赋值形式，效果完全一致：

// 普通数组赋值写法，和解构写法效果完全相同
let stateResult = useState([]);
let count = stateResult[0];
let setCount = stateResult[1];

使用解构只是简化了代码，不需要手动取下标取值，可读性更高。

内容的提问来源于stack exchange，提问作者Oliver Kucharzewski