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

  • 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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/116098.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows安装Scala

Windows安装Scala 下载地址&#xff1a;https://downloads.lightbend.com/scala/2.11.11/scala-2.11.11.zip 解压完成之后 配置环境变量

基于Springboot实现的Echarts图表

概述 ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库&#xff0c;可以流畅的运行在 PC 和移动设备上&#xff0c;兼容当前绝大部分浏览器&#xff08;IE8/9/10/11&#xff0c;Chrome&#xff0c;Firefox&#xff0c;Safari等&#xff09;&…

[CISCN 2019初赛]Love Math

文章目录 前言考点解题过程 前言 感慨自己实力不够&#xff0c;心浮气躁根本做不来难题。难得这题对我还很有吸引力&#xff0c;也涉及很多知识。只能说我是受益匪浅&#xff0c;总的来说加油吧ctfer。 考点 利用php动态函数的特性利用php中的数学函数实现命令执行利用php7的特…

学习Bootstrap 5的第二天

​​​​​​​ 目录 前言 网格系统 网格类 网格系统规则 网格的基本结构 网格选项 从堆叠到水平 自动布局列 超小型设备 超小型设备网格实例 自动布局列 小型设备 小型设备网格实例 自动布局列 中型设备 中型设备网格实例 自动布局列 大型设备 大型设备网…

【仿写spring之ioc篇】三、检查是否实现了Aware接口并且执行对应的方法

Aware接口 Aware接口中只是设置了对应的set方法&#xff0c;目前只定义了三个Aware 以BeanNameAware为例 package com.ez4sterben.spring.ioc.factory.aware;/*** bean名字清楚** author ez4sterben* date 2023/08/31*/ public interface BeanNameAware {/*** 设置beanName* …

stable diffusion实践操作-常见lora模型介绍

本文专门开一节写Lora相关的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 模型分两种&#xff0c;一种是sd大模型&#xff0c;一种是类似Lora的小模型 国内的是&#xff1a;https://www.liblibai.com 国外的是&#xff1a;https:/…

【kubernetes】Argo Rollouts -- k8s下的自动化蓝绿部署

蓝绿(Blue-Green)部署简介 在现代软件开发和交付中,确保应用程序的平稳更新和发布对于用户体验和业务连续性至关重要。蓝绿部署是一种备受推崇的部署策略,它允许开发团队在不影响用户的情况下,将新版本的应用程序引入生产环境。 蓝绿部署的核心思想在于维护两个独立的环…

Anaconda Prompt输入jupyter lab无反应

问题&#xff1a;Anaconda Prompt界面输入指令无反应 原因&#xff1a;公司电脑勒索病毒防御工具阻止了进程 解决&#xff1a;找到黑名单恢复进程

three.js(四):react + three.js

绘制多个立方体 1.搭建reactts 项目 npx create-react-app basics-demo --template typescriptreactts 的用法可参考此链接&#xff1a; https://react-typescript-cheatsheet.netlify.app/docs/basic/setup 2.安装three依赖 npm install three types/three --save3.安装路…

antd5:form组件底层封装库field-form-1.37.0启动

一开始node版本是18.16.0 npm install发现安装依赖成功 npm start发现启动出错 node:internal/crypto/hash:71this[kHandle] new _Hash(algorithm, xofLen);^Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:71:19)…

Git Bash 和 Git GUI中文汉化

目录 为什么要中文汉化&#xff1f;Git Bash的汉化Git GUI的汉化 为什么要中文汉化&#xff1f; 看到中文大概能猜出是什么意思&#xff0c;便于使用&#xff0c;特别是Git GUI&#xff0c;中文版的菜单很容易理解是要做什么&#xff0c;如下图&#xff1a; Git Bash的汉化 …

开箱报告,Simulink Toolbox库模块使用指南(五)——S-Fuction模块(C MEX S-Function)

文章目录 前言 C MEX S-Function 算法原理 原始信号创建 编写S函数 仿真验证 Tips 分析和应用 总结 前言 见《开箱报告&#xff0c;Simulink Toolbox库模块使用指南&#xff08;一&#xff09;——powergui模块》 见《开箱报告&#xff0c;Simulink Toolbox库模块使用…

Qt —UDP通信QUdpSocket 简介 +案例

1. UDP通信概述 UDP是无连接、不可靠、面向数据报&#xff08;datagram&#xff09;的协议&#xff0c;可以应用于对可靠性要求不高的场合。与TCP通信不同&#xff0c;UDP通信无需预先建立持久的socket连接&#xff0c;UDP每次发送数据报都需要指定目标地址和端口。 QUdpSocket…

CS144环境配置问题

使用wsl来做CS144实验&#xff0c;可能会在编译的时候遇到以下问题&#xff0c;很明显是找不到LIBPCAP&#xff0c;参考链接 使用sudo apt-get install libpcap-dev命令下载该库即可。 CMake Error: The following variables are used in this project, but they are set to N…

大数据HBase学习圣经:一本书实现HBase学习自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据HBase学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…

unity3d:功能验证,收集开源项目的工程合集

unity3d功能验证&#xff0c;和收集开源项目的工程合集 目录持续更新地址 【腾讯文档】UnityForTest目录 https://docs.qq.com/doc/DWm9HSkVhTGdyUUVo 源码 https://github.com/luoyikun/UnityForTest 动画 创建骨骼动画 BoneAnimation场景 代码创建Mesh&#xff0c;骨骼…

网络安全法+网络安全等级保护

网络安全法 2014年2月&#xff0c;中央网络安全和信息化领导小组成立&#xff0c;习主席当组长 2017年6月1日&#xff0c;网络安全法正式成立 网络安全是国家安全的重要组成部分没有网络安全就没有国家安全&#xff0c;没有信息化就没有现代化 网络安全法21条 网络安全法31条 …

使用Arrays.asList生成的List集合,操作add方法报错

早上到公司&#xff0c;刚到工位&#xff0c;测试同事就跑来说"功能不行了&#xff0c;报服务器异常了&#xff0c;咋回事";我一脸蒙&#xff0c;早饭都顾不上吃&#xff0c;要来了测试账号复现了一下&#xff0c;然后仔细观察测试服务器日志&#xff0c;发现报了一个…

Linux线程互斥

目录 一、线程不安全 1.线程不安全现象 2.线程不安全程序的特质 3.线程不安全程序的原因 二、线程互斥 1.基本概念 2.锁 &#xff08;1&#xff09;认识锁 &#xff08;2&#xff09;互斥锁的使用 &#xff08;3&#xff09;代码的改造 3.锁的本质 &#xff08;1&a…

达梦8 在CentOS 系统下静默安装

确认系统参数 [rootlocalhost ~]# ulimit -a core file size (blocks, -c) unlimited data seg size (kbytes, -d) unlimited【1048576(即 1GB)以上或 unlimited】 scheduling priority (-e) 0 file size (blocks, -f) unlimite…