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

简介: 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 个场景会很麻烦。


后言

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


目录
相关文章
|
4月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
93 0
|
6月前
|
前端开发
react hooks 使用小技巧—useState传值函数
当使用useState时,传入一个函数作为初始状态值的参数和传入一个值的参数的效果是一样的,都会在组件渲染时被调用,但它们的使用场景略有不同。
253 1
|
4月前
|
前端开发 JavaScript CDN
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
116 0
|
18天前
|
前端开发 数据处理 开发者
React的useState:开启组件状态管理的新篇章
React的useState:开启组件状态管理的新篇章
|
5月前
|
前端开发 JavaScript
react 数组下标来作为 react组件中的key
react 数组下标来作为 react组件中的key
57 0
|
2月前
|
前端开发 JavaScript 测试技术
React Hooks之useState、useRef
React Hooks之useState、useRef
|
2月前
|
存储 前端开发 JavaScript
React Hooks的useState、useRef使用
React Hooks的useState、useRef使用
22 2
|
3月前
|
前端开发 JavaScript
React 钩子:useState()
React 钩子:useState()
38 0
React 钩子:useState()
|
4月前
|
前端开发 CDN
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
57 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
85 0