首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >为什么 useState 返回的是 array 而不是 object?

为什么 useState 返回的是 array 而不是 object?

原创
作者头像
小鑫
发布2022-04-26 14:31:20
2.1K0
发布2022-04-26 14:31:20
举报
文章被收录于专栏:小鑫の随笔小鑫の随笔

前言

这是我今天收到的一条推送文章,发现自己好像也没有去思考过这个问题,于是点进来了

明白了原因之后,想用自己的话梳理一遍,分享给其他还不了解的同学

正文

先来看看 useState 的日常用法

const [count, setCount] = useState(0)

这里可以看到 useState 返回的是一个数组,那么为什么是返回数组而不是返回对象呢?我们在自定义 hook 时应该返回什么类型呢?

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

要弄懂这个问题要先明白 ES6 的解构赋值,来看 2 个简单的例子:

数组的解构赋值
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: 888,
  name: "xiaoxin"
};

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

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

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

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

下面来看看如果 useState 返回对象的情况:

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

这里可以看到,返回对象的使用方式还是挺麻烦的,更何况实际项目中会使用的更频繁

总结

useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度,返回数组的话可以直接根据顺序解构,而返回对象的话要想使用多次就得定义别名了

首发自:为什么 useState 返回的是 array 而不是 object? - 小鑫の随笔

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 正文
    • 为什么是返回数组而不是返回对象
    • 总结
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档