本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

useState 的用法:

const [count, setCount] = useState(0)

可以看到 useState 返回的是一个数组,那么为什么是返回数组而不是返回对象呢?

要回答这个问题得弄明白 ES6 的 解构赋值 (destructring assignment)语法

下面有2 个简单的示例:

  • 数组的解构赋值:
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 个场景会很麻烦。

如果在自定义的Hook中遇到了以上几个问题,不妨试试返回 object。

简单总结一下,在自定义 hook 的时候可以遵循一个简单原则:

当参数大于 2 个的时候返回值的类型返回 object , 否则返回数组。