React Hook 03 Hook规则

82 阅读1分钟

Q : 我们可以在组件里面使用多个 State Hook 或者 Effect Hook ,那么 React 是怎知道 setState 方法对应哪个 state ?

答案是 React 靠的是 Hook 调用的顺序 。要 Hook 的调用顺序在多次渲染之间保持一致,React 就能正确地将内部 state 和对应的 Hook 进行关联。

所以 :

  • 只能在组件最顶层调用 Hook 。不要在循环,条件或嵌套函数中调用 Hook
  • 只在 React 函数组件 或者 自定义 Hook中调用 Hook 。不在普通的 JS 函数中调用。

0455.png

是错误的 ,Hook 执行顺序会改变 ,所以要改成下面的写法 :

0456.png