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

8.react18并发模式与startTransition(搜索高亮思路)

news 2026/4/2 3:32:33

  • React 18 之前,渲染是一个单一的,不间断的,同步的事务,一旦渲染开始,就不能被中断

  • React 18引入并发模式,它允许你将标记更新作为一个transitions,这会告诉React他们可以被中断执行.这样可以将紧急任务先更新,不紧急任务后更新.
    将任务给紧急任务先执行, 优先级低的任务后执行

在这里插入图片描述

 <body><div id="app"></div><script type="text/babel">let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { memo, useState, startTransition } = React;let List = memo(({query})=>{const text = 'hello world'const items = []// 匹配输入的选项并且高亮if( query !== '' && text.includes(query) ){const arr = text.split(query);for(let i=0;i<10000;i++){items.push(<li key={i}>{arr[0]}<span style={{color:'red'}}>{query}</span>{arr[1]}</li>)}}else{for(let i=0;i<10000;i++){items.push(<li key={i}>{text}</li>);}}return (<ul>{ items }</ul>)})let Welcome = memo(()=>{const [ searchWord, setSearchWord ] = useState('');const [ query, setQuery ] = useState('');const handleChange = (ev) => {setSearchWord(ev.target.value)  //第一个任务// 添加延时过渡startTransition(()=>{setQuery(ev.target.value)   //第二个任务(不紧急的任务)})}return (<div><input type="text" value={searchWord} onChange={handleChange} /><List query={query} /></div>)})let Element = (<Welcome />);root.render(Element)</script></body>

在这里插入图片描述

相关文章：

8.react18并发模式与startTransition(搜索高亮思路)

React 18 之前,渲染是一个单一的,不间断的,同步的事务,一旦渲染开始,就不能被中断 React 18引入并发模式,它允许你将标记更新作为一个transitions,这会告诉React他们可以被中断执行.这样可以将紧急任务先更新,不紧急任务后更新. 将任务给紧急任务先执行, 优先级低的任务后执行…...

编程日记 2023/9/2 18:45:32

前端Vue自定义得分构成水平柱形图组件 可用于系统专业门类得分评估分析

引入Vue自定义得分构成水平柱形图组件&#xff1a;cc-horBarChart 随着技术的发展&#xff0c;传统的开发方式使得系统的复杂度越来越高&#xff0c;一个小小的改动或小功能的增加可能会导致整体逻辑的修改&#xff0c;造成牵一发而动全身的情况。为了解决这个问题&#xff0c…...

编程日记 2023/9/2 18:44:28

Linux获取纳秒级别时间

在 Linux 系统中可以使用 gettimeofday 函数来获取时间&#xff0c;这个函数能够以毫秒的精度来获取时间 struct timeval tv;gettimeofday(&tv, NULL);time_t cur_time tv.tv_sec;long cur_time_ms tv.tv_usec/1000;printf(“cur_time %d \n”, cur_time);printf(“cur…...

编程日记 2023/9/2 18:43:28

CSS中你不得不知道的盒子模型

目录 1、CSS的盒子模型1.1 css盒子模型有哪些&#xff1a;1.2 css盒子模型的区别1.3 通过css如何转换css盒子模型 1、CSS的盒子模型 1.1 css盒子模型有哪些&#xff1a; 标准盒子模型、怪异盒子模型&#xff08;IE盒子模型&#xff09; 1.2 css盒子模型的区别 标准盒子模型&a…...

编程日记 2023/9/2 18:42:26

知识储备--基础算法篇-数组

1.学习 2.数组 2.1第53题-最大子数组和 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 心得&#xff1a;一直在纠结这个连续的事情&…...

编程日记 2023/9/2 18:41:25

zookeeper 理论合集

目录 系统背景 集群结构 多个节点之间的角色 节点的状态 为什么引入 Observer 存储结构 ZNode 节点结构 ZNode 创建类型 内存数据存储 数据持久化 zookeeper 的容量大小 数据同步 消息广播 崩溃恢复 如何保证顺序一致性 核心流程 Leader 选举流程 脑裂问题 …...

编程日记 2023/9/2 18:40:24

【pyinstaller 怎么打包python，打包后程序闪退 不打日志 找不到自建模块等问题的踩坑解决】

程序打包踩坑解决的所有问题 问题1 多个目录怎么打包 不管你包含多个层目录&#xff0c;引用多么复杂&#xff0c;只需要打包主程序所在文件即可&#xff0c;pyinstaller会自动寻找依赖包&#xff0c;如果报错自建模块找不到&#xff0c;参照问题3 pyinstaller main.py问题2…...

编程日记 2023/9/2 18:39:22

【Docker】网络

文章目录 Docker 网络基础Docker网络管理Docker网络架构CNMLibnetwork驱动 常见的网络类型 Docker 网络管理命令docker network createdocker network inspectdocker network connectdocker network disconnectdocker network prunedocker network rmdocker network ls docker …...

编程日记 2023/9/2 18:38:21

Linux ：realpath 命令

以后可以直接用于查找相关文件 例: 输入:realpath .repo/manifests/rv1126_rv1109_linux_release.xml 输出:/home/sdk/work/rk/rv1126_rv1109/.repo/manifests/rv1126_rv1109_linux/rv1126_rv1109_linux_v3.0.2_20230406.xml根据输入的文件找到对应复制过来的型号,这个命令不…...

编程日记 2023/9/2 18:37:18

react17：生命周期函数

挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react&#xff08;v17.0.2&#xff09;的生命周期图谱如下。 相较于16版本&#xff0c;17版本生命周期函数有如下变化&#xff1a; componentWillMount() componentWillUpdate() compone…...

编程日记 2023/9/2 18:36:17

腾讯内部单边拥塞算法BBR-TCPA一键脚本安装

TCPA简介 腾讯内部使用的TCPA&#xff0c;由腾讯TEG操作系统组研发&#xff0c;基于RHEL7.4源码&#xff0c;定制化的TCPA。团队介绍&#xff1a;腾讯TEG操作系统组, 2010年成立&#xff0c;专业的内核团队,维护研发腾讯内部linux操作系统tlinux, 保证百万级server高效稳定运行…...

编程日记 2023/9/2 18:35:15

【LLM】chatglm-6B模型训练和推理

本篇文章记录下 chatglm-6B 训练和推理过程 环境&#xff1a;Ubuntu 20.04 1.13.0cu116 chatglm-6B 源代码仓库&#xff1a;链接 chatglm-6B 模型权重&#xff1a;链接 源代码及模型 clone 到本地 这里使用的是 THUDM 在 hugging face 开源的模型。 因为模型比较大&#xff…...

编程日记 2023/9/2 18:34:14

性能可靠it监控系统,性能监控软件的获得来源有哪些

性能可靠的IT监控系统是企业IT运维的重要保障之一。以下是一个性能可靠的IT监控系统应该具备的特点&#xff1a; 高可用性 高可用性是IT监控系统的一个重要特点&#xff0c;它可以保证系统在24小时不间断监控的同时&#xff0c;保证系统服务的可用性和稳定性。为了实现高可用性…...

编程日记 2023/9/2 18:33:13

TCP/IP网络编程(一) 理解网络编程和套接字

文章目录 理解网络编程和套接字网络编程和套接字概要构建套接字编写 Hello World 服务器端构建请求连接套接字在Linux平台下运行 基于Linux的文件操作打开文件关闭文件将数据写入文件读取文件中的数据 理解网络编程和套接字 网络编程和套接字概要 网络编程就是编写程序使两台…...

编程日记 2023/9/2 18:32:11

Python 潮流周刊#18：Flask、Streamlit、Polars 的学习教程

你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。标题取自其中三则分享&#xff0c;不代表全部内容都是该主题&#xff0c;特此声明。 本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选…...

编程日记 2023/9/2 18:31:10

装备一台ubuntu

配置远程连接&#xff1a; ubuntu的root用户无法远程登入问题&#xff1a; openssh安装命令&#xff1a; sudo apt-get install openssh-server 安装完成通过以下命令查看SSH是否启动 ps -e | grep ssh 如果只有ssh-agent表示还没启动&#xff0c;需要&#xff1a; /etc/i…...

编程日记 2023/9/2 18:30:09

为了更好和大家交流，欢迎大家加我的微信账户

因为一些懂的都懂的原因&#xff0c;如果我的账户显示为 此时我无法通过站内信、留言或者任何方式和大家联系。 如果看到这样的内容&#xff0c;可以在此评论区留下你的微信账户&#xff0c;我看到后会添加你。为防止其他人冒充我&#xff0c;我的微信号以2206结尾。...

编程日记 2023/9/2 18:29:08

MS1826A HDMI 多功能视频处理器 HDMI4进1出画面分割芯片

基本介绍 MS1826A 是一款多功能视频处理器&#xff0c;包含 4 路独立 HDMI 音视频输入通道、1 路 HDMI 音视 频输出通道以及 1 路独立可配置为输入或者输出的 SPDIF、I2S 音频信号。支持 4 个独立的字库定 制型 OSD&#xff1b;可处理隔行和逐行视频或者图形输入信号&#xff1…...

编程日记 2023/9/2 18:28:05

最新文献怎么找|学术最新前沿文献哪里找

查找下载最新文献最好、最快、最省事的方法就是去收录该文献的官方数据库中下载。举例说明&#xff1a; 有位同学求助下载一篇2023年新文献&#xff0c;只有DOI号10.1038/s41586-023-06281-4&#xff0c;遇到这种情况可以在DOI号前加上http://doi.org/输入地址栏查询该文献的篇…...

编程日记 2023/9/2 18:27:04

ctfshow 红包题

前言&#xff1a; 最近一直在搞java很少刷题&#xff0c;看见ctfshow的活动赶紧来复现一波~ ctfshow 红包挑战7 <?php highlight_file(__FILE__); error_reporting(2); extract($_GET); ini_set($name,$value); system("ls ".filter($_GET[1])."" )…...

编程日记 2023/9/2 18:26:02

《B3845 [GESP样题 二级] 勾股数》

题目背景 对应的选择、判断题&#xff1a;https://ti.luogu.com.cn/problemset/1102 题目描述 勾股数是很有趣的数学概念。如果三个正整数 a,b,c&#xff0c;满足 a2b2c2&#xff0c;而且 1≤a≤b≤c&#xff0c;我们就将 a,b,c 组成的三元组 (a,b,c) 称为勾股数。你能通过编…...

编程新知 2026/4/2 2:34:52

linux系统中简单统计java项目代码行数信息

新建脚本文件&#xff08;最好在项目根目录下&#xff09;&#xff1a;count_java.shvi count_java.sh编辑内容&#xff1a;按一下键盘上的i键&#xff0c;屏幕左下角会出现 -- INSERT --&#xff0c;输入一下内容&#xff1a; #!/bin/bash find . -name "*.java" -p…...

编程新知 2026/4/2 1:32:12

竞赛获奖保研加分测评：除了挑战杯，哪些垂直赛事含金量更高？

在 2026 年推免&#xff08;保研&#xff09;竞争进入白热化的背景下&#xff0c;工科学子的加分项已不仅仅是绩点的博弈&#xff0c;更是工程实战能力的短兵相接。随着教育部《关于加强新时代卓越工程师培养的指导意见》的深入实施&#xff0c;各大名校对人才的评价标准正从“…...

编程新知 2026/4/2 1:22:10

浅谈MIKEURBAN计算进度条停止的解决方法

01 问题昨天晚上&#xff0c;一个同事拿着笔记本对着我说&#xff0c;为什么我的MIKE URBAN计算进度条一直停滞在5%&#xff0c;停止了。我说是不是兼容问题&#xff0c;要不重新安装下软件吧。最终还是很感谢某同事找到了解决方法。02 解决方法MIKE URBAN低版本的通常分为了32…...

编程新知 2026/4/1 23:11:59

AI辅助架构设计：让快马平台智能规划trae状态管理方案

用AI辅助设计trae状态管理方案&#xff1a;以博客后台系统为例 最近在开发一个博客后台管理系统时&#xff0c;遇到了状态管理的难题。系统需要处理文章列表、编辑草稿、用户评论和系统设置等多种数据&#xff0c;如何合理组织这些状态让我头疼不已。幸运的是&#xff0c;在In…...

编程新知 2026/4/1 21:48:41

3大核心功能解放明日方舟玩家双手：MAA自动化助手全攻略

3大核心功能解放明日方舟玩家双手&#xff1a;MAA自动化助手全攻略 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手&#xff0c;全日常一键长草&#xff01;| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: https://gi…...

编程新知 2026/4/1 21:04:08

【含文档+PPT+源码】基于SSM框架的农产品销售平台的设计与实现

项目介绍本课程演示的是一款 基于SSM框架的农产品销售平台的设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料2.带你从零开始部署运行本套系统3.该项…...

编程新知 2026/4/1 20:17:44

GitHub新手避坑指南：从SSH Key到Personal Token，搞定本地项目上传（含大文件失败解决方案）

GitHub新手避坑指南&#xff1a;从SSH Key到Personal Token&#xff0c;搞定本地项目上传&#xff08;含大文件失败解决方案&#xff09; 第一次用GitHub上传项目就像玩扫雷游戏——表面风平浪静&#xff0c;实际暗藏玄机。上周帮实习生小李排查上传失败问题时&#xff0c;发现…...

编程新知 2026/4/1 19:53:30

C语言学习笔记——2（数据类型，运算符）

数据类型机器中每个字节都有地址CPU通过地址访问字节空间#include <stdio.h>int main() {int a 0xEEAABAAA;printf("%#x, %d\n",a,a);unsigned int b 0xEEAABAAA;printf("%#x, %u\n",b,b);return 0; }运行结果&#xff1a;0xeeaabaaa, -290800982 …...

编程新知 2026/4/1 18:25:46

告别创作瓶颈：像素剧本圣殿应用指南，打造你的专属剧本工作站

告别创作瓶颈&#xff1a;像素剧本圣殿应用指南&#xff0c;打造你的专属剧本工作站 1. 像素剧本圣殿简介 像素剧本圣殿是一款基于Qwen2.5-14B-Instruct深度微调的专业剧本创作工具。它将AI推理能力与8-Bit复古美学完美融合&#xff0c;为创作者提供沉浸式的剧本开发体验。 …...

编程新知 2026/4/1 17:31:09