React Hooks 应该返回数组还是对象?

2,147 阅读1分钟

你之前有没有对 React Hook 的返回值感到困惑?大多数时候,你会看到钩子返回一个数组,不是吗?我们可以在 React Hook 中返回一个对象吗?我们在哪些情况下使用它?

image.png

数组与对象

image.png

当我们使用typeof来检查数组时,我们会收到object输出。数组在 JavaScript 中是对象。

两个ArrayObject是对它们保存值的内存的引用。

所以两种编写 React Hooks 的方法都是有效的,它只是返回引用。不同之处在于我们如何获取数组的值或返回的对象

从数组中获取值

  • 必须按顺序获取值
  • 使用您想要的任何名称轻松命名变量

image.png

从对象中获取值

  • 必须使用对象的正确字段获取值
  • 更难命名其他变量

image.png

从对象获取值的示例

用法

在以下情况下使用数组返回:

  • 在组件中使用钩子的多个实例。所以我们可以灵活地使用任何变量名。

image.png

  • 您知道返回值的正确顺序,例如: [value, setValue]

在以下情况下使用对象返回:

  • 在组件中使用一个钩子实例。所以我们不需要因为名称冲突而重命名变量。

image.png

  • 您不知道返回值的正确顺序,例如[isLoading, hideLoading, showLoading][isLoading, showLoading, hideLoading]

我建议你 使用钩子来返回一个数组。如果你看到它不好,那么把它写在 object return 中。