React 渲染流程分析

React 页面是由组件组成的,从根组件直到叶组件,内部的组件数通过 Fiber 来保存并触发并发更新。页面的展示分为两部分,首先是初始化,所有组件首次展示,都要进行渲染,之后是更新流程,也就是页面产生了交互,需要某些组件出现状态变更,React 内部找到需要更新的组件并进行更新。本文从源代码的角度,对 React 的初始化以及更新过程进行梳理:

JSX编译

JSX 是一种 HTML 代码模板,JavaScript 引擎原生并不支持 JSX 语法,因此,运行时需要首先将 JSX 转为浏览器可以执行的 JS 代码。React 通过 Babel 插件 plugin-transform-react-jsx 将 JSX 装换为 JS,下图中 Bundle.js 中包含最终转换好的 JS。
在这里插入图片描述

createRoot

首先,绑定 Root 容器到 Dom 节点,所有 Root 下的组件全部展示在 Dom 节点下。createRoot -> createContainer -> createFiberRoot,最终返回的是 FiberRoot
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

render

firerNode 创建完成之后,调用 root.render,是整个App 渲染的入口。
在这里插入图片描述
updateContainer 中有 Lane 的概念,Lane 和优先级有关系,以后具体再看起什么作用
在这里插入图片描述
进入 scheduleFiber,调度 Fiber 任务
在这里插入图片描述
进入 performConcurrentWorkOnRoot,并发执行任务
在这里插入图片描述
进入 renderRootSync,同步渲染 Root
在这里插入图片描述
进入 workLoopSync,循环处理任务
在这里插入图片描述
进入 performUnitOfWork, 开始处理任务
在这里插入图片描述

进入 beginWork,渲染开始
在这里插入图片描述
开始创建 FiberNode
在这里插入图片描述
进入reconcileChildren,进行对比
在这里插入图片描述
进入处理单个节点逻辑
在这里插入图片描述
进入创建 Fiber 方法
在这里插入图片描述
通过上面的步骤,FiberTree创建完成。下面进入 Commit 阶段,回到performConcurrentWorkOnRoot,进入 finishConcurrentRender:
在这里插入图片描述
最终进入 commitMutationEffects,找到需要修改的节点
在这里插入图片描述
进入commitMutationEffectsOnFiber
在这里插入图片描述
递归处理所有子节点
在这里插入图片描述
处理最终渲染
在这里插入图片描述
Dom 节点操作
在这里插入图片描述

总结

React 渲染流程代码比较多,入口在 Root.render,并发执行 Render,同步执行 Commit。

相关推荐

  1. React 元素渲染

    2024-06-16 11:48:06       63 阅读
  2. REACT 条件渲染

    2024-06-16 11:48:06       44 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-16 11:48:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-16 11:48:06       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-16 11:48:06       82 阅读
  4. Python语言-面向对象

    2024-06-16 11:48:06       91 阅读

热门阅读

  1. 一个有用的docker entrypoint脚本的范例

    2024-06-16 11:48:06       30 阅读
  2. 【轮询负载均衡规则算法设计题】

    2024-06-16 11:48:06       37 阅读
  3. 基于springboot的青年公寓服务平台源码数据库

    2024-06-16 11:48:06       25 阅读
  4. 17.EventLoop-IO任务

    2024-06-16 11:48:06       31 阅读
  5. 2024hw蓝队面试题-3

    2024-06-16 11:48:06       32 阅读
  6. 521. 最长特殊序列 Ⅰ Easy

    2024-06-16 11:48:06       33 阅读
  7. centos7.9安装openssl1.1.1

    2024-06-16 11:48:06       27 阅读
  8. React项目配置路径别名“@”

    2024-06-16 11:48:06       32 阅读