createElement

image.png
image.png
image.png
jsx转换成浏览器读的懂得语言就是通过createElement生成

Render函数

传入的Fiber也是一个对象
image.png

并行渲染｜渲染任务requestIdleCallback

image.png

Fibers

fiber本质就是一个对象类型，存储了一些信息：type，current state and props，以及指向子节点，父节点，兄弟结点的引用。自然的，Fiber的近亲结点都是Fiber类型来表示
image.png
image.pngimage.png
fiber的一个目的就是为了更快的找到下一个工作单元、
fiber渲染树的步骤，先往树深处深扎，找子节点，倘若没有子节点了就转向兄弟节点，倘若没有兄弟节点了就向上找Uncle节点，直到结束

image.png
image.pngimage.png

image.png
遍历Fiber Tree，
image.png