胶南市城乡建设局网站收录优美图片手机版

为什么必须在函数顶层使用hooks？

使用过 hooks 的小伙伴应该都会发现，hooks只能在函数式组件的顶层使用，不能在循环，条件或嵌套函数中调用 Hook。

为什么呢？

查阅了很多答案，总结如下：

hooks 是 react 16.8版本推出的，而react v16版本最大的改变就是引入了fiber架构。hooks的实现就是基于fiber的。每个组件都会生成一个 FiberNode（节点），组件内使用的 hook 会以链表的形式挂在 FiberNode 的 memoizedState 上面。各个 FiberNode 汇聚起来会变成一颗 Fiber 树，React 每次会以固定的顺序遍历这棵树，这样就把整个页面的 hook 都串联起来了。
当 react 重新渲染时，会生成一个新的 fiber 树，而这里会根据之前已经生成的 FiberNode ，拿到之前的 hook ，再复制一份到新的 FiberNode 上，生成一个新的 hooks 链表。
react按顺序来区分不同的 hook，它默认你不会修改这个顺序。如果你没有在顶层使用 hook ，打乱了每次 hook 调用的顺序，就会导致 react 无法区分出对应的 hook