【从0实现React18】 (四) 如何触发更新 带你了解react触发更新的流程以及更新后如何触发render

news2025/1/11 18:44:11

常见的触发更新的方式

  • 创建 React 应用的根对象 ReactDOM.creatRoot().render()
  • 类组件 this.setState()
  • 函数组件 useState useEffect

我们希望实现一套统一的更新机制,他的特点是:

  • 兼容上述触发更新的方式
  • 方便后续拓展(优先级机制)

更新机制的组成部分

  • 代表更新的数据结构 Update
  • 消费update的数据结构——UpdateQueue

实现 Update 和 UpdateQueue

packages/react-reconciler/src/ 目录下新建 updateQueue.ts 文件:

 // packages/react-reconciler/src/updateQueue.ts
import { Action } from '@/shared/ReactTypes'
import { Update } from './fiberFlags'

export interface Update<State> {
  action: Action<State>
}

export interface UpdateQueue<State> {
  shared: {
    pending: Update<State> | null
  }
}

/** 创建 Update */
export const createUpdate = <State>(action: Action<State>): Update<State> => {
  return {
    action,
  }
}

/** 创建 UpdateQueue */
export const createUpdateQueue = <Action>() => {
  return {
    shared: {
      pending: null,
    },
  } as UpdateQueue<Action>
}

/** updateQueue添加update */
export const enqueueUpdate = <Action>(
  updateQueue: UpdateQueue<Action>,
  update: Update<Action>
) => {
  updateQueue.shared.pending = update
}

/** updateQueue消费update */
export const processUpdateQueue = <State>(
  baseState: State, // 初始状态
  pendingUpdate: Update<State> | null // 要消费的Update
): { memoizedState: State } => {
  const result: ReturnType<typeof processUpdateQueue<State>> = {
    memoizedState: baseState,
  }

  if (pendingUpdate !== null) {
    const action = pendingUpdate.action
    if (action instanceof Function) {
      // baseState:1, update:(x)=>4*x  ——> memoizedState:4
      result.memoizedState = action(baseState)
    } else {
      // baseState:1, update:2  ——>  memoizedState:2
      result.memoizedState = action
    }
  }

  return result
}
 // packages/shared/ReactTypes.ts
// ...

/** useState支持的两种dispatch参数 */ export type Action<State> = State | ((prevState: State) => State) 

实现触发更新

接下来的工作包括:

  • 实现 ReactDOM.createRoot().render()时调用的API
  • 将该API接入上述更新机制中

需要考虑的事情:

  • 更新可能发生于任意组件,而更新流程是从根节点递归
  • 需要一个统一的根节点保存通用信息

  • ReactDOM.createRoot() 函数生成一个新的 Root 对象,它在源码中是 FiberRootNode 类型,充当了 React 应用的根节点。
  • rootElement 则是要渲染到的 DOM 节点,它在源码中是 hostRootFiber 类型,作为 React 应用的根 DOM 节点。
  • render() 方法将组件 <App/> 渲染到根节点上。在这个过程中,React 会创建一个代表 <App/> 组件的 FiberNode,并将其添加到 Root 对象的 Fiber 树上。

实现 FiberRootNode

根据上图,我们先来实现 FiberRootNode 类型:

 // packages/react-reconciler/src/fiber.ts

// ...
export class FiberRootNode {
  container: Container  // 保存挂载节点 FiberRootNode
  current: FiberNode // 指向 hostRootFiber
  finishedWork: FiberNode | null // 最后递归完成的 fiber

  constructor(container: Container, hostRootFiber: FiberNode) {
    this.container = container
    this.current = hostRootFiber
    hostRootFiber.stateNode = this
    this.finishedWork = null
  }
}

实现 render 调用的 API

接着我们来实现 ReactDOM.createRoot().render() 过程中调用的 API:

  • createContainer 函数: 用于创建一个新的容器(container),该容器包含了 React 应用的根节点以及与之相关的一些配置信息。createContainer 函数会创建一个新的 Root 对象,该对象用于管理整个 React 应用的状态和更新。
  • updateContainer 函数: 用于更新已经存在的容器中的内容。在内部,updateContainer 函数会调用 scheduleUpdateOnFiber 等方法,通过 Fiber 架构中的协调更新过程,将新的 React 元素(element)渲染到容器中,并更新整个应用的状态。

新建文件 fiberReconciler.ts,里面有 createContainerupdateContainer 两个函数

import { Container } from 'hostConfig'
import { FiberNode, FiberRootNode } from './fiber'
import { HostRoot } from './workTags'
import {
  UpdateQueue,
  createUpdate,
  createUpdateQueue,
  enqueueUpdate,
} from './updateQueue'
import { ReactElementType } from 'shared/ReactTypes'

export function createContainer(container: Container) {
  // 1.新建 hostRootFiber
  const hostRootFiber = new FiberNode(HostRoot, {}, null)
  // 2.新建 fiberRootNode
  const root = new FiberRootNode(container, hostRootFiber)
  // 3.初始化hostRootFiber的updateQueue
  hostRootFiber.updateQueue = createUpdateQueue()

  return root
}

export function updateContainer(
  element: ReactElementType | null,
  root: FiberRootNode
) {
  // 1.获取 hostRootFiber
  const hostRootFiber = root.current
  // 2.新建 update
  const update = createUpdate<ReactElementType | null>(element)
  // 3.将该 update 插入到 hostRootFiber的updateQueue中
  enqueueUpdate(
    hostRootFiber.updateQueue as UpdateQueue<ReactElementType | null>,
    update
  )

  return element
}

实现在 updateContainer后进入wordLoop更新流程

将updateContainer方法与wordLoop的renderRoot更新流程连接:

workLoop.ts 文件中实现 scheduleUpdateOnFiber函数:

/** 实现在 updateContainer后进入wordLoop更新流程 */
export function scheduleUpdateOnFiber(fiber: FiberNode) {
  // TODO 调度功能
  // 先找到触发更新节点的根节点
  const root = markUpdateFromFiberToRoot(fiber)
  // 然后执行 renderRoot
  renderRoot(root)
}

然后在updateContainer中执行scheduleUpdateOnFiber(hostRootFiber)

export function updateContainer(
  element: ReactElementType | null,
  root: FiberRootNode
) {
  // ...

  // 进入wordLoop更新流程
  scheduleUpdateOnFiber(hostRootFiber)
  
  return element
}

另外,在上一节中,我们在实现 prepareFreshStack 函数时,直接将 root 作为参数赋值给了 workInProgress,但现在我们知道了,root 其实是 FiberRootNode 类型的,不能直接赋值给 FiberNode 类型的 workInProgress,所以需要写一个 createWorkInProgress 函数处理一下:

// fiber.ts 
/** 创建 WorkInProgress*/
export const createWorkInProgress = (
  current: FiberNode,
  pendingProps: Props
): FiberNode => {
  let wip = current.alternate

  if (wip === null) {
    // mount
    wip = new FiberNode(current.tag, pendingProps, current.key)
    wip.stateNode = current.stateNode

    wip.alternate = current
    current.alternate = wip
  } else {
    // update
    wip.pendingProps = pendingProps
    wip.flags = NoFlags // 清除副作用
  }
  wip.type = current.type
  wip.updateQueue = current.updateQueue
  wip.children = current.children
  wip.memoizedProps = current.memoizedProps
  wip.memoizedState = current.memoizedState

  return wip
}

然后更新wordLoop初始化:

// workLoop.ts
/** 初始化 */
function prepareFreshStack(root: FiberRootNode) {
  workInProgress = createWorkInProgress(root.current, {})
}

至此,我们已经实现了 React 应用在首次渲染或后续更新时的大致更新流程,一起来回顾一下:

  • 首先,我们通过 createContainer 函数创建了 React 应用的根节点 FiberRootNode,并将其与 DOM 节点(hostFiberRoot)连接起来;

  • 然后,通过 updateContainer 函数创建了一个更新(update),并将其加入到更新队列(updateQueue)中,启动了首屏渲染或后续更新的机制;
  • 接着会调用 scheduleUpdateOnFiber 函数开始调度更新,从触发更新的节点开始向上遍历,直到达到根节点 FiberRootNode
  • 接着会调用 renderRoot 函数,初始化 workInProgress 变量,生成与 hostRootFiber 对应的 workInProgress
  • 接着就开始 Reconciler 的更新流程,即 workLoop 函数,对 Fiber 树进行深度优先遍历(DFS);
  • 在向下遍历阶段会调用 beginWork 方法,在向上返回阶段会调用 completeWork 方法,这两个方法负责 Fiber 节点的创建、更新和处理,具体实现会在下一节会讲到。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1854531.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vienna 整流器的基本原理及数学模型

2.1 Vienna 整流器基本工作原理 2.1.1 主电路拓扑结构分析 Vienna 整流器系统的主电路包含用于升压的三相电感、三相桥臂和两个直流侧均压电容。通过有规律的对双向开关进行控制不仅能实现功率双向流动&#xff0c;还能使网侧电流时刻跟踪电网电压&#xff0c;使系统运行在高…

【ajax实战01】数据管理网站总述

一&#xff1a;功能实现 登录和权限判断查看文章内容列表&#xff08;筛选和分页&#xff09;编辑文章&#xff08;数据回显&#xff09;删除文章发布文章&#xff08;图片上传&#xff0c;富文本编辑器&#xff09; 该网站最终实现&#xff1a;登录后台管理系统&#xff0c;…

【Linux进程】进程的 切换 与 调度(图形化解析,小白一看就懂!!!)

目录 &#x1f525;前言&#x1f525; &#x1f4a7;进程切换&#x1f4a7; &#x1f4a7;进程调度&#x1f4a7; &#x1f525;总结与提炼&#x1f525; &#x1f525;共勉&#x1f525; &#x1f525;前言&#x1f525; 在 Linux 操作系统中&#xff0c;进程的 调度 与 …

Git使用过程中涉及的几个区域

一. 简介 Git 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速的处理从很小到非常大的项目版本管理&#xff0c;也是 Linus Torvalds 为了帮助管理 Linux内核开发而开发的一个开放源码的版本控制软件。 本文简单了解一下 git涉及的几个部分&#xff0c;以及git 常…

使用Flink CDC实时监控MySQL数据库变更

在现代数据架构中&#xff0c;实时数据处理变得越来越重要。Flink CDC&#xff08;Change Data Capture&#xff09;是一种强大的工具&#xff0c;可以帮助我们实时捕获数据库的变更&#xff0c;并进行处理。本文将介绍如何使用Flink CDC从MySQL数据库中读取变更数据&#xff0…

leetcode 二分查找·系统掌握 搜索二维矩阵

题目&#xff1a; 题解&#xff1a; 一个可行的思路是使用~01~泛型对每一行的最后一个元素进行查找找到第一个大于等于target的那一行&#xff0c;判断查找结果如果“失败”返回false否则继续在改行进行常规二分查找target的值根据查找结果返回即可。 bool searchMatrix(vec…

基于Quartus Prime18.1的安装与FPGA的基础仿真(联合Modelsim)教程

Quartus是一种美国科技公司Intel&#xff08;英特尔&#xff09;公司开发的FPGA&#xff08;现场可编辑门阵列&#xff09;设计编译软件&#xff0c;用作设计、仿真、综合和布局、支持多种编程语言&#xff0c;包括VHDL、Verilog等&#xff0c;并具有丰富的功能和工具库&#x…

【Python机器学习】NMF——将NMF应用于模拟信号数据

假设我们对一个信号感兴趣&#xff0c;它是由三个不同信号源合成的&#xff1a; import matplotlib.pyplot as plt import mglearnSmglearn.datasets.make_signals() plt.figure(figsize(6,1)) plt.plot(S,-) plt.xlabel(Time) plt.ylabel(Signal) plt.show()不幸的是&#xff…

基于imx6ull开发板 移植opencv4.7.0

一、概述 本章节是针对opencv-4.7.0移植到Linux系统&#xff0c;运行在正点原子-I.MX6U ALPHA开发板 上&#xff0c;详细的移植流程如下。 二、环境要求 2.1 硬件环境 正点原子-I.MX6U ALPHA开发板虚拟机&#xff1a;VMware 2.2 软件环境 Ubuntu系统要求&#xff1a;20.0…

[SAP ABAP] 排序内表数据

语法格式 整表排序 SORT <itab> [ASCENDING|DESCENDING]. 按指定字段排序 SORT <itab> BY f1 [ASCENDING|DESCENDING] f2 [ASCENDING|DESCENDING] ... fn [ASCENDING|DESCENDING].<itab>&#xff1a;代表内表 不指定排序方式则默认升序排序 示例1 结果显…

Posix多线程编程总结

Posix在线文档&#xff1a; The Single UNIX Specification, Version 2 (opengroup.org) 本文主要参考这位大神的文章&#xff1a; Posix多线程编程学习笔记 - 凌峰布衣 - 博客园 (cnblogs.com) 线程安全问题 多线程编程中&#xff0c;经常遇到的就是线程安全问题&#xff0c;或…

React AntDesign Layout组件布局刷新页面错乱闪动

大家最近在使用React AntDesign Layout组件布局后刷新页面时&#xff0c;页面布局错乱闪动 经过组件属性的研究才发现&#xff0c;设置 hasSider 为 true 就能解决上面的问题&#xff0c;耽搁了半天的时间&#xff0c;接着踩坑接着加油&#xff01;&#xff01;&#xff01; …

STM32学习 修改系统主频

前面时钟树的学习说明单片机的主频是可以修改的&#xff0c;那么怎么更改系统的主频&#xff0c;这里做一个简单的介绍。首先要明白&#xff0c;单片机的程序是如何运行&#xff0c;这里简单说明一下。 对应的代码在startup_stm32....文件里面&#xff0c;这里是复位程序的汇编…

第T2周:彩色图片分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 &#x1f449; 要求&#xff1a; 学习如何编写一个完整的深度学习程序了解分类彩色图片会灰度图片有什么区别测试集accuracy到达72% &#x1f9be;我的环境&am…

QT事件处理系统之五:自定义事件的发送案例 sendEvent和postEvent接口

1、案例 双击窗口,会发送 自定义事件,然后在事件过滤中心进行拦截处理自定义事件。 2、核心代码 /*解释:双击窗口时,将产生双击事件,然后该事件被包裹成一个对象,随后将会被发往event事件中心,然后进行事件的处理(Widget对象);因为m_lineEdit开启了事件过滤机制,所…

【UML用户指南】-21-对基本行为建模-活动图

目录 1、概念 2、组成结构 2.1、动作 2.2、活动节点 2.3、控制流 2.4、分支 2.5、分岔和汇合 2.6、泳道 2.7、对象流 2.8、扩展区域 3、一般用法 3.1、对工作流建模 3.2、对操作建模 一个活动图从本质上说是一个流程图&#xff0c;展现从活动到活动的控制流 活动图…

图像编辑技术的新篇章:基于扩散模型的综述

在人工智能的浪潮中&#xff0c;图像编辑技术正经历着前所未有的变革。随着数字媒体、广告、娱乐和科学研究等领域对高质量图像编辑需求的不断增长&#xff0c;传统的图像编辑方法已逐渐无法满足日益复杂的视觉内容创作需求。尤其是在AI生成内容&#xff08;AIGC&#xff09;的…

【论文复现|智能算法改进】一种基于多策略改进的鲸鱼算法

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 SCI二区|鲸鱼优化算法&#xff08;WOA&#xff09;原理及实现【附完整Matlab代码】 2.改进点 混沌反向学习策略 将混沌映射和反向学习策略结合&#xff0c;形成混沌反向学习方法&#xff0c;通过该方 法…

三十八篇:架构大师之路:探索软件设计的无限可能

架构大师之路&#xff1a;探索软件设计的无限可能 1. 引言&#xff1a;架构的艺术与科学 在软件工程的广阔天地中&#xff0c;系统架构不仅是设计的骨架&#xff0c;更是灵魂所在。它如同建筑师手中的蓝图&#xff0c;决定了系统的结构、性能、可维护性以及未来的扩展性。本节…

LSSS算法实现,基于eigen和pbc密码库【一文搞懂LSSS,原理+代码】

文章目录 一. LSSS简介1.1 概述1.2 线性秘密分享方案&#xff08;LSSS&#xff09;与 Shamir的秘密分享方案对比LSSS1.2.1 Shamir的秘密分享方案1.2.2 线性秘密分享方案&#xff08;LSSS&#xff09;1.2.3 主要区别 二. 基于矩阵的LSSS加解密原理分析2.1 LSSS矩阵构造2.1.1 定义…