React Fiber框架中的Render渲染阶段——workLoop（performUnitOfWork【beginWork与completeWork】）

news/2025/1/17 2:31:07/

触发渲染过程——renderRoot

renderRoot 是一个函数，用于触发渲染工作。它通常会调用并递归地执行一系列的渲染任务，直到完成整个更新过程。这个过程包括执行 Fiber 树中的 beginWork 和 completeWork，以及渲染新状态或 DOM。

function renderRoot(root: FiberRootNode) {//双缓存机制，将current复制一层给workInProgress//React 使用两棵 Fiber 树（current 和 workInProgress）来实现双缓存const { current } = root; // 获取当前的 Fiber 树的根节点let workInProgress = current;// 启动渲染任务（并发渲染模式下会启动任务）workInProgress = performUnitOfWork(workInProgress);// 继续调度工作单元while (workInProgress !== null) {workInProgress = performUnitOfWork(workInProgress);}
}

react源码解析8.render阶段
在这里插入图片描述

renderRoot

React 的渲染过程可以分为多个阶段，包括：更新（Reconciliation）、渲染（Rendering）、提交（Commit）等。
在这里插入图片描述
在这里插入图片描述

//更细节的
function renderRoot(root: FiberRootNode) {try {// 初始化prepareFreshStack(root);// 开始工作循环do{try{workLoop();break;} catch (e) {console.warn('workLoop发生错误', e);workInProgress = null;}while (true); // 获取完成的工作单元const finishedWork = root.current.alternate;root.finishedWork = finishedWork; // 提交根节点的wip fiberNode树，并处理flagscommitRoot(root);

prepareFreshStatck()

此prepareFreshStatck()中的createWorkInProgress简单理解就是上面将current复制一层给workInProgress， const { current } = root; // 获取当前的 Fiber 树的根节点 let workInProgress = current;，两棵 Fiber 树来实现双缓存。
在这里插入图片描述
复制过后的双缓存 数据结构
在这里插入图片描述

workLoop()

function workLoop(){while(workInProgress !== null)performUnitOfWork(workInProgress);
}

performUnitOfWork(workInProgress) 【递归】

负责递归遍历 Fiber 树，并根据不同的 Fiber 类型执行相应的更新或渲染逻辑

function performUnitOfWork(fiber: FiberNode) {// 开始对当前Fiber节点进行工作// 这里的“递”可能指的是递归处理子节点const next = beginWork(fiber); // 执行beginWork函数，返回下一个需要处理的Fiber节点// 更新当前Fiber节点的memoizedProps为pendingProps// 这通常意味着将传入的props“确认”为当前节点的属性fiber.memoizedProps = fiber.pendingProps;// 判断下一个需要处理的节点是否为null// 如果为null，可能表示当前节点没有子节点或子节点已经处理完毕if (next === null) {// 这里的“归”可能指的是回溯到父节点，完成当前节点的工作completeUnitOfWork(fiber); // 执行completeUnitOfWork函数，完成当前Fiber节点的工作} else {// 如果还有下一个节点需要处理，则更新workInProgress指针// workInProgress通常指向当前正在处理的Fiber节点workInProgress = next; // 更新workInProgress为下一个需要处理的Fiber节点// 注意：这里通常会有一个递归调用performUnitOfWork(next)，但在您提供的代码片段中省略了}
}

递归结束，状态模型：
在这里插入图片描述

beginWork流程（递）
  1. 建立节点的父子以及兄弟节点关联关系
    child return sibling属性
  2. 给fiber节点打上flag标记(当前节点的flag)

beginWork 主要发生在协调阶段，它被调用来处理和更新 React 虚拟 DOM（Fiber 树）。根据节点类型（HostRoot、FunctionComponent等）调用对应更新函数
1.初始化 Fiber 节点的工作：当 React 开始处理某个 Fiber 节点时，beginWork 会被调用。它会检查该节点的当前状态，并决定是否需要进行更新。
2.调度子节点的更新：如果当前节点有子节点，beginWork 会为这些子节点安排进一步的更新工作。
在执行过程中，beginWork 会遍历 Fiber 树，判断是否需要更新（例如，检查 props 或 state 是否发生了变化），然后决定是否继续向下渲染（即继续对子节点调用 beginWork）。

export const beginWork = (wip: FiberNode): FiberNode | null => {// 根据Fiber节点的类型，执行相应的更新逻辑，并返回下一个需要处理的Fiber节点switch (wip.tag) {case 'HostRoot':return updateHostRoot(wip); // 处理根节点case 'HostComponent':return updateHostComponent(wip); // 处理宿主组件（如DOM元素）case 'HostText':return null; // 文本节点不需要进一步处理，直接返回nullcase 'FunctionComponent':return updateFunctionComponent(wip); // 处理函数组件default:console.warn('beginWork未实现的类型'); // 输出警告信息break; // 注意：这里的break是多余的，因为return已经会退出函数// 但为了保持格式一致性和清晰性，我们暂时保留它return null; // 对于未实现的类型，返回null}

beginWork初次执行完， 此时内存状态，wip和h1对应的fiber对象建立联系，并且给h1 fiber打上flags标记。
在这里插入图片描述

updateHostRoot

更新队列（processUpdateQueue【memorizedState=element元素】）、协调子元素（reconcileChildren）

在这里插入图片描述

function updateHostRoot(wip: FiberNode): FiberNode | null {// 获取当前工作单元（Fiber）的基态const baseState = wip.memoizedState as Element; // 假设memoizedState是Element类型// 获取更新队列，并断言其类型为UpdateQueue<Element>const updateQueue = wip.updateQueue as UpdateQueue<Element>;// 从共享对象中取出待处理的更新，并清空待处理队列const pending = updateQueue.shared.pending;updateQueue.shared.pending = null;// 使用processUpdateQueue函数处理待处理的更新，并获取更新后的状态//执行函数获取element对象const { memoizedState } = processUpdateQueue(baseState, pending) as { memoizedState: Element };// 更新当前工作单元的基态为最新状态wip.memoizedState = memoizedState;// 获取更新后的子节点，这里假设memoizedState直接代表了子节点// 注意：这里的逻辑可能需要根据实际情况调整，因为memoizedState可能并不直接等于子节点const nextChildren = wip.memoizedState as Element[]; // 假设这里是Element数组，但需要根据实际情况确定// 调用reconcileChildren函数来协调（渲染）子节点// 注意：函数名可能是reconcileChildren的一个拼写错误，通常应该是reconcileChildren或者类似的名称，但这里按照您提供的名称使用reconcileChildren(wip, nextChildren);// 返回当前工作单元的第一个子节点，以便后续的工作单元可以继续处理// 注意：如果wip.child是null，则表示没有子节点需要处理return wip.child;
}
processUpdateQueue

在这里插入图片描述

export const processUpdateQueue = <state>(baseState: state,pendingUpdate: Update<state> | null
): { memoizedState: state } => {// 初始化结果对象，其memoizedState属性设置为baseStateconst result: { memoizedState: state } = {memoizedState: baseState};// 检查是否有待处理的更新if (pendingUpdate !== null) {const action = pendingUpdate.action;// 如果action是一个函数，则执行它并更新memoizedStateif (typeof action === 'function') {result.memoizedState = action(baseState);} else {// 如果action不是函数，则直接将其值赋给memoizedState// 注意：这里假设action的类型与state兼容result.memoizedState = action as state; // 需要类型断言来确保TypeScript不会报错}}// 返回结果对象return result;
};

在这里插入图片描述
在这里插入图片描述
** 注：Fiber对象数据结构 **

reconcileChildren（★★★）

reconcileChildren 主要处理组件的子树，对于每一个子节点（即子 Fiber 节点）会执行以下操作：

  1. 子节点的类型判断（会首先判断每个子节点的类型【比如是 DOM 元素、函数组件还是类组件等】，然后根据不同的类型来决定如何处理）
  2. 节点的比较（相同类型的节点/不同类型的节点/key 和索引）
  3. 生成新的 Fiber 节点(为需要更新或新创建的子组件生成新的 Fiber 节点）
  4. 处理子树的递归（beginWork中递归调用）（会递归地调用自己来处理子组件。如果某个子组件有子节点，React 会继续对子节点进行协调，直到所有节点都被处理完）
    在这里插入图片描述
    reconcileChildFibers|mountChildFibers
    创建子fiber的过程会进入reconcileChildren，该函数的作用是为workInProgress fiber节点生成它的child fiber即 workInProgress.child。然后继续深度优先遍历它的子节点执行相同的操作。mountChildFibers，reconcileChildFibers和mountChildFibers最终其实就是ChildReconciler传递不同的参数返回的函数，这个参数用来表示是否追踪副作用.

在这里插入图片描述

function ChildReconciler(shouldTrackSideEffects) {function placeChild(newFiber, lastPlacedIndex, newIndex) {newFiber.index = newIndex;if (!shouldTrackSideEffects) {//是否追踪副作用// Noop.return lastPlacedIndex;}var current = newFiber.alternate;if (current !== null) {var oldIndex = current.index;if (oldIndex < lastPlacedIndex) {// This is a move.newFiber.flags = Placement;return lastPlacedIndex;} else {// This item can stay in place.return oldIndex;}} else {// This is an insertion.newFiber.flags = Placement;return lastPlacedIndex;}}
}

在这里插入图片描述

const App:any=function (){return(<h1><h2><h3>3333</h3></h2></h1>)
}

初次被调用执行， 此时内存状态，wip和h1对应的fiber对象建立联系，并且给h1 fiber打上flags标记。
在这里插入图片描述
递归，直至next指向为null
在这里插入图片描述

completeWork流程（归）

主要执行任务：
1.创建真实dom节点，但是仍在内存中，未渲染到页面
2.处理flag与subtreeFlags（标记子树标识，用“|”运算处理）
3.建立真实DOM关系，将子元素插入父元素中

function completeWork(current, workInProgress) {switch (workInProgress.tag) {case 'HostComponent': {// 如果是普通的 DOM 节点if (!workInProgress.stateNode) {// 如果没有对应的 DOM 实例，创建一个新的const domElement = document.createElement(workInProgress.type);// 为 DOM 元素添加属性const props = workInProgress.pendingProps;for (const key in props) {if (key === 'children') {// 如果是文本内容，直接设置if (typeof props[key] === 'string' || typeof props[key] === 'number') {domElement.textContent = props[key];}} else if (key.startsWith('on')) {// 添加事件监听器（如 onClick）const eventType = key.toLowerCase().substring(2);domElement.addEventListener(eventType, props[key]);} else {// 设置其他属性domElement.setAttribute(key, props[key]);}}// 将 DOM 实例存储在 stateNode 中workInProgress.stateNode = domElement;}return null;}case 'FunctionComponent':case 'ClassComponent': {// 函数组件和类组件在 completeWork 中通常不需要特殊处理return null;}default:return null;}
}

在这里插入图片描述


http://www.ppmy.cn/news/1563766.html

相关文章

实用好软-----电脑端链接手机 免root权限管理手机 调试安卓

实用好软-----电脑端链接手机 免root权限管理手机 调试安卓

来自知名开发者开发。而且近期更新了全功能的搞机工具。对于链接电脑进行管理手机比较方便。新版重写了多线程逻辑&#xff0c;修复大量卡顿与无响应问题&#xff0c;同时优化了设备检测逻辑&#xff0c;启动更快更丝滑。还有大量新增免ROOT功能。对于玩机来说非常不错 由于AD…
阅读更多...
MySQL数据库（SQL分类）

MySQL数据库（SQL分类）

SQL分类 分类全称解释DDLData Definition Language数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库&#xff0c;表&#xff0c;字段&#xff09;DMLData Manipulation Language数据操作语言&#xff0c;用来对数据库表中的数据进行增删改DQLData Query Languag…
阅读更多...
Go语言开发高效的RPC服务的方法

Go语言开发高效的RPC服务的方法

在Go语言中开发高效的RPC&#xff08;远程过程调用&#xff09;服务&#xff0c;可以通过以下几个关键步骤和方法来实现&#xff1a; 一、定义服务接口 首先需要定义需要提供的RPC方法及其参数和返回值。可以使用Go语言的interface类型来定义RPC接口&#xff0c;同时也可以为…
阅读更多...
微商关系维系与服务创新：链动2+1模式、AI智能名片与S2B2C商城小程序的应用研究

微商关系维系与服务创新：链动2+1模式、AI智能名片与S2B2C商城小程序的应用研究

摘要&#xff1a;随着社交媒体的蓬勃发展&#xff0c;微商作为一种新兴的商业模式&#xff0c;在人与人之间关系网络的基础上逐渐兴起。然而&#xff0c;与实体商家和传统电商相比&#xff0c;微商面临着更大的关系维系挑战。为了保持竞争力&#xff0c;微商必须不断创新服务模…
阅读更多...
uniapp——差量编译

uniapp——差量编译

不知道各位在开发的过程中是否有遇到这种情况&#xff0c;第一次编译花费时间很长&#xff0c;之后修改一部分再次编译速度就很快。这是因为编译器使用了差量编译。 差量编译&#xff08;Incremental Compilation&#xff09;是一种编译优化技术&#xff0c;它旨在提高编译速度…
阅读更多...
信凯科技业绩波动明显：毛利率远弱行业，资产负债率偏高

信凯科技业绩波动明显：毛利率远弱行业，资产负债率偏高

《港湾商业观察》施子夫 1月8日&#xff0c;深交所官网显示&#xff0c;浙江信凯科技集团股份有限公司&#xff08;以下简称“信凯科技”&#xff09;主板IPO提交注册。 自2022年递交上市申请&#xff0c;信凯科技的IPO之路已走过两年光景&#xff0c;尽管提交注册&#xff0…
阅读更多...
对React中类组件和函数组件的理解？有什么区别？

对React中类组件和函数组件的理解？有什么区别？

React 中类组件和函数组件的理解与区别 React 中有两种主要的组件类型&#xff1a;类组件&#xff08;Class Component&#xff09;和函数组件&#xff08;Function Component&#xff09;。两者有许多相似之处&#xff0c;但也有一些显著的区别。在 React 16.8 引入了 Hooks …
阅读更多...
【深度学习】关键技术-优化算法（Optimization Algorithms）详解与代码示例

【深度学习】关键技术-优化算法（Optimization Algorithms）详解与代码示例

优化算法详解与代码示例 优化算法是深度学习中的关键组成部分&#xff0c;用于调整神经网络的权重和偏置&#xff0c;以最小化损失函数的值。以下是常见的优化算法及其详细介绍和代码示例&#xff1a; 1. 梯度下降法 (Gradient Descent) 原理&#xff1a; 通过计算损失函数对…
阅读更多...
最新文章

Copyright @ 2022~2023