面试官：hook 为什么不能放条件语句，这就是你的回答？不合格。我：😭

前言

面试官：看你简历写的熟悉React,那你跟我说说为什么 hooks 不能放在条件语句和循环语句里面？

🤖 有图有真相（代码 + 图）

function App() {
  
  useEffect(() => {
    console.log("你好，我是 useEffect")
  })
  const ref = useRef("许泽川")
  
  useLayoutEffect(() => {
    console.log("你好，我是 useLayoutEffect")
  })
  
  
  const [state, setState] = useState(true);
  
  function handleClick() {
    setState(false)
  }
  
  return <div onClick={handleClick}></div>       
}    
    

🤖 面试的时候应该怎么回答？

1. 每一个组件对应一个 fiber，他的 fiber.memoizedState 存储了一条 hook 链表。

2. 当组件（<App />）对应的 fiber 第一次创建出来后，react 会调用对应的组件函数(App())拿到 jsx 来创建子 fiber。当组件函数执行的时候，运行到 useEffect() 或者 useState() 这些 hook，会在组件（<App />）的 fiber.memoizedState 按照 hooks 的执行先后顺序，创建一个个的 hook 对象串成一条链表，每一个 hook 对象里面存储了一些初始化信息（比如 useState 的 hook 对象存了他的值，useEffect 的 hook 对象存了要执行的副作用，useRef 的 hook 对象存了 ref）。

3. 之后通过 setState 触发重渲染，函数组件重新执行，运行到 useEffect() 或者 useState() 这些 hook，又会从这条链表按顺序从头到尾取对应的 hook 对象出来使用（useEffect 取完对应的 hook，链表前进一步，useState 取对应的 hook。。。。。。）

4. 如果我们使用了 if 或者 while 语句，你猜一下会发生什么？可能会导致拿到错误的 hook 对象，比如 useEffect 拿到了 useState 的 hook 对象，那肯定不行了。因为不同的 hook 对象是为对应的 hook 准备的，他里面存储的数据都不同，怎么能随便拿来用呢？

版权归许泽川所有

如需转载，请提前询问本人的许可