前言
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 个场景会很麻烦。
后言
创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力