react中的useState为什么是一个数组，而不是一个对象？

前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：react.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

在React中，useState返回的是一个包含两个元素的数组，而不是一个对象。这是因为React团队认为使用数组可以更好地解决一些问题。

首先我们要先了解数组和对象的解构赋值

数组的解构赋值

const foo = ['one', 'two', 'three'];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

对象的解构赋值

const user = {
    id: 42,
    is_verified: true
};

const { id, is_verified } = user;

console.log(id); // 42
console.log(is_verified); // true 

总结

如果 useState 返回数组，那么你可以顺便对数组中的变量命名，代码看起来也比较干净。而如果是对象的话返回的值必须和 useState 内部实现返回的对象同名，这样你只能在 function component 中使用一次，想要多次使用 useState 必须得重命名返回值。

// 第一次使用
const { state, setState } = useState(false)
// 第二次使用
const { state: counter, setState: setCounter} = useState(0)

当然事情总是有两面性的，使用 array 也存在一些问题：

• 返回值强顺序，灵活性比较低。array[0] 为值，array[1] 为改变值的方法。
• 返回的值基本都得使用，对于有些返回值不想使用的话代码看起来有些怪，比如只想用 setState, 就得这么写：const [, setState] = useState(false)。
• 返回的参数不能太多，否则处理上面 2 个场景会很麻烦。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力