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

后言

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

你可能感兴趣的:(React.js,react.js)