第五章 React18的并发渲染原理

1、react的三层执行架构

第五章 React18的并发渲染原理_第1张图片

 第五章 React18的并发渲染原理_第2张图片

第五章 React18的并发渲染原理_第3张图片

有两个循环

1、wokerloop

        任务队列,每次执行完队列,都要把这个任务pop出来,移出队列

2、wokerloopsync

        遍历fiber -> 循环链表(页面里面的dom组件),对fiber节点进行增删改查的处理,这里只是打标记,还没渲染到真实的dom上

          最后通过render渲染到页面上

3、finishConcurrentRender

第五章 React18的并发渲染原理_第4张图片

 单线程,通过线程的交替执行 达到实现并发的目的

 什么是fiber

第五章 React18的并发渲染原理_第5张图片

第五章 React18的并发渲染原理_第6张图片

 

 遍历完 想恢复中断的 最多只能恢复子节点

fiber链表

 

同步:都在渲染 绘制

并发:

需要调用startTransition才有并发

workerLoopConcurrent  只有一次渲染 绘制

shouldYield 执行的时间超过5毫秒 时间分片 就会被中断一下  就会执行插入更高优先级的任务

直到没有操作 才会commit  render渲染 绘制

你可能感兴趣的:(react.js,前端)