【React】使用 react hooks 需要遵守的原则

1）只能在顶层调用Hooks

这是指你不能在循环、条件语句或嵌套函数中调用Hooks。确保每次组件渲染时，Hooks的调用顺序保持一致。因此，你应该始终在React函数组件的最顶层调用Hooks。

• React依赖于Hooks的调用顺序。如果这些调用在不同的渲染中顺序不同，React就不知道应该使用哪一个状态或效果。如果你把Hooks调用放在条件语句中，就可能改变调用的顺序，这会导致奇怪的bug。

• 例如，你不能在组件中这样使用：

  function MyComponent() {
     if (someCondition) {
         useState();  // 错误！不能在条件语句中调用Hook
     }
  }
  

• 正确的使用应当是, 把所有Hooks放在最顶层：

  function MyComponent() {
     const [state, setState] = useState();
     if (someCondition) {
         // 其他逻辑
     }
  }
  

2）只能在React函数中调用Hooks

意味着你只能在React的函数组件内部或自定义Hooks（一个以“use”开头的函数）中使用Hooks，不能在普通的JavaScript函数内部使用。

• React需要辨别组件和普通函数，自定义Hooks允许开发者抽象整个逻辑，并让其在组件和其他Hooks之间复用。如果在普通的JavaScript函数或类方法中调用Hooks，会使得组件逻辑变得难以管理和错误调试。

3）规则性命名

所有的自定义Hooks必须以“use”开头，例如useFetch、useCounter等。这不仅是一个命名约定，而且它能让React自动识别这个函数是不是一个自定义Hook，这有助于代码可读性，并且有助于错误排查和调试。