深入浅出react hooks
date
Sep 14, 2023
slug
react_hooks_comprehension
status
Published
tags
Website
react
frontend
前端
summary
要了解react hooks，特别是useEffect和useState的原理，不单单要理解hook的存储结构，还要理解整个react的渲染过程。
type
Post
要了解react hooks，特别是useEffect和useState的原理，不单单要理解hook的存储结构，还要理解整个react的渲染过程。
.png?table=block&id=8eae29ef-ee57-4bab-a170-d816d4295e86&cache=v2)
首先我们用jsx来描述页面，jsx编译之后成render function(react/jsx-runtime) , render function执行后编程React Element对象，也就是Vdom。
然后Vdom就转换成fiber结构，就是一个链表。
Vdom只有children属性来链接父子节点，但是转为fiber结构之后就有了child,sibling来关联父子，兄弟节点。
Vdom转fiber的流程叫做Reconcile（调和），我们常说的diff就是在reconcile这个过程中。
多个节点的diff也就是当老的fiber子节点列表需要更新的时候，要和新的Vdom的children进行对比，找到哪些可以复用的，直接移过去，剩下的做增删，产生新的fiber列表。
经过reconcile，就有新的fiber树了。
这时还没有处理副作用，也就是useEffect，生命周期函数等，这些实在reconcile之后处理。
整理分为两个大阶段：一个是render，一个是commit 。
render就是 reconile，jsx转成Vdom转成fiber；
commit就是具体操作dom，执行副作用的过程。
commit分 before mutation, mutation, layout
操作dom之后是layout，layout实在操作dom之后，这个阶段可以拿到dom，ref更新是在这个阶段，useLayoutEffect回调也是在 这个阶段，不推荐使用会同步阻塞渲染。
hook的数据都是保存在fiber的节点上。 useState, useRef, useEffect