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

react 18 可中断的理解以及应用

news 来源：原创 2025/8/25 0:05:29

React 的“可中断（interruptible）”渲染，指的是 React 在执行渲染过程中可以暂停、中断、再继续或放弃更新。这是 React 18 引入的并发特性的一部分，目的是让界面响应更流畅，防止“卡顿”。

📖 举个例子：传统 vs 可中断

✅ 传统（同步）渲染

当你更新一个组件（比如 setState），React 会一口气渲染完所有内容，期间浏览器不能响应用户操作。

问题：如果这个更新很大，比如更新 5000 个列表项，界面可能卡死几百毫秒，用户点击无响应。

✅ 可中断渲染（React 18 并发模式）

React 会：

把渲染分为多个小任务。
每执行一小段逻辑，就“让一让”给浏览器，比如让它响应滚动、输入、点击。
如果你中途发起了更重要的更新（如点击按钮），它甚至可以打断当前渲染并优先处理更紧急的事。

这就是“可中断”的意义。

🔧 怎么启用“可中断”？

React 18 开始，默认的渲染是同步的，要用 createRoot() 才能进入并发模式（可中断）：

// React 18
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

旧写法（ReactDOM.render）是不支持并发、不可中断的。

🧠 底层原理（简单了解下）

React 18 使用了所谓的Fiber 架构，它本质上是把渲染任务切成小块（Fiber 节点），然后用 requestIdleCallback 或 scheduler 在浏览器空闲时间执行这些任务。

可中断意味着：

React 可以暂停某个组件树的渲染。
React 可以放弃某个渲染（比如新来了更重要的 setState）。
React 可以重新调度优先级更高的任务。

🚀 应用场景举例

1. 大数据渲染

import React, { useState, startTransition } from 'react';
import { createRoot } from 'react-dom/client';const App = () => {const [list, setList] = useState([]);const [loading, setLoading] = useState(false);// 同步加载（不可中断）const handleSyncLoad = () => {setLoading(true);const data = Array.from({ length: 10000 }, (_, i) => `同步项 ${i}`);setList(data);setLoading(false);};// 可中断加载（使用并发 startTransition）const handleAsyncLoad = () => {setLoading(true);const data = Array.from({ length: 10000 }, (_, i) => `可中断项 ${i}`);startTransition(() => {setList(data);setLoading(false);});};return (<div style={{ padding: 20 }}><h2>React 可中断渲染演示</h2><button onClick={handleSyncLoad}>同步加载数据（会卡）</button><button onClick={handleAsyncLoad} style={{ marginLeft: 10 }}>可中断加载（更流畅）</button>{loading && <p>加载中...</p>}<ul>{list.map((item, i) => (<li key={i}>{item}</li>))}</ul></div>);
};const root = createRoot(document.getElementById('root'));
root.render(<App />);

使用可中断渲染 + 虚拟滚动技术可以防止页面卡顿。

2. 用户打字中，setState 不应卡住输入

你在输入框输入时，如果某些组件更新太慢，React 可中断那些不重要的更新，保证输入流畅。

✅ 总结一句话：

React 的“可中断渲染”就是让 UI 更新更聪明地调度：重要的先处理、不重要的先等会儿，有空再干。

react 18 可中断的理解以及应用

React 的“可中断（interruptible）”渲染，指的是 React 在执行渲染过程中可以暂停、中断、再继续或放弃更新。这是 React 18 引入的并发特性的一部分，目的是让界面响应更流畅，防止“卡顿”。 📖 举个例子&am…...

编程日记 2025/8/25 0:05:29

C++使用Qt Charts可视化大规模点集

引言数据可视化是数据分析和决策过程中的重要环节。随着数据量的不断增长，如何高效地可视化大规模数据集成为了一个挑战。Qt Charts 提供了一个强大的工具集，用于创建直观的数据可视化图表。本文将探讨如何使用 C 和 Qt Charts 可视化大规模点集&#…...

编程日记 2025/8/25 0:05:28

第一部分——Docker篇第二章 Docker安装

关于系统的改造探索开篇：系统改造的调研报告第一部分——Docker篇第一章 Docker容器第二章 Docker安装第三章构建自定义镜像第四章搭建镜像仓库第五章容器编排第六章容器监控文章目录关于系统的改造探索第一部分——Docker篇前言一、在线环境二、…...

编程日记 2025/8/22 22:03:23

Transformer - 多头自注意力机制复现

一、数学原理 1. 多头注意力机制多头注意力机制允许模型在不同的表示子空间中关注输入序列的不同部分。它通过并行计算多个注意力头来实现这一点，每个头学习序列的不同部分。 2. 注意力分数计算 3. 掩码机制掩码机制用于防止模型访问某些位置的信息。例如&…...

编程日记 2025/8/25 0:00:57

SpringCloud-快速通关（一）

本文是基于【雷丰阳老师：尚硅谷2025最新SpringCloud - 快速通关】进行实践操作，并对雷神的笔记做一个更详细的补充，供大家学习参考，一起加油！ 视频地址：SpringCloud快速通关_教程简介_哔哩哔哩_bilibili …...

编程日记 2025/8/21 21:06:42

Ansible Playbook详解：自动化配置管理的核心

1. 引言 Ansible Playbook是Ansible自动化系统的核心，它使用YAML格式描述一系列要在远程系统上执行的任务。通过Playbook，我们可以将复杂的IT操作转化为可重复、可版本控制的代码。本文将深入探讨Playbook的结构、语法和高级特性，帮助读者掌握编写高效、可维护的Playbook的…...

编程日记 2025/8/23 1:07:30

【实践总结】如何编写“多角色适配”的高质量技术文档？

一份文档想要“一稿多用”？先别急着开写！先读完这篇总结，你将学会如何拆解目标、设计结构、提升可读性，让文档不再顾此失彼。 🔍 背景：一文多用，常常适得其反在实际的软件项目中，我们往往希望通过一份设计文档，同时完成以下多个目标： ✅ 描述系统结构，便于团队成…...

编程日记 2025/8/20 15:28:34

Ansible 入门教程：从零开始掌握自动化运维

1. 引言在当今快速发展的IT环境中,自动化运维已成为提高效率、减少人为错误的关键。Ansible作为一个简单yet强大的自动化工具,正受到越来越多DevOps工程师的青睐。本文将带领读者从零开始,逐步掌握Ansible的核心概念和基本用法,为自动化运维之路打下坚实基础。 2. Ansible简…...

编程日记 2025/8/23 14:34:43

WSL2迁移教程：如何备份和转移Ubuntu子系统到新位置

WSL2迁移教程：如何备份和转移Ubuntu子系统到新位置文章目录 WSL2迁移教程：如何备份和转移Ubuntu子系统到新位置前言环境准备迁移步骤详解1. 查看当前WSL发行版状态2. 关闭所有WSL实例3. 导出WSL发行版4. 注销原有WSL发行版5. 导入WSL发行版到新位置6. 验…...

编程日记 2025/8/20 2:26:38

【备赛】eeprom

简介 EEPROM即电可擦可编程只读存储器，属于非易失存储芯片。它能电擦除、多次编程，支持字节级操作。掉电后数据不丢失。蓝桥杯嵌入式的eeprom使用AT24C02，使用IIC通信协议。驱动的函数官方已经写好，我们只需要移植并使用就…...

编程日记 2025/8/23 8:06:52

Pytorch torch.utils.data.dataloader.default_collate 介绍

torch.utils.data.dataloader.default_collate 是 PyTorch 中 DataLoader 默认的 collate_fn 函数，用于将一个批次的样本数据合并成张量（Tensor）或其他结构化数据格式。以下是关于 default_collate 的详细介绍： 1. 功能 default…...

编程日记 2025/8/20 1:19:21

Github最新AI工具汇总2025年4月份第2周

根据GitHub官方动态及开发者生态最新进展，以下是2025年4月第二周（截至4月7日）值得关注的AI工具与技术更新汇总： 1. GitHub Copilot Agent Mode全量发布核心功能：在VS Code中启用Agent模式后，Copilot可自主…...

编程日记 2025/8/21 1:35:32

2013年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2013年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/20 5:19:42

LabVIEW 开发如何降本增效

在 LabVIEW 开发领域，如何在确保项目质量的同时降低开发成本，是众多企业和开发者共同关注的焦点。这不仅关乎资源的高效利用，更影响项目的投资回报率和市场竞争力。下面，我们将从多个维度深入剖析降本策略，并结合具体案…...

编程日记 2025/8/21 21:31:18

云存储服务器的作用都有哪些？

云存储服务器是一种用来存储和管理企业数据信息的服务器，可以为企业与组织提供一个可靠、安全和可扩展的存储平台，能够帮助个人和企业将数据信息存储在云端，以此来实现数据信息的备份、共享和访问功能。云存储服务器支持多个用户共同访问和共…...

编程日记 2025/8/19 2:54:57

可编辑33页PPT | AI智能智慧工厂厂区完全整体解决方案

荐言摘要：AI智能智慧工厂厂区完全整体解决方案是一种集成了先进的人工智能技术、工业自动化系统和创新管理理念的综合性方案，旨在提升生产效率、降低成本、实现灵活生产，并推动工厂的智能化发展。随着技术的不断进步，工厂架构经…...

编程日记 2025/8/19 5:37:34

vmware虚拟机上Ubuntu或者其他系统无法联网的解决方法

一、检查虚拟机是否开启了网络服务打开方式：控制面板->-管理工具--->服务查找 VMware DHCP Service 和VMware NAT Service ，确保这两个服务已经启动。如下图，没有启动就点击启动。二、设置网络类型我们一般使用前两种多一些&…...

编程日记 2025/8/23 18:01:33

python中pyside6多个py文件生成exe

网上见到的教程大多数都是pyinstaller安装单个py文件，针对多个py文件的打包，鲜有人提及；有也是部分全而多的解释，让人目不暇接，本次记录自己设置一个声波捕捉界面的打包过程。 1.pycharm中调用pyinstaller打包参考链接：https://blog.csdn.net/weixin_45793544/articl…...

编程日记 2025/8/20 1:36:55

P1006 [NOIP 2008 提高组] 传纸条题解

题目传送门前言每次准备摸鱼时都在这道题的界面。今天有空做做，顺便写一波题解，毕竟估值蹭蹭往下跳。双倍经验：P1004 [NOIP 2000 提高组] 方格取数，P1006 [NOIP 2008 提高组] 传纸条。题意简述现有一个 m m m 行 n …...

编程日记 2025/8/24 18:13:11

linux下编译Websocketpp，适用x86和armv8

编译boost库下载源文件：Version 1.79.0 编译： sudo ./bootstrap.sh sudo ./b2 install 安装websocketpp git clone https://github.com/zaphoyd/websocketpp.git cd websocketpp #进入目录 mkdir build cd build cmake .. make sudo make ins…...

编程日记 2025/8/22 5:11:44

skynet.dispatch 使用详解

目录 skynet.dispatch 函数详解1. 函数定义与参数2. 消息处理流程3. 使用示例示例 1：处理 Lua 协议消息示例 2：处理自定义协议消息 4. 关键机制(1) 协程与阻塞操作(2) 消息响应 5. 与 skynet.register_protocol 的协作6. 注意事项7. 典型应用场景总结 s…...

编程日记 2025/8/17 23:06:14

CondaError: Run ‘conda init‘ before ‘conda activate‘

CondaError: Run conda init before conda activate，表明 Conda 环境未正确初始化，导致无法激活目标环境。以下是具体解决方案： 1. 初始化 Conda Conda 需要先初始化才能使用 activate 命令。根据Linux系统，运行以下命令初始化 B…...

编程日记 2025/8/21 15:58:27

从代码学习深度学习 - 序列到序列学习数据预处理 PyTorch 版

文章目录前言一、数据读取二、文本预处理三、词元化四、构建词表五、截断和填充六、转换为张量七、数据迭代器总结前言在深度学习领域，序列到序列（Seq2Seq）模型是一种非常重要的架构，广泛应用于机器翻译、文本摘要和对话生成等任务。在实现 Seq2Seq 模型时，数据的预处理…...

编程日记 2025/8/23 4:33:54

SQL：Primary Key（主键）和Foreign Key（外键）

编程日记 2025/8/22 21:53:59

ClickHouse接入prometheus监控

ClickHouse接入prometheus监控在 ClickHouse 集群环境下（假设你有 3 台服务器），使用自带的 Prometheus 端点来监控是完全可行的。集群部署意味着你需要为每台服务器配置 Prometheus 端点，并确保 Prometheus 能够从所有节点采集数…...

编程日记 2025/8/17 23:33:47

轻量级UDP流量重放工具的技术实现与场景应用（C/C++代码实现）

在网络协议测试、安全攻防演练、性能调优等领域，精确控制数据包传输行为是核心需求。udp_replay作为一款专注于UDP流量的开源工具，通过简洁的设计实现了对pcap文件中UDP数据流的灵活重放。本文将从技术实现原理、核心功能亮点及典型应用场景三个维度展开…...

编程日记 2025/8/22 18:26:58

时序数据库 TDengine × Excel：一份数据，两种效率

在日常工作中，很多人都离不开 Excel。不论是设备运维工程师、数据分析师，还是业务人员，一份熟悉的电子表格往往就是他们的“第一张报表”。现在，TDengine 也可以与 Excel 实现无缝连接，用户可以直接在 Excel 中查询时…...

编程日记 2025/8/23 17:21:37

video自动播放

文章目录前言在iOS系统中，H5页面的自动播放功能受到了一些限制，为了提升用户体验和保护用户隐私，Safari浏览器对于自动播放的行为做了一些限制。一、自动播放的限制二、解决方案前言在iOS系统中，H5页面的自动播放功能受到了一…...

编程日记 2025/8/24 17:21:05

如何利用AI智能生成PPT，提升工作效率与创意表现

如何利用AI智能生成PPT，提升工作效率与创意表现！在这个信息爆炸的时代，制作一份既专业又富有创意的PPT，已经不再是一个简单的任务。尤其是对于每天都需要做报告、做展示的职场人士来说，PPT的质量直接影响着工作效率和个…...

编程日记 2025/8/22 2:28:06

Java8+Spring Boot + Vue + Langchain4j 实现阿里云百炼平台 AI 流式对话对接

1. 引言在本文中，我们将介绍如何使用 Spring Boot、Vue.js 和 Langchain4j，实现与阿里云百炼平台的 AI 流式对话对接。通过结合这些技术，我们将创建一个能够实时互动的 AI 聊天应用。这是一个基于 Spring Boot Vue.js Langchain4j 的智…...

编程日记 2025/8/21 7:37:12

【scikit-learn基础】--『数据加载』之外部数据集

这是scikit-learn数据加载系列的最后一篇，本篇介绍如何加载外部的数据集。外部数据集不像之前介绍的几种类型的数据集那样，针对每种数据提供对应的接口，每个接口加载的数据都是固定的。而外部数据集加载之后，数据的字段和类型是…...

编程日记 2025/8/19 19:53:17

Redis原理：keys命令

语法： keys pattern 返回所有符合pattern的key 支持 glob-style patterns: h?llo matches hello, hallo and hxlloh*llo matches hllo and heeeelloh[ae]llo matches hello and hallo, but not hilloh[^e]llo matches hallo, hbllo, ... but not helloh[a-b]llo ma…...

编程日记 2025/8/19 6:48:34

4.7学习总结可变参数+集合工具类Collections+不可变集合

可变参数： 示例： public class test {public static void main(String[] args) {int sumgetSum(1,2,3,4,5,6,7,8,9,10);System.out.println(sum);}public static int getSum(int...arr){int sum0;for(int i:arr){sumi;}return sum;} } 细节&#xff1a…...

编程日记 2025/8/21 10:29:11

高级java每日一道面试题-2025年3月24日-微服务篇[Nacos篇]-使用Nacos如何实现配置管理？

如果有遗漏,评论区告诉我进行补充面试官: 使用Nacos如何实现配置管理？ 我回答: 在Java高级面试中讨论如何使用Nacos实现配置管理的综合回答在Java高级面试中，关于如何使用Nacos实现配置管理，可以从以下几个方面进行全面、深入的阐述&am…...

编程日记 2025/8/21 14:15:41

Exce格式化批处理工具详解：高效处理，让数据更干净！

Exce格式化批处理工具详解：高效处理，让数据更干净！ 1. 概述在数据分析、报表整理、数据库管理等工作中，数据清洗是不可或缺的一步。原始Excel数据常常存在格式不统一、空值、重复数据等问题，影响数据的准确性和可用…...

编程日记 2025/8/24 5:22:01

CExercise_06_1指针和数组_1查找数组的最大值和最小值

题目： 查找数组的最大值和最小值，但要将最大值作为返回值返回，最小值则依靠传入的指针完成赋值。要求不能使用"[]"运算符。函数的声明如下： int max_min(int *arr, int len, int *pmin); 关键点 1) * 运算符用于解引用…...

编程日记 2025/8/20 21:16:09

redis中的hash

Redis中的hash是什么 Hash: 哈希，也叫散列，是一种通过哈希函数将键映射到表中位置的数据结构，哈希函数是关键，它把键转换成索引。 Redis Hash（散列表）是一种 field-value pairs（键值对&#x…...

编程日记 2025/8/20 17:13:07

【学习笔记】李沐斯坦福21秋季：实用机器学习中文版

这里写自定义目录标题数据处理数据获取数据标注数据清洗特征工程数据处理数据获取爬虫实际工作中大部分都是从数据库里取数数据标注只有一小部分有标签大部分无标签的话半监督学习：没标注数据和有标注数据共同使用做法1:半监督学习基于有标签的小部分…...

编程日记 2025/8/22 4:21:10

UE5学习笔记 FPS游戏制作43 UI材质

文章目录实现目标制作UI材质使用UI材质实现目标把图片变为灰色制作UI材质右键新建一个材质左侧细节栏，材质域改为用户界面，混合模式改为半透明此时输出节点应该有两个属性在内容浏览器里找到要用的图片，然后向上拖动到材质标题…...

编程日记 2025/8/22 15:38:24

QT控件修改QtTreePropertyBrowser自定义属性编辑器源码，添加第一列标题勾选，按钮，右键菜单事件等功能

头阵子遇到一个需要修改QtTreePropertyBrowser控件的需求，QT开发做这么久了，这个控件倒是第一次用，费了点时间研究，在这里做个简单的总结。 QtTreePropertyBrowser控件是 Qt 解决方案 (Qt Solutions) 中的一个组件，用…...

编程日记 2025/8/24 14:57:42

MFC工具栏CToolBar从专家到小白

编程日记 2025/8/19 2:05:31

Golang 项目平滑重启

引言平滑重启（Graceful Restart）技术作为一种常用的解决方案，通过允许新进程接管而不中断现有的请求，确保了系统的稳定运行和业务连续性。同时目前公司的服务重启绝大部分也都适用的 go 的平滑重启技术。本部分将对平滑重启的…...

编程日记 2025/8/22 11:53:51

Vue2 插槽 Slot

提示：插槽的目的是让我买原来的设备具备更多的扩展性。文章目录前言在组件中定义插槽（子组件视角）1. 默认插槽2. 具名插槽（带名称的插槽）3. 作用域插槽（带数据的插槽） 使用插槽（父…...

编程日记 2025/8/21 17:59:04

关于sqlsugar实体多层List映射的问题

如上图所示，当一个主表（crm_fina_pay_req）的子表list<文件附件关系表>（ List<crm_fina_payreq_evidofpay_relation> ）中，还包含有sysfile（SysFile SysFiles）类型的文件信…...

编程日记 2025/8/20 19:10:22

使用stm32cubeide stm32f407 lan8720a freertos lwip 实现udp client网络数据转串口数据过程详解

1前言项目需要使用MCU实现网络功能，后续确定方案stm32f407 外接lan8720a实现硬件平台搭建，针对lan8720a也是用的比较多的phy，网上比较多的开发板，硬件上都是选用了这个phy，项目周期比较短，选用了这个常用…...

编程日记 2025/8/23 10:31:29

LangChain4j（4）：预设角色(系统消息SystemMessage)

1 预设角色(系统消息SystemMessage) 基础大模型是没有目的性的， 你聊什么给什么，但是如果我们开发的事一个智能票务助手， 我需要他以一个票务助手的角色跟我对话， 并且在我跟他说”退票”的时候， 让大模型一定要告诉我…...

编程日记 2025/8/17 22:15:48

自然语言处理利器NLTK：从入门到核心功能解析

文章目录一、NLP领域的基石工具包二、NLTK核心模块全景解析1 数据获取与预处理2 语言特征发现3 语义与推理三、设计哲学与架构优势1 四维设计原则2 性能优化策略四、典型应用场景1 学术研究2 工业实践五、生态系统与未来演进一、NLP领域的基石工具包自然语言工具包&…...

编程日记 2025/8/22 16:08:08

常见接口协议介绍

1. I2C（Inter-Integrated Circuit） 定义：两线制串行总线（SDA数据线 SCL时钟线），支持主从模式多设备通信。特点： 地址机制：每个设备有唯一地址，主设备通过地址选择从设备…...

编程日记 2025/8/21 11:33:28

宝塔面板使用CDN 部署后获取真实客户端 IP教程

在宝塔面板环境中配置 CDN 加速服务后，服务器日志默认记录的是 CDN 节点 IP，这给网站流量分析带来不便。本文将为您提供多种解决方案，帮助您在 CDN 生效的同时获取真实访客 IP。一、Nginx 配置调整方案日志格式优化在宝塔面板中打开 Ngi…...

编程日记 2025/8/20 22:15:47

生鲜果蔬便利店实体零售门店商城小程序

——线上线下融合赋能社区零售新生态随着新零售模式的深化和消费者需求的升级，生鲜果蔬便利店亟需通过数字化工具实现经营效率与用户体验的双重提升。结合线下实体门店与线上商城的一体化小程序，成为行业转型的核心工具。以下从功能模块、运营策略及行…...

编程日记 2025/8/24 8:50:09