当前位置: 首页 > news >正文

React是如何工作的?

从编写组件到最后屏幕生成界面,如上图所示,我们现在需要知道的就是后面几步是如何运行的。

概述

这张图解释了 React 渲染过程的几个阶段:

  1. 渲染触发:通过更新某处的状态来触发渲染。
  2. 渲染阶段:React 调用组件函数,确定如何更新 DOM。这是内部计算阶段,不会立即对屏幕产生视觉变化。
  3. 提交阶段:React 实际写入 DOM,进行元素的更新、插入和删除。
  4. 浏览器绘制:浏览器将更新后的内容绘制到屏幕上。

在 React 中,渲染并不是指更新 DOM 或在屏幕上显示元素。渲染仅在 React 内部发生,不会直接产生视觉变化。

 渲染触发

渲染触发条件

  1. 初次渲染:应用程序的初始渲染。
  2. 状态更新:一个或多个组件实例的状态更新(重新渲染)。

直觉上的状态更新如下:

但其实并不是,实际上它是批量更新的。

例子如下:

关键点

  • 渲染过程是为整个应用程序触发的。
  • 实际上,看起来 React 只重新渲染状态更新的组件,但背后工作并非如此。
  • 渲染不会立即触发,而是安排在 JavaScript 引擎有空闲时间时执行。事件处理程序中的多个 setState 调用也会进行批处理。

渲染阶段

什么是虚拟DOM? 

它只是一个javascript对象。

为什么需要协调(Reconciliation)和区别(diffing)?

纤维树(Fiber tree)是什么? 

  • React 元素树(虚拟 DOM):左侧显示了一个 React 组件树,包含组件如 AppVideoModalOverlayh3 和 button。这是 React 的虚拟 DOM 表示。
  • Fiber 树:右侧是 Fiber 树,它在初次渲染时被创建。每个组件实例和 DOM 元素都有一个对应的“fiber”。
  • Fiber:每个 fiber 是一个“工作单元”,包含以下信息:
    • 当前状态
    • 属性(Props)
    • 副作用
    • 使用的钩子(hooks)
    • 工作队列
  • 纤维树的特点
    • 内部树结构:每个组件实例和DOM元素都有一个对应的“fiber”。这些fiber节点形成了一个树状结构,用于描述UI界面。
    • Fiber节点不在每次渲染时重新创建:这意味着React可以复用已有的fiber节点,从而减少不必要的计算和内存使用。
    • 异步渲染

      • 异步完成工作:Fiber允许将渲染任务分成小块,利用浏览器的空闲时间进行处理。这种方式避免了长时间阻塞主线程,提高了应用的响应性。
      • 任务优先级调度:React可以根据任务的重要性来决定执行顺序,优先处理用户交互等关键任务。
    • 并发特性

      • 支持并发特性:Fiber架构支持React中的并发模式,使得应用能够更好地处理复杂交互和动态变化,例如Suspense或过渡效果。
      • 长时间渲染不会阻塞JavaScript引擎:通过将渲染过程分割成小块,React能够在不中断用户界面的情况下进行更新。
    • 具体实现

      • 增量式渲染:通过将渲染任务分配到多个帧中,React可以保持应用的流畅性,即使在复杂布局或大量计算时也能保持响应。
      • 可中断和恢复的渲染:在需要时,React可以暂停当前任务,并在稍后恢复,从而提高用户体验。

 协调(Reconciliation)举例

 区分(Diffing)举例

key prop是什么?

在list中使用key prop

使用key prop重置状态 

这不是我们想要的,需要使用key prop进行重置state。

 提交阶段

绘制阶段

总结

相关文章:

React是如何工作的?

从编写组件到最后屏幕生成界面,如上图所示,我们现在需要知道的就是后面几步是如何运行的。 概述 这张图解释了 React 渲染过程的几个阶段: 渲染触发:通过更新某处的状态来触发渲染。渲染阶段:React 调用组件函数&…...

llama.cpp 去掉打印,只显示推理结果

llama.cpp 去掉打印,只显示推理结果 1 llama.cpp/common/log.h #define LOG_INF(...) LOG_TMPL(GGML_LOG_LEVEL_INFO, 0, __VA_ARGS__) #define LOG_WRN(...) LOG_TMPL(GGML_LOG_LEVEL_WARN, 0, __VA_ARGS__) #define LOG_ERR(…...

Word、PDF转换为图片Java

Word、PDF转换为图片Java 需求要在小程序端展示文档内容,所以将文档每页转换为图片后显示 参考和其他等方案: https://blog.csdn.net/strggle_bin/article/details/140599514 https://www.modb.pro/db/566986 https://blog.csdn.net/spring_is_comin…...

iOS IPA上传到App Store Connect的三种方案详解

引言 在iOS应用开发中,完成开发后的重要一步就是将IPA文件上传到App Store Connect以便进行测试或发布到App Store。无论是使用Xcode进行原生开发,还是通过uni-app、Flutter等跨平台工具生成的IPA文件,上传到App Store的流程都是类似的。苹果…...

Java中的Arrays类

java.util.Arrays是一个非常实用的类,提供了许多静态方法来操作数组,如排序、查找、复制和填充等。 1. toString - 将数组转换为字符串 // 导入java.util.Arrays类 import java.util.Arrays;public class ArraysExample {public static void main(Stri…...

GUI编程

GUI编程 【Java从0到架构师课程】笔记 GUI简介 GUI:图形用户界面,在计算机中采用图形的方式显示用户界面 java的GUI开发 AWT:java最早推出的GUI编程开发包,界面风格跟随操作系统SWT:eclipse就是java使用SWT开发的Sw…...

(multi)map和set--C++

文章目录 一、序列式容器和关联式容器二、set系列的使用1、set和multiset参考文档2、set类的介绍3、set的构造和迭代器4、set的增删查5、insert和迭代器遍历使用样例:6、find和erase使用样例:7、multiset和set的差异 三、map系列的使用1、map和multimap参…...

jmeter响应断言放进csv文件遇到的问题

用Jmeter的json 断言去测试http请求响应结果,发现遇到中文时出现乱码,导致无法正常进行响应断言,很影响工作。于是,察看了其他测试人员的解决方案,发现是jmeter本身对编码格式的设置导致了这一问题。解决方案是在jmete…...

复旦大学全球供应链研究中心揭牌,合合信息共话大数据赋能

10月13日,复旦大学全球供应链研究中心(以下简称“中心”)揭牌仪式在复旦大学管理学院政立院区隆重举行。我国的供应链体系庞大复杂,在百年未有之大变局下,保障产业链供应链安全已成为我国的重要战略目标。中心的设立旨…...

达那福发布新品音致系列:以顶尖降噪技术,开启清晰聆听新篇章

近日,国际知名助听器品牌达那福推出其最新研发的音致系列助听器。该系列产品旨在通过顶尖的声音处理技术,直面助听器市场中普遍存在的挑战——如何在噪声环境中提供清晰的语音辨识。 根据助听器行业协会2022年的调查数据,高达86%的佩戴者认为…...

当物理学奖遇上机器学习:创新融合的里程碑

作为一名程序员,看到 2024 年诺贝尔物理学奖颁发给机器学习与神经网络领域研究者,心中满是感慨与思考。 从编程技术角度出发,这意味着传统编程理念与物理思维有了更紧密的结合。在以往的编程中,算法优化多侧重于数据结构和计算效率…...

模拟电路2

BJT双极性晶体管 1.1 BJT共射特性曲线 输入特性: iB f(uBE)|UceC 定量分析,确定只有一个变量 输出特性 放大区:发射结正偏,集电结反偏 截至区:双结反偏 CE断路 饱和区:双结正偏 UCEs0.3 CE类似于开关闭…...

大数据面试题整理——MapReduce

系列文章目录 第一章 HDFS面试题 第二章 MapReduce面试题 文章目录 系列文章目录一、请简要解释一下 MapReduce 的工作原理。二、什么是 map 函数和 reduce 函数?它们的作用分别是什么?三、如何处理数据倾斜问题在 MapReduce 中?四、在 MapR…...

【景观生态学实验】实验一 ArcGIS地理数据处理及制图基础

实验目的 1.掌握ArcGIS软件基本操作:通过实验操作与学习,熟练掌握ArcGIS软件相关的基本操作,包括界面熟悉、工具栏使用、数据的加载和保存、基本数据处理操作等; 2.掌握如何使用ArcGIS进行影像拼接及裁剪:通过实验操作与学习&am…...

今年双十一最值得入手的好物有哪些?双十一值得选购的好物盘点!

在这个全民狂欢的购物盛宴——双十一,每一个角落都弥漫着诱人的优惠与不可错过的精品。从科技潮品到生活必需品,从时尚尖货到家居好物,无数精选商品在这一季集中绽放,等待着慧眼识珠的你将它们带回家,今年的双十一&…...

【OpenCV】人脸识别方法

代码已上传GitHub:plumqm/OpenCV-Projects at master EigenFace、FisherFace、LBPHFace 这三种方法的代码区别不大所以就一段代码示例。 EigenFace与FisherFace 1. 将人脸图像展开为一维向量,组成训练数据集 2. PCA(EigenFace)或…...

xxl-job定时任务

学习中心 清理Redis中的历史榜单: 持久化榜单数据: 创建历史榜单表: 支付服务 待退款订单检查: 未支付订单检查: 交易服务 退款单处理: 促销中心 优惠券发放状态处理:...

C#从零开始学习(如何构建应用)(1)

开始使用 C# 本章所有的代码都放在 https://github.com/hikinazimi/head-first-Csharp 创建一个控制台应用 打开Visual Studio 2019 创建项目 选择控制台应用程序 创建后点击运行,就可以在控制台打印Hello World 构建一个游戏(创建WPF项目) 构建游戏的步骤 首先创建WPF项…...

OpenCV高级图形用户界面(7)获取指定窗口的属性值函数getWindowProperty()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 提供窗口的参数。 函数 getWindowProperty 返回窗口的属性。 cv::getWindowProperty() 函数用于获取指定窗口的属性值。这个函数允许你查询窗口…...

Java实现文件上传功能

目录 1、准备工作 2、注意事项 3、jsp页面代码 4、Servlet 5、注册Servlet 1、准备工作 导入依赖:commons-fileupload和commons-io 2、注意事项 ①为保证服务器安全,上传文件应该放在外界无法直接访问的目录下,比如WEB-INF目录下 ②为…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

【kafka】Golang实现分布式Masscan任务调度系统

要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘&#xf…...

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API,让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API,你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...