React中startTransition的使用
// 引入 React 的 Hook API：useState 管理状态、useTransition 处理非紧急更新、useMemo 缓存计算结果
import { useState, useTransition, useMemo } from 'react';/*** List 组件：* 根据输入的 query 动态渲染一个包含 10000 条数据的列表*/
function List({ query }) {// 固定字符串，用于展示匹配内容const word = 'hello word';// 使用 useMemo 缓存生成的列表项，避免重复创建大量 DOM 节点，提升性能const items = useMemo(() => {const arr = [];if (query.trim() === '') {// 如果 query 为空，则显示默认的 10000 个 "hello word"for (let i = 0; i < 10000; i++) {arr.push(<li key={i}>hello word</li>);}} else if (word.includes(query)) {// 如果 query 包含在 word 中，则拆分并高亮显示匹配内容const splitArr = word.split(query);for (let i = 0; i < 10000; i++) {arr.push(<li key={i}>{/* 高亮显示 query 内容 */}{splitArr[0]}<span style={{ color: 'red' }}>{query}</span>{splitArr[1]}</li>);}}return arr;}, [query]); // 只有当 query 改变时才重新计算// 渲染无序列表return <ul>{items}</ul>;
}/*** App 主组件：* 控制输入框与列表之间的交互逻辑*/
function App() {// search：控制输入框内容（立即更新）const [search, setSearch] = useState('');// query：控制 List 显示的内容（可延迟更新）const [query, setQuery] = useState('');// isPending：表示当前是否处于过渡状态（即非紧急更新中）const [isPending, startTransition] = useTransition();/*** 输入框变化事件处理函数* - 立即更新 search（保持 UI 响应）* - 使用 startTransition 延迟更新 query（优化性能）*/const handleChange = (e) => {const value = e.target.value;setSearch(value); // 紧急更新，确保输入框即时响应startTransition(() => {setQuery(value); // 非紧急更新，React 会优先处理用户可见的变化});};return (<>hello App{/* 输入框，绑定 value 和 onChange 事件 */}<input type="text" value={search} onChange={handleChange} />{/* 过渡期间显示加载提示 */}{isPending ? <p>加载中...</p> : null}{/* 将 query 传递给 List 组件进行内容渲染 */}<List query={query} /></>);
}// 导出 App 组件供其他模块使用
export default App;📌 注释说明总结：
| 模块 | 作用 |
|---|---|
useState | 管理组件内部状态 |
useTransition | 实现非紧急状态更新，提升用户体验流畅度 |
useMemo | 缓存复杂计算结果，避免重复渲染造成的性能浪费 |
List 组件 | 展示大量数据，并支持关键词高亮 |
App 组件 | 控制输入框与数据展示的交互逻辑 |
相关文章：
React中startTransition的使用
// 引入 React 的 Hook API：useState 管理状态、useTransition 处理非紧急更新、useMemo 缓存计算结果 import { useState, useTransition, useMemo } from react;/*** List 组件：* 根据输入的 query 动态渲染一个包含 10000 条数据的列表*/ function Li…...
Reactor (epoll实现基础）
Reactor 是什么？ Reactor 网络模型是一种高性能的事件驱动模型，广泛应用于网络编程中。它通过 I/O 多路复用技术，实现了高效的事件处理和系统吞吐量的优化。 核心概念 Reactor 模型_的核心是事件驱动，即当 I/O 事件准备就绪时_…...
php fiber 应用
参考 基于 PHP Fiber（纤程）的游戏开发分析-腾讯云开发者社区-腾讯云PHP 8.1 引入的 Fibers 为游戏开发带来新机遇，能管理渲染、物理计算等任务且不阻塞主线程。它支持并发，提升效率，简单易用，但也有局限&a…...
前端扫盲HTML
文章目录 下载、安装、运行第一个代码（hello world）创建代码文件编辑代码（hello world）HTML常见标签注释标签标题标签段落标签换行标签格式化标签图片标签表格标签列表标签表单标签下拉菜单无语义标签 参考文档 下载、安装、运行第…...
RAG与微调：企业知识库落地的技术选型
从本质上看，RAG是"让模型查阅外部知识"，而微调是"让模型学会并内化知识"。这一根本差异决定了它们在不同场景下的适用性。 技术选型的关键依据 场景RAG微调说明模型定制化需求❌✅微调更适合塑造特定风格、口吻和人格特征硬件资源…...
Linux安全篇 --firewalld
一、Firewalld 防火墙概述 1、Firewalld 简介 firewalld 的作用是为包过滤机制提供匹配规则(或称为策略)，通过各种不同的规则告诉netfilter 对来自指定源、前往指定目的或具有某些协议特征的数据包采取何种处理方式为了更加方便地组织和管理防火墙,firewalld 提供…...
关于Android Studio for Platform的使用记录
文章目录 简单介绍如何使用配置导入aosp工程配置文件asfp-config.json 简单介绍 Android Studio for Platform是google最新开发，用来阅读aosp源码的工具 详细的资料介绍： https://developer.android.google.cn/studio/platform 将工具下载下来直接点击…...
搜索引擎工作原理｜倒排索引｜query改写｜CTR点击率预估｜爬虫
写在前面 使用搜索引擎是我们经常做的事情，搜索引擎的实现原理。 什么是搜索引擎 搜索引擎是一种在线搜索工具，当用户在搜索框输入关键词时，搜索引擎就会将与该关键词相关的内容展示给用户。比较大型的搜索引擎有谷歌，百度&…...
【找工作系列①】【大四毕业】【复习】巩固JavaScript，了解ES6。
文章目录 前言Tasks:复习笔记：JavaScript是什么？JavaScript有什么用或者换句话说 是做什么的？JavaScript由哪几部分组成？BOM?DOM?html文件中script标签放在哪里?🧩 1. **放在 ****<head>**** 中**✅ 优点&…...
Oracle 11.2.0.4 pre PSU Oct18 设置SSL连接
Oracle 11.2.0.4 pre PSU Oct18 设置SSL连接 1 说明2 客户端配置jdk环境3服务器检查oracle数据库补丁4设置ssla 服务器配置walletb 上传测试脚本和配置文件到客户端c 服务器修改数据库侦听和sqlnet.orad 修改客户端的sqlnet.ora和tnsnames.ora的连接符e 修改java代码的数据连接…...
本地部署开源网盘系统 kiftd 并实现外部访问（Linux 版本）
kiftd 是一款专为个人、团队及小型组织设计的开源网盘系统，兼具便捷性、跨平台兼容性与丰富的功能，成为替代传统文件共享工具的理想选择。 本文将详细介绍如何在 Linux 系统本地部署 kiftd 并结合路由侠实现外网访问本地部署的 kiftd 。 第一步&#x…...
ECS/GEM是半导体制造业的标准通信协议中host和equipment的区别是什么，在交互过程中，如何来定位角色谁为host，谁为equipment
文章目录 一、角色定义与核心区别1. Host（主机）2. Equipment（设备）3. Host与Equipment的核心区别 二、交互过程中的角色定位1. 交互方向2. 控制层级3. 交互过程中角色的定位方法3.1. 通信发起方向3.2. 协议功能与状态管理3.3. 物理…...
5000 字总结CSS 中的过渡、动画和变换详解
CSS 中的过渡、动画和变换详解 一、CSS 过渡（Transitions） 1. 基本概念 CSS 过渡是一种平滑改变 CSS 属性值的机制，允许属性值在一定时间内从一个值逐渐变化到另一个值，从而创建流畅的动画效果。过渡只能用于具有中间值的属性&…...
2025年渗透测试面试题总结-安恒[实习]安全工程师（题目+回答）
网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 安恒[实习]安全工程师 一面 1. 自我介绍 2. 前两段实习做了些什么 3. 中等难度的算法题 4. Java的C…...
WebXR教学 09 项目7 使用python从0搭建一个简易个人博客
WebXR教学 09 项目7 使用python从0搭建一个简易个人博客（1） 前期设计规划 功能 呈现个人博客文章 技术选型 HTMLCSSJSPythonFlask 环境准备 VS Code Python3.8 代码实现 包 # 创建虚拟环境（-m 会先将模块所在路径加入 sys.path,更适…...
c++从入门到精通（五）--异常处理，命名空间，多继承与虚继承
异常处理 栈展开过程： 栈展开过程沿着嵌套函数的调用链不断查找，直到找到了与异常匹配的catch子句为止；也可能一直没找到匹配的catch，则退出主函数后查找过程终止。栈展开过程中的对象被自动销毁。 在栈展开的过程中，…...
开源安全大模型Foundation-Sec-8B实操
一、兴奋时刻 此时此刻，晚上22点55分，从今天早上6点左右开始折腾，花费了接近10刀的环境使用费，1天的休息时间，总算是把Foundation-Sec-8B模型跑起来了，中间有两次胜利就在眼前，但却总在远程端口转发环节出问题，让人难受。直到晚上远程Jupyter访问成功那一刻，眉开眼笑，…...
现代优化算法全解析：禁忌搜索算法、模拟退火算法、遗传算法、蚁群优化算法、人工神经网络
现代优化算法全解析：禁忌搜索算法、模拟退火算法、遗传算法、蚁群优化算法、人工神经网络 引言：为什么需要优化算法？ 在当今这个数据驱动的时代，优化算法已成为计算机科学、工程设计、人工智能等领域的核心工具。无论是训练神经…...
Docker常见命令解读
上图是对docker常见命令的一个图解，方便大家理解，下面，我将对这些命令做一些解释。 一、镜像生命周期管理 1. 镜像构建（Build） docker build -t my-image . # 根据Dockerfile构建镜像 Dockerfile：…...
为什么 Docker 建议关闭 Swap
在使用 Docker 时，关闭系统 Swap（交换分区） 是一个常见的推荐做法，尤其是在生产环境中。虽然 Docker 不强制要求禁用 Swap，但出于性能、稳定性、可控性和资源管理的目的，通常建议这样做。 为什么 Docker 建…...
TIFS2024 | CRFA | 基于关键区域特征攻击提升对抗样本迁移性
Improving Transferability of Adversarial Samples via Critical Region-Oriented Feature-Level Attack 摘要-Abstract引言-Introduction相关工作-Related Work提出的方法-Proposed Method问题分析-Problem Analysis扰动注意力感知加权-Perturbation Attention-Aware Weighti…...
WPS PPT设置默认文本框
被一个模板折磨了好久，每次输入文本框都是很丑的24号粗体还有行标，非常恶心，我甚至不知道如何描述自己的问题，非常憋屈，后来终于知道怎么修改文本框了。这种软件操作问题甚至不知道如何描述问题本身，非常烦…...
支持selenium的chrome driver更新到136.0.7103.94
最近chrome释放新版本：136.0.7103.94 如果运行selenium自动化测试出现以下问题，是需要升级chromedriver才可以解决的。 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only su…...
“下一辆车还买小米”
大家好，我是小悟。 就在5月13日，江西上饶德兴街头，一辆紫色小米SU7 Max停在路边，却遭遇了一场堪比灾难片的意外。 一辆满载货物的大货车因手刹故障溜坡，径直撞向SU7，两车从两米高的落差坠落，货…...
opencv4.11生成ArUco标记 ArUco Marker
从opencv4.7开始aruco有了一些变化 以下是opencv4.11生成ArUco标记的小例子 #include <iostream> #include <opencv2/opencv.hpp> #include <opencv2/objdetect/aruco_detector.hpp>int main() {cv::Mat markerImage;cv::aruco::Dictionary dictionary cv…...
从辅助到协作：GitHub Copilot的进化之路
如果说现代程序员的标配工具除了VS Code、Stack Overflow之外，还有谁能入选，那一定是GitHub Copilot。从2021年首次亮相，到如今深度集成进开发者日常流程，这个“AI编程助手”已经不只是写几行自动补全代码的小帮手了，而…...
QMK 宏（Macros）功能详解（实战部分）
QMK 宏（Macros）功能详解（实战部分） 一、宏的基本概念与作用 宏（Macros）是 QMK 固件中一项强大的功能，它允许您在按下单个按键时执行多个按键操作。通过宏，您可以： 输入常用短语或文本执行复杂的按键组合自动化重复性操作触发系统功能或快捷键🔔 安全提示：虽然可以…...
SVN 版本控制入门指南
SVN 版本控制系统详细入门指南 一、SVN 基础概念详解 1. 什么是版本控制？ 版本控制是一种记录文件变化的系统，可以： 追踪文件的修改历史查看每次修改的内容恢复到任意历史版本协调多人协作开发 2. SVN 核心概念 2.1 仓库（Re…...
6to4、6over4的类比解释
本文由deepseek生成，特此声明 1. 6to4：自动的“快递中转站” 类比场景： 假设你住在一个偏远的小镇（IPv6网络），周围被大海（IPv4互联网）包围，你想给另一个偏远小镇&#…...
跨国应用程序的数据存储方案常见的解决方案
一、数据隐私与合规性 跨国数据存储方案必须遵守不同国家和地区的数据隐私法律和规定，例如： GDPR（欧盟一般数据保护条例）CCPA（加利福尼亚消费者隐私法案）各国的本地数据存储法规解决方案： 采用本地化存储：在不同国家或地区设立数据存储中心，以遵循当地的法律和隐私要…...
JSP链接MySQL8.0（Eclipse+Tomcat9.0+MySQL8.0）
所用环境 Eclipse Tomcat9.0 MySQL8.0.21(下载：MySQL Community Server 8.0.21 官方镜像源下载 | Renwole） mysql-connector-java-8.0.21（下载：MySQL :: Begin Your Download） .NET Framework 4.5.2（下…...
基于KAN+Transformer的专业领域建模方法论
一、专业领域KAN方法创新路径 1. 领域函数分解策略 数学建模：针对专业领域特性设计专用基函数组合 医学影像：采用小波变换基函数分解图像特征 class WaveletKAN(nn.Module): def __init__(self): self.wavelet_basis nn.Par…...
Go语言 Gin框架 使用指南
Gin 是一个用 Go (Golang) 编写的 Web 框架。 它具有类似 martini 的 API，性能要好得多，多亏了 httprouter，速度提高了 40 倍。 如果您需要性能和良好的生产力，您一定会喜欢 Gin。Gin 相比于 Iris 和 Beego 而言，更倾向…...
内容安全：使用开源框架Caffe实现上传图片进行敏感内容识别
上传图片进行敏感内容识别 预览效果 环境准备 Ubuntu 16.04python 2.7.12caffe 1.0.0 安装调试环境: sudo apt-get update sudo apt-get install -y --no-install-recommends build-essential cmake git wget libatlas-base-dev libboost-all-dev libgflags-dev sudo apt-g…...
缓慢变化维度（SCD）策略
缓慢变化维度（SCD）策略 缓慢变化维度（SCD）策略是数据仓库中处理维度属性随时间变化的核心技术，根据业务需求的不同，主要分为以下类型： 1. SCD Type 0（固定维度） 定义&a…...
【Mysql】详解InnoDB存储引擎以及binlog，redelog，undolog+MVCC
1.InnoDB存储引擎 在Mysql中，InnoDB存储引擎是默认的，也是我们最常用的一个存储引擎，其中分为内存结构和磁盘结构两大部分，整体架构图如下： 1.1Buffer Pool Buffer pool(缓存区)是Mysql内存的一个主要区域࿰…...
面向对象详解和JVM底层内存分析
神速熟悉面向对象 表格结构和类结构 我们在现实生活中，思考问题、发现问题、处理问题，往往都会用“表格”作为工具。实际上，“表格思维”就是一种典型的面向对象思维。 实际上，互联网上所有的数据本质上都是“表格”。我们在这里…...
C语言指针深入详解（一）：内存和地址、指针变量和地址、指针变量类型的意义、指针运算
目录 一、内存和地址 （一）内存 （二）如何理解编址 二、指针变量和地址 （一）取地址操作符（&） （二）指针变量和解引用操作符（*）…...
MATLAB中进行深度学习网络训练的模型评估步骤
文章目录 前言环境配置一、基础性能评估二、高级评估指标三、模型解释与可视化四、交叉验证与模型选择五、部署前的优化 前言 在 MATLAB 中进行深度学习网络训练后的模型评估是确保模型性能和可靠性的关键环节。以下是详细的评估步骤和方法。 环境配置 MATLAB下载安装教程&…...
30、WebAssembly：古代魔法——React 19 性能优化
一、符文编译术（编译优化） 1. 语言选择与量子精简 // Rust编译优化 cargo build --target wasm32-wasi --release 魔法特性： • 选择低运行时开销语言（如Rust/C），编译后文件比Swift小4倍 • --rel…...
Python集合运算：从基础到进阶全解析
Python基础：集合运算进阶 文章目录 Python基础：集合运算进阶一、知识点详解1.1 集合运算（运算符 vs 方法）1.2 集合运算符优先级1.3 集合关系判断方法1.4 方法对比 二、说明示例2.1 权限管理系统2.2 数据去重与差异分析2.3 数学运算…...
【开源Agent框架】Suna架构设计深度解析与应用实践
一、项目基本介绍 Suna是一款全栈开源的通用型AI代理系统，其名称源自日语"砂"的发音，寓意如流沙般渗透到各类数字任务中。项目采用Apache 2.0协议，由Kortix AI团队维护，核心开发者包括Adam Cohen Hillel等三位主要贡献者。 技术架构全景 系统由四大核心组件构…...
C++类与对象--2 对象的初始化和清理
C面向对象来源于生活，每个对象都有初始化设置和销毁前的清理数据的设置。 2.1 构造函数和析构函数 （1）构造函数 初始化对象的成员属性不提供构造函数时，编译器会提供不带参数的默认构造函数，函数实现是空的构造函数不…...
计网| 网际控制报文协议（ICMP）
目录 网际控制报文协议（ICMP） 一、ICMP 基础特性 二、ICMP 报文分类及作用 差错报告报文 询问报文 网际控制报文协议（ICMP） ICMP（Internet Control Message Protocol，网际控制报文协议）是 …...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天，深度学习与大模型技术已成为推动行业变革的核心驱动力，而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心，系统性地呈现了两部深度技术著作的精华：…...
printf耗时高的原因
背景：设备升级初始化失败。具体表现为：app在启动dsp后，需在15秒内与其建立连接以确认通信成功，但当前未能在此时间限制内完成连接。 排查过程：通过在初始化过程中添加耗时打印，发现各阶段耗时虽不高&#…...
20250517 我设想一个空间，无限大，空间不与其中物质进行任何作用，甚至这个空间能容纳可以伸缩的空间
1.我设想一个空间，无限大，空间不与其中物质进行任何作用，甚至这个空间能容纳可以伸缩的空间 您设想的这个空间具有一些有趣的特点： 无限大：空间本身没有边界或限制，理论上可以容纳无限多的物质或结构。非…...
GO语言学习（二）
GO语言学习（二） method（方法） 这一节我们介绍一下GO语言的面向对象，之前我们学习了struct结构体，现在我们来解释一下方法method主要是为了简化代码，在计算同类时，使用函数接收方法…...
神经网络与深度学习第六章--循环神经网络（理论）
#第六章-循环神经网络 前馈神经网络的缺点： ①信息的传递是单向的。前馈神经网络可以看作一个复杂的函数，每次的输入都是独立的，即网络的输出只依赖于当前的输入。前馈神经网络是一种静态网络，没有记忆能力，就无法模拟…...
第三十五节：特征检测与描述-ORB 特征
1. 引言：为什么需要ORB？ 在计算机视觉领域，特征检测与描述是许多任务（如图像匹配、目标跟踪、三维重建等）的核心基础。传统的算法如SIFT（尺度不变特征变换）和SURF（加速稳健特征）因其优异的性能被广泛应用，但它们存在两个显著问题： 专利限制：SIFT和SURF受专利保护，…...