为什么 hooks 不能写在循环或者条件判断语句里?

React 官网介绍了 Hook 的这样一个限制:
不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇,我们在下面会有更深入的解释。)

这个限制在开发中也确实会时常影响到我们的开发体验,比如函数组件中出现 if 语句提前 return 了,后面又出现 Hook 调用的话,React 官方推的 eslint 规则也会给出警告。

​
function App(){
  if (xxx) {
    return null;
  }

  // ❌ React Hook "useState" is called conditionally. 
  // React Hooks must be called in the exact same order in every component render.
  useState();
  
  return 'Hello'
}

​

这是因为 hooks 为了在函数组件中引入状态,维护了一个有序表。

这样每次执行才能保证状态能对应上。

比如第一次执行函数组件时,我们拿到状态 count(通过 setState,初始值为 0 )和 isDone(通过 setState,初始值为 false),它们其实被保存到一个有序表中,它们的值会记录下来: [0, true] 。

第二次执行函数组件,setState 会 按顺序 从这个表中拿出 0 和 true,赋值给 count 和 isDone。

如果你把 hook 写到判断条件下,导致某个 setState 不执行了,这里我们假设 count 的 setState 因为判断条件没有执行,会发生什么?结果是 isDone 拿到了 0,发生了错位。

函数本身不能保存状态,我们需要额外维护一个有序的表,在执行 setState 之类的 hook 时,将它们保存到这个表里。

这要求每次函数组件的 hook 执行的位置相同,数量正确,否则会导致错位,不能拿到预期的状态值。

你可能感兴趣的:(前端,javascript,开发语言,reactjs)