react如何实现hooks？必须依赖 Fiber 么？ _生活百科

react如何实现hooks？React Hooks 的实现必须依赖 Fiber 么？下面本篇文章带大家来看看不同框架中的 hooks 都是怎么实现的，希望对大家有所帮助！

文章插图

React 的 hooks 是在 fiber 之后出现的特性，所以很多人误以为 hooks 是必须依赖 fiber 才能实现的，其实并不是，它们俩没啥必然联系。【相关推荐：Redis视频教程】
现在，不止 react 中实现了 hooks ，在 preact、react ssr、midway 等框架中也实现了这个特性，它们的实现就是不依赖 fiber 的。
我们分别来看一下这些不同框架中的 hooks 都是怎么实现的：
react 如何实现 hooksreact 是通过 jsx 描述界面的，它会被 babel 或 tsc 等编译工具编译成 render function ，然后执行产生 vdom：

文章插图

这里的 render function 在 React17 之前是 React.createElement：

文章插图

在 React 17 之后换成了 jsx：

文章插图

这个 jsx-runtime 会自动引入，不用像之前那样每个组件都要保留一个 React 的 import 才行。
render function 执行产生 vdom：

文章插图

vdom 的结构是这样的：

文章插图

在 React16 之前，会递归渲染这个 vdom ，增删改真实 dom 。

文章插图

而在 React16 引入了 fiber 架构之后就多了一步：首先把 vdom 转成 fiber ，之后再渲染 fiber 。

文章插图

vdom 转 fiber 的过程叫做 reconcile ，最后增删改真实 dom 的过程叫做 commit 。
为什么要做这样的转换呢？
因为 vdom 只有子节点 children 的引用，没有父节点 parent 和其他兄弟节点 sibling 的引用，这导致了要一次性递归把所有 vdom 节点渲染到 dom 才行，不可打断。
万一打断了会怎么样呢？因为没有记录父节点和兄弟节点，那只能继续处理子节点，却不能处理 vdom 的其他部分了。
所以 React 才引入了这种 fiber 的结构，也就是有父节点 return、子节点 child、兄弟节点 sibling 等引用，可以打断，因为断了再恢复也能找到后面所有没处理过的节点。
fiber 节点的结构是这样的：

文章插图

这个过程可以打断，自然也就可以调度，也就是 schdule 的过程。
所以 fiber 架构就分为了 schdule、reconcile（vdom 转 fiber）、commit（更新到 dom）三个阶段。
函数组件内可以用 hooks 来存取一些值，这些值就是存在 fiber 节点上的。
比如这个函数组件内用到了 6 个 hook：

文章插图

那么对应的 fiber 节点上就有个 6 个元素的 memorizedState 链表：

文章插图

通过 next 串联起来：

文章插图

不同的 hook 在 memorizedState 链表不同的元素上存取值，这就是 react hooks 的原理。
这个链表有创建阶段和更新阶段，所以你会发现 useXxx 的最终实现都分为了 mountXxx 和 updateXxx：

文章插图

这里的 mount 阶段就是创建 hook 节点并组装成链表的：

文章插图

会把创建好的 hook 链表挂到 fiber 节点的 memorizedState 属性上。
那更新的时候自然也就能从 fiber 节点上取出这个 hook 链表：

文章插图

这样在多次渲染中， useXxx 的 api 都能在 fiber 节点上找到对应的 memorizedState 。
这就是 react hooks 的原理，可以看到它是把 hook 存在 fiber 节点上的。
那 preact 有什么不同呢？
preact 如何实现 hookspreact 是兼容 react 代码的更轻量级的框架，它支持 class 组件和 function 组件，也支持了 hooks 等 react 特性。不过它没有实现 fiber 架构。