useState使用数组解构的原因是什么

前言

刚刚使用useState的时候，可能会如下写：

const {haorooms,setHaorooms} =useState('blog')

发现报错了。

应该使用数组解构

const [haorooms,setHaorooms] =useState('blog')

那么为什么useState会用数组解构？而不是对象？有思考过吗？

原因解析

通过我上一篇文章，手写setState，可以了解到，数组解构更加方便。

数组的解构赋值

const foo = [1, 2, 3];

const [one, two, three] = foo;
console.log(one);    // 1
console.log(two);    // 2
console.log(three);    // 3

对象的解构赋值

const user = {
  id: 1024,
  name: "haorooms"
};

const { id, name } = user;
console.log(id);    // 1024
console.log(name);    // "haorooms"

搞清楚了这两个类型的解构赋值，这个问题就很好解释了

如果 useState 返回的是数组，那么使用者可以对数组中的元素命名，代码看起来也比较干净

如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值

小结

数组和对象解构的区别

1、数组的元素是依次排序的，数组解构时变量的取值由数组元素决定，变量名称可以任意命名

2、对象的属性没有次序，解构时，变量名称必须和属性相同，才能取到正确的值。

3、因此，数组会更加灵活，可以任意命名和修改state

综上原因，是useState使用数组解构的原因。