使用自定义Hook时为何要使用方括号[]？

核心原因很简单：useBreedList这个自定义Hook返回的是一个数组，所以这里用数组解构语法提取数组中的第一个元素赋值给breeds变量。

自定义Hook本质就是遵循React Hook规则的普通函数（名字必须以use开头，只能在组件或其他Hook内调用），它的返回类型完全由开发者决定：

• 有的自定义Hook会模仿useState/useReducer的风格返回数组，这样使用者可以自己命名提取出来的变量（比如你可以写const [dogBreeds] = useBreedList('dog');，名字随便取）；
• 有的则返回对象，这时候就需要用对象解构const { breeds } = useBreedList(animal);。

举个useBreedList的简单实现例子，你就能明白：

function useBreedList(animal) {
  const [breeds, setBreeds] = useState([]);
  
  // 假设这里有根据animal请求品种列表的逻辑，更新breeds状态
  
  // 返回一个数组，第一个元素是当前的品种列表
  return [breeds];
}

如果这个Hook还返回了加载状态，可能会写成return [breeds, isLoading];，这时候你就可以用const [breeds, isLoading] = useBreedList(animal);同时提取两个值。

本质上和你理解的useState用方括号的逻辑完全一致——都是对数组类型返回值的解构提取，只是这个数组是自定义Hook返回的而已。

内容的提问来源于stack exchange，提问作者M Hassan khan