useState为什么返回数组而不是对象？

大家好，我是前端理想哥，今天，我们来聊聊useState返回值的问题。经常写react项目的同学应该都对useState不陌生，每天都在使用，但是可能有的同学对返回值是数组而不是对象这个问题还是比较迷糊，今天，理想哥就用一节视频给大家把这个问题讲清楚。

要讲明白这个问题，我们得先弄明白 ES6的解构赋值是怎么回事，我们可以先来看看数组的解构赋值，就像图中所示：

// 解构前
const names = ['Jack', 'Jay', 'Andy']

// 解构后
const [one, two, three] = names;

console.log(one)	// "Jack"
console.log(two)	// "Jay"
console.log(three)	// "Andy"

大家可以看到，数组解构后，解构变量的取值决定于所处的位置，是有顺序的，比如，one是在数组第一项，所以对应的值就是 Jack，而two在数组第二项，对应的值则是 Jay，数组解构中的变量其实是可以任意命名的，不会影响他的取值。

接下来，我们再来看看对象的解构，还是看一张图：

// 解构前
const age = {
	'Jack': 19,
	'Jay': 20,
	'Andy': 21
}

// 解构后
const { Jack, Jay, Andy } = age;

console.log(Jack)
console.log(Jay)
console.log(Andy)

大家可以看到，相比数组的解构，对象的解构没有顺序，且解构的变量必须和解构前的属性同名，才能取到正确的值。

说到这里，就能很好的解释useState为什么返回数组而不是对象了

如果useState返回的是数组，你可以按照自己的想法对变量进行命名，代码看起来也会更加干净。而如果是对象，你的命名必须要和useState 内部实现返回的对象同名，比较麻烦，而且如果你要多次使用 useState ，就必须得重命名返回值，就像图中这样：

// 第一次使用
const { 
state, 
setState 

} = useState(false)

// 第二次使用
const { 
state: age, 
setState: setAge 

} = useState(10)

这样写，多麻烦呀，而且会让代码变得臃肿且难以理解。不过，返回数组其实也有一些不足，比如，返回值必须是按照顺序，顺序错了，值也就错了。还有就是返回的参数比较多，对于有些返回值不想使用的话代码看起来有些怪。

以上，就是所有内容了，我们讲了ES6中数组和对象的解构赋值，还讲了useState返回数组而不是对象的原因，如果您觉得对您有帮助，欢迎给理想哥一个关注，万分感谢大家