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

react的fiber 用法

news 来源：原创 2025/6/20 21:36:47

在 React 里，Fiber 是 React 16.x 及后续版本采用的协调算法，它把渲染工作分割成多个小任务，让 React 可以在渲染过程中暂停、恢复和复用任务，以此提升渲染性能与响应能力。在实际开发中，你无需直接操作 Fiber 节点，不过你可以借助 React 的 API 来利用 Fiber 的特性。下面从几个方面为你讲解 Fiber 的用法。

1. 异步渲染

Fiber 架构实现了异步渲染，这意味着 React 能在渲染期间暂停工作，处理高优先级的事件。你可以通过 React.lazy 和 Suspense 来实现代码分割和异步加载组件。

import React, { lazy, Suspense } from 'react';// 异步加载组件
const LazyComponent = lazy(() => import('./LazyComponent'));function App() {return (<div><Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense></div>);
}export default App;

2. 优先级调度

Fiber 架构支持任务优先级调度，借助 React.unstable_runWithPriority 函数，你能设置不同任务的优先级。

import React, { unstable_runWithPriority as runWithPriority } from 'react';function App() {const handleClick = () => {runWithPriority('userBlocking', () => {// 高优先级任务console.log('High priority task');});runWithPriority('normal', () => {// 普通优先级任务console.log('Normal priority task');});};return (<button onClick={handleClick}>Run tasks with different priorities</button>);
}export default App;

3. 时间切片

Fiber 利用时间切片技术，把渲染工作拆分成多个小任务，避免长时间阻塞主线程。在 React 中，你可以使用 React.memo 来对组件进行记忆化，减少不必要的渲染。

import React from 'react';// 记忆化组件
const MemoizedComponent = React.memo(({ data }) => {return <div>{data}</div>;
});function App() {const [count, setCount] = React.useState(0);return (<div><button onClick={() => setCount(count + 1)}>Increment</button><MemoizedComponent data={count} /></div>);
}export default App;

总结

异步渲染：借助 React.lazy 和 Suspense 实现代码分割和异步加载组件。
优先级调度：使用 React.unstable_runWithPriority 函数设置任务优先级。
时间切片：通过 React.memo 记忆化组件，减少不必要的渲染。

Fiber 是 React 16.x 及以后版本所采用的协调算法，其核心目标在于提升 React 应用的渲染性能和响应能力。下面详细介绍 React Fiber 的核心技术点：

核心技术

1. 架构目标与动机

渲染性能优化：传统的协调算法在处理大型组件树时，可能会出现长时间阻塞主线程的情况，导致页面卡顿。Fiber 通过将渲染任务拆分成多个小任务，允许在渲染过程中暂停、恢复和重新排序任务，避免长时间占用主线程，从而提升渲染性能。
优先级调度：Fiber 架构支持任务优先级调度，能够根据任务的重要性和紧急程度对任务进行排序，优先处理高优先级的任务，如用户交互事件，提高应用的响应能力。

2. 核心概念

Fiber 节点：Fiber 节点是 Fiber 架构中的基本单元，每个 React 元素都对应一个 Fiber 节点。Fiber 节点包含了组件的状态、属性、副作用等信息，同时还维护了与其他 Fiber 节点的关系，如父节点、子节点和兄弟节点。
Fiber 树：由多个 Fiber 节点组成的树形结构，代表了 React 应用的组件树。Fiber 树有两棵，分别是 current 树和 workInProgress 树。current 树表示当前屏幕上显示的内容，workInProgress 树是正在构建的新树，构建完成后会替换 current 树。
任务调度：Fiber 架构将渲染任务拆分成多个小任务，每个任务对应一个 Fiber 节点的处理。调度器会根据任务的优先级和时间片来决定何时执行任务，确保高优先级任务能够及时处理。

3. 工作流程

调度阶段（Scheduler）：当组件的状态或属性发生变化时，React 会创建一个新的 workInProgress 树，并将任务添加到调度器中。调度器会根据任务的优先级和时间片来决定何时执行任务。如果当前有高优先级的任务（如用户交互事件），调度器会暂停当前正在执行的任务，优先处理高优先级任务。
协调阶段（Reconciler）：调度器选择一个任务后，会将其交给协调器处理。协调器会递归遍历 workInProgress 树，比较 current 树和 workInProgress 树的差异，标记出需要更新、插入或删除的节点。这个过程是可以暂停和恢复的，因为每个 Fiber 节点的处理都是一个独立的小任务。
提交阶段（Renderer）：当协调阶段完成后，所有的差异都已经标记好。提交阶段会将这些差异一次性应用到真实 DOM 上，更新页面显示。提交阶段是不可中断的，确保页面的一致性。

4. 优先级调度

任务优先级：Fiber 架构定义了多种任务优先级，如 ImmediatePriority（最高优先级，立即执行）、UserBlockingPriority（用户交互相关的高优先级任务）、NormalPriority（普通优先级任务）、LowPriority（低优先级任务）和 IdlePriority（空闲时执行的任务）。
优先级调度算法：调度器会根据任务的优先级和时间片来决定任务的执行顺序。高优先级的任务会优先执行，并且可以中断低优先级的任务。当高优先级任务执行完成后，低优先级任务会继续执行。

5. 异步渲染

时间切片：Fiber 利用时间切片技术，将渲染工作拆分成多个小任务，每个任务执行一段时间后暂停，将控制权交还给主线程，让主线程有机会处理其他事件，如用户交互、动画等。这样可以避免长时间阻塞主线程，提高应用的响应能力。
Suspense 和 Lazy 组件：Fiber 架构支持异步加载组件，通过 React.lazy 和 Suspense 可以实现代码分割和异步渲染。当组件需要异步加载时，Suspense 组件可以显示一个加载提示，直到组件加载完成。

6. 副作用处理

副作用（Effect）：在 React 中，副作用是指那些会影响外部环境的操作，如数据获取、订阅、DOM 操作等。Fiber 架构通过 useEffect 和 useLayoutEffect 等 Hooks 来处理副作用。
副作用调度：副作用的执行也遵循优先级调度原则。useEffect 会在提交阶段之后异步执行，不会阻塞页面渲染；useLayoutEffect 会在提交阶段同步执行，用于处理需要立即更新 DOM 的副作用。

react的fiber 用法

在 React 里，Fiber 是 React 16.x 及后续版本采用的协调算法，它把渲染工作分割成多个小任务，让 React 可以在渲染过程中暂停、恢复和复用任务，以此提升渲染性能与响应能力。在实际开发中，你无需直接操作 Fiber 节点&am…...

编程日记 2025/6/20 21:36:47

深度学习-学习笔记

文章目录 1、概述2、学习笔记2.1、pytorch 的环境配置 1、概述本篇博客用来记录我学习深度学习的学习笔记参考视频：PyTorch深度学习快速入门教程 PyTorch 是一个开源的机器学习框架，主要用于构建和训练深度学习模型。 2、学习笔记 2.1、pytorch 的环…...

编程日记 2025/6/20 21:22:10

[创业之路-390]：人力资源 - 社会性生命系统的解构与重构：人的角色嬗变与组织进化论

前言： 人、财、物、信息、机制、流程、制度、方法共同组合了一个持续的消耗资源、持续的价值创造、持续面临生存与发展、遗传与变异的社会性生命系统。 "人"是所有社会性生命系统最最基础性的要素，它弥漫在系统中多维立体空间的不同节点上&am…...

编程日记 2025/6/20 20:35:45

Redis常见面试题——List对象

当然可以！这里我帮你整理了一份【Redis中 List 结构】相关的高频面试题，并附上简明回答： 📚 Redis List 结构面试题（高频总结版） 1. Redis 中的 List 是什么？底层是什么实现的？ 答&…...

编程日记 2025/6/20 20:19:09

案例速成GO操作redis，个人笔记

更多个人笔记：（仅供参考，非盈利） gitee： https://gitee.com/harryhack/it_note github： https://github.com/ZHLOVEYY/IT_note 安装redis客户端：go get github.com/redis/go-redis/v9 注意go …...

编程日记 2025/6/20 20:36:52

什么是WebSocket？NGINX如何支持WebSocket协议？

大家好，我是锋哥。今天分享关于【什么是WebSocket？NGINX如何支持WebSocket协议？】面试题。希望对大家有帮助； 什么是WebSocket？NGINX如何支持WebSocket协议？ 1000道互联网大厂Java工程师精选面试题-Java…...

编程日记 2025/6/20 21:17:31

ssm驾校预约管理系统的设计与实现(源码+lw+部署文档+讲解)，源码可白嫖!

摘要伴随着我国社会的发展，人民生活质量日益提高。在人们出行方式上的体现就是，价格较为昂贵的代步工具——汽车，它的拥有率在我国越来越高了。而汽车的行驶速度很快，并且随着汽车拥有率的增加，城市中行驶和停靠的车…...

编程日记 2025/6/20 20:34:35

babel核心知识点

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015 版本的代码转换为向后兼容的 JavaScript 代码，以便在旧版本的浏览器或环境中运行。以下是 Babel 的核心知识点： 1. 基本概念编译器：Babel 本质上是一个编译器&…...

编程日记 2025/6/20 21:35:38

单调队列优化多重背包 #include <bits/stdc.h> using namespace std; const int M 2010; const int N 20010; int q[N]; int hh 0, tt -1; int f[N]; int g[N]; int v[M], w[M], s[M]; int n, m; int main() { cin >> n >> m; for (int i 1; …...

编程日记 2025/6/20 21:20:57

买币永续合约成全球交易热点，XBIT去中心化交易所平台显著提升市场流动性

在全球加密货币市场日益扩大的背景下，买币永续合约正展现出惊人的增长势头。虽然比特币自2021年黄金时期以来整体兴趣有所减弱，但永续合约市场表现亮眼，专业和机构交易者正从传统日历期货转向这一领域，使得永续合约占据了约66%的未…...

编程日记 2025/6/20 20:10:37

详解 `from datasets import load_dataset`：数据格式、公开数据集与自定义数据集实战指南

在自然语言处理（NLP）和机器学习领域，Hugging Face 的 datasets 库凭借其高效的数据加载和预处理能力成为开发者必备工具。本文通过代码示例详解 load_dataset 的核心用法，涵盖数据格式解析、公开数据集调用和自定义数据集构建。一、数据格式解析与加载示例 datasets 库支…...

编程日记 2025/6/20 21:06:04

Eclipse 插件开发 1

Eclipse 插件开发 1 1 创建 Eclipse 插件2 特点对比表3 总结对比表 Eclipse 是一个功能强大的集成开发环境(IDE)，最初为 Java 开发设计，但现在已经支持多种语言和平台。它的核心优势在于高度可扩展的插件架构，使开发者能够定制开发环境以满足…...

编程日记 2025/6/20 21:23:16

单链表专题(1)

1.什么是链表？ 链表是结构体变量与结构体变量连接在一起 2.动态创建一个链表动态内存申请模块化设计 1.创建链表（创建一个表头表示整个链表） 2.创建结点 3.插入结点 4.删除结点 5.打印遍历链表（测试） 3.创建链…...

编程日记 2025/6/20 20:33:23

[贪心_8] 跳跃游戏 | 单调递增的数字 | 坏了的计算器

目录 1.跳跃游戏题解 2.单调递增的数字证明 3.坏了的计算器题解解法一：正向推导解法二：正难则反 1.跳跃游戏链接： 55. 跳跃游戏给你一个非负整数数组 nums ，你最初位于数组的第一个下标。数组中的每个元素代表你…...

编程日记 2025/6/20 9:04:50

Python基于Django的全国二手房可视化分析系统【附源码】

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/6/19 22:08:17

Spring Boot 升级指南（2.x → 3.x）

🚀 Spring Boot 升级指南（2.x → 3.x） 🔢 1️⃣ 必读文档 📘 当您需要从 Spring Boot 2.x 升级时： • 官方迁移指南 → https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-3.0-Migration-…...

编程日记 2025/6/3 18:07:21

基于亚马逊云科技构建音频转文本无服务器应用程序

Amazon Transcribe是一项基于机器学习模型自动将语音转换为文本的服务。它提供了多种可以提高文本转录准确性的功能，例如语言自定义、内容过滤、多通道音频分析和说话人语音分割。Amazon Transcribe 可用作独立的转录服务，也可以集成到应用程序中提供语音…...

编程日记 2025/6/20 20:49:15

io_uring概述：现代 Linux 异步 IO 的新范式

一、引言在 Linux 系统中，I/O 性能一直是高性能服务器、数据库、存储系统的关键瓶颈。传统的 I/O 接口（如 read、write、poll、epoll）已经难以满足现代高吞吐低延迟场景的需求。io_uring 的诞生，正是为了解决这些传统 I/O 模型中…...

编程日记 2025/6/20 20:40:20

定制一款国密浏览器(12)：分析SM2签名算法的实现

SM2 是一种非对称加密算法，除了用来进行加密解密外，主要作用还用作数字签名。数字签名是私钥签名，公钥用来验签。由于私钥是不公开的，所以私钥签名还可以防抵赖。一般的签名流程如下：发送者对消息计算摘要值。发送者用私钥对摘要值进行签名得到签名值。发送者将原始消息…...

编程日记 2025/6/20 20:01:48

SSE协议

目录 SSE协议协议实现传输格式data 字段id 字段event 字段retry 字段前后端实现使用案例FastAPI SSE-STARLETTE 模拟大模型推理流🖥 代码：FastAPI SSE-STARLETTE 模拟大模型推理流 SSE协议 SSE，全称是 Server-Sent Events，是一…...

编程日记 2025/6/20 21:34:32

精益数据分析（25/126）：关键指标驱动业务发展

精益数据分析（25/126）：关键指标驱动业务发展在创业和数据分析的道路上，我们都在不断探索如何利用数据实现业务的增长与优化。今天，让我们一起深入学习《精益数据分析》中的关键知识点，通过实际案例来理解…...

编程日记 2025/6/20 20:46:09

基于Spring AI Alibaba + Spring Boot + Ollama搭建本地AI对话机器人API

前言 Spring AI Alibaba 开源项目基于 Spring AI 构建，是阿里云通义系列模型及服务在 Java AI 应用开发领域的最佳实践，提供高层次的 AI API 抽象与云原生基础设施集成方案，帮助开发者快速构建 AI 应用。项目地址 gitcode平台：ht…...

编程日记 2025/6/20 2:30:46

git 工具

Git教程 Git Bash详细教程 Git教程 Git Bash详细教程-CSDN博客 Download – TortoiseGit – Windows Shell Interface to Git...

编程日记 2025/6/20 19:54:45

利用【指针引用】对【非空单循环链表】进行删除操作

【非空单循环链表】是链式存储结构的其中一种，下面是各个词汇的意思： 先说【单】的意思： 这里指的是【单循环】的，另外在别的地方你会碰到一些不一样的循环链表，比如说是【多重链】的。单循环【单循环链表】常在表的…...

编程日记 2025/6/20 21:14:16

2025.4.26_STM32_SPI

1.SPI简介 2.硬件电路所有SPI设备的SCK(时钟)、MOSI(主机输出从机输入)、MISO(主机输入从机输出)分别连在一起。SCK线只能被主机控制，和I2C相同。主机另外引出多条SS控制线，分别接到各从机的SS引脚 (SS不用的时候为高电平，当主机需要选中某…...

编程日记 2025/6/20 20:19:57

基于OpenMV+STM32+OLED与YOLOv11+PaddleOCR的嵌入式车牌识别系统开发笔记

基于OpenMV、STM32与OLED的嵌入式车牌识别系统开发笔记基于OpenMV、STM32与OLED的嵌入式车牌识别系统开发笔记系统架构全景一、实物演示二、OpenMV端设计要点1. 硬件配置优化2. 智能帧率控制算法3. 数据传输协议设计三、PyTorch后端核心实现：YOLOv11与PaddleOCR的…...

编程日记 2025/6/20 20:58:18

当JIT遇见K8s

目录一、技术融合背景：从静态架构到动态生态的范式重构 1.1 动态编译技术的三次进化浪潮 1.2 容器编排系统的动态特性解剖弹性伸缩的数学建模服务质量（QoS）的编译场景适配硬件拓扑感知的编译优化二、关键技术挑战与突破性解决方案…...

编程日记 2025/6/20 21:10:47

单片机-89C51部分：4、固件烧录

飞书文档https://x509p6c8to.feishu.cn/wiki/M00gwFX3WilLe0kiAmBcPBUsnLc 接线通过USB线把开发板和电脑连接起来，如果电脑没有安装过USB转串口驱动，在设备管理器中就找不到COM口，而且会有驱动提示叹号，我们可以下载下方驱动安…...

编程日记 2025/6/20 3:28:26

7.13 GitHub Sentinel全链路测试实战：自动化框架+零误差传输，QPS提升6倍！

GitHub Sentinel全链路测试实战：自动化框架+零误差传输，QPS提升6倍 GitHub Sentinel Agent 用户界面设计与实现关键词：前后端联调测试、数据传输验证、接口稳定性测试、命令行工具测试、自动化测试框架测试前后端功能与数据传输稳定性 1. 全链路测试策略设计采用分层…...

编程日记 2025/6/20 20:28:55

stm32之EXIT外部中断详解

目录 1.引入: STM32F1031.1 中断路径上的3个部件1.2 STM32F103的GPIO中断1.1.1 GPIO控制器 -- AFIO1.1.2 EXTI1.1.3 NVIC1.1.4 CPU1. PRIMASK2. FAULTMASK3. BASEPRI 1.3 中断执行流程 2.旋转编码器介绍3.实验3.1 EXIT3.1.1 结构体3.1.2 函数 3.2 NVIC3.2.1 结构体3.2.2 函数 3…...

编程日记 2025/6/20 8:09:08

STM32 开发 - stm32f10x.h 头文件（内存映射、寄存器结构体与宏、寄存器位定义、实现点灯案例）

概述 STM32F10x.h 是 STM32F1 系列微控制器的核心头文件，提供了所有外设寄存器的定义和内存映射一、内存映射 #define PERIPH_BASE ((uint32_t)0x40000000)#define APB1PERIPH_BASE PERIPH_BASE #define APB2PERIPH_BASE (PERIPH_BASE 0x…...

编程日记 2025/6/20 19:58:21

UniApp 的现状与 WASM 支持的迫切性

一、UniApp 的跨平台优势与性能瓶颈 UniApp 凭借“一次开发，多端发布”的核心理念，已成为跨平台开发的主流框架之一。然而，随着移动应用场景的复杂化（如 3D 渲染、音视频处理、AI 推理），传统的 JavaScript…...

编程日记 2025/6/20 21:04:59

Prometheus、Zabbix和Nagios针对100个节点的部署设计架构图

编程日记 2025/6/20 20:59:25

坚果派已适配的鸿蒙版flutter库【持续更新】

坚果派已适配的鸿蒙版flutter库序号原仓版本适配仓文章解读是否完成1https://pub.dev/packages/fluttertoast8.2.12https://gitcode.com/nutpi/FlutterToasthttps://www.nutpi.net/thread?topicId1575是2https://pub.dev/packages/flutter_udid4.0.0https://gitcode.com/nut…...

编程日记 2025/6/2 6:46:36

代码随想录打卡|Day28 动态规划（理论基础、斐波那契数列、爬楼梯、使用最小花费爬楼梯）

动态规划 Part01 理论基础代码随想录讲解链接视频讲解链接斐波那契数力扣题目链接代码随想录链接视频讲解链接题目描述： 斐波那契数 （通常用 F(n) 表示）形成的序列称为斐波那契数列。该数列由 0 和 1 开始，后面的每一…...

编程日记 2025/6/20 21:10:59

《USB技术应用与开发》第四讲：实现USB鼠标

一、标准鼠标分析 1.1简介 1.2页面显示其中页面显示的“”不用管它，因为鼠标作为物理抓包，里面有时候会抓到一些错误，不一定是真正的通讯错误，很可能是本身线路接触质量不好等原因才打印出来的“”。 1.3按下鼠标左键 &#x…...

编程日记 2025/6/19 23:12:39

elk中kibana一直处于可用和降级之间且es群集状态并没有问题的解决方法

前言在公司部elk的时候发现kibana的web界面一直很卡，数据量为0也会很卡，es群集状态正常，资源足够。报错信息 [2025-03-17T09:54:50.19400:00][INFO ][status] Kibana is now available (was degraded) [2025-03-17T09:55:03.28000:00][I…...

编程日记 2025/5/31 23:56:43

2025.4.26总结

今天把马良老师的《职场十二法则》看完后，感触极大，这们课程就是一场职场启蒙课。虽然看过不少关于职场的书籍，但大多数是关于职场进阶，方法方面的。并没有解答“面对未来二三十年的职场生涯，我该怎么去看待自己的工…...

编程日记 2025/6/19 20:28:50

一、UI自动化测试01--认识和元素定位方法

目录一、自动化测试1. 自动化应用场景2. ⾃动化测试的优缺点3. ⾃动化测试的分类二、UI ⾃动测试1. 适合使用的项目2. 实现时机3. 常⻅的UI⾃动化测试⼯具4. Selenium 框架5. Web ⾃动化环境部署6. Web ⾃动化基本代码二、元素定位1. 浏览器开发者⼯具⽅法1: 直接获取信息⽅…...

编程日记 2025/6/19 23:11:00

目标检测原理简介

目标检测是一类计算机视觉任务，简单来说，目标检测可被定义为在计算机中输入一张图像，计算机需要找出图像中所有感兴趣的目标（物体），确定它们的类别和位置，如图一所示。目标检测是计算机视觉领域的核心问题之一，相较于最原始的将整张图片分类为某一类别，目标检测不光可…...

编程日记 2025/5/22 21:47:14

软件设计原则

开闭原则对扩展开放，对修改关闭。在程序需要进行拓展的时候，不能去修改原有的代码，实现一个热插拔的效果。简言之，是为了使程序的扩展性好，易于维护和升级。想要达到这样的效果，需要使用接口和抽象类。因…...

编程日记 2025/6/20 12:37:39

Postman脚本处理各种数据的变量

一、变量是字符串里列表， 如 "["100","101","102","103","108"]" //把字符串的变量处理成列表 var myListJSON.parse(pm.environment.get(giftTabId)) #giftTabId变量名 //设置随机取值 var rando…...

编程日记 2025/6/2 3:42:20

嵌入式硬件开发工具---万用表---示波器---仿真器

万用表主要功能： 测量交直流电压、电流测量电阻、二级管及电路通断其他----电容、频率、温度----特殊的万用表 * 检查电路是否正常 * 检查电路连接情况示波器主要功能： 以波形展示电信号随时间变化的关系主要指标： 带宽---大…...

编程日记 2025/6/1 10:51:14

数据预处理之特征选择（Feature Selection）

哈喽，大家好，我是我不是小upper~ 今天的文章和大家来聊聊数据与处理方法中常用的特征选择在开始说特征选择前，咱们先搞清楚这个所谓的“特征”到底是啥玩意儿。打个比方说，如果我们要训练一个模型来判断某个人是否会买一双运…...

编程日记 2025/6/1 7:59:56

Java基础 — 循环

介绍 Java基础循环是程序流程控制的核心结构，主要用于重复执行特定代码块。常见的循环包括for、while和do-while三种形式，开发者可根据不同场景灵活选择。合理使用循环关键字能有效提升代码执行效率。掌握循环结构的核心在于理解执行流程与条件判断的时…...

编程日记 2025/6/2 23:06:08

参考平面的宽度-信号与电源完整性分析

参考平面的宽度: 计算特征阻抗时假设参考平面是无限宽的平面。在参考平面的宽度远大于线宽或介质厚度时，这种假设是正确的。但是PCB板上的参考平面经常被反焊盘掏空，当互连线经过参考平面掏空区域附近时，掏空的局部互连线参考平面变窄&#x…...

编程日记 2025/6/20 15:16:17

【Linux】Centos7 安装 Docker 详细教程

一、安装步骤步骤一：确定你是Centos7及以上的版本 cat /etc/redhat-release 步骤二：卸载旧版本查看官方文档：CentOS | Docker Docs 步骤三：安装GCC等工具 1.首先确保 CentOS7 能上外网 ping www.baidu.com 2.更新 Centos7…...

编程日记 2025/6/2 15:42:12