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

10276次浏览

前言

刚刚使用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使用数组解构的原因。

相关文章: