前言
这是我今天收到的一条推送文章,发现自己好像也没有去思考过这个问题,于是点进来了
明白了原因之后,想用自己的话梳理一遍,分享给其他还不了解的同学
正文
先来看看 useState 的日常用法
1 | const [count, setCount] = useState(0) |
这里可以看到 useState 返回的是一个数组,那么为什么是返回数组而不是返回对象呢?我们在自定义 hook 时应该返回什么类型呢?
为什么是返回数组而不是返回对象
要弄懂这个问题要先明白 ES6 的解构赋值,来看 2 个简单的例子:
数组的解构赋值
1 | const foo = [1, 2, 3]; |
对象的解构赋值
1 | const user = { |
搞清楚了这两个类型的解构赋值,这个问题就很好解释了
如果 useState 返回的是数组,那么使用者可以对数组中的元素命名,代码看起来也比较干净
如果 useState 返回的是对象,在解构对象的时候必须要和 useState 内部实现返回的对象同名,想要使用多次的话,必须得设置别名才能使用返回值
下面来看看如果 useState 返回对象的情况:
1 | // 第一次使用 |
这里可以看到,返回对象的使用方式还是挺麻烦的,更何况实际项目中会使用的更频繁
总结
useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度,返回数组的话可以直接根据顺序解构,而返回对象的话要想使用多次就得定义别名了