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

React第十三章(useTransition)

useTransition

useTransition 是 React 18 中引入的一个 Hook,用于管理 UI 中的过渡状态,特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”状态,这样 React 可以优先处理更重要的更新,比如用户输入,同时延迟处理过渡更新。

用法

const [isPending, startTransition] = useTransition();

参数

useTransition 不需要任何参数

返回值

useTransition 返回一个数组,包含两个元素

  1. isPending(boolean),告诉你是否存在待处理的 transition。
  2. startTransition(function) 函数,你可以使用此方法将状态更新标记为 transition。

优先级

(一般) 不是很重要,因为在实际工作中应用较少

例子

我们需要模拟数据很多的场景,这里使用mockjs模拟数据, 我所用的工具,超出你的想象,我用过很多工具和插件。

并且我们结合vite插件实现一个api,这个api可以帮助我们模拟数据

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import type { Plugin } from 'vite'
import mockjs from 'mockjs'
import url from 'node:url';
const viteMockServer = (): Plugin => {return {name: "vite-mock-server",//使用vite插件的钩子函数configureServer(server) {server.middlewares.use('/api/list', async (req, res) => {const parsedUrl = url.parse(req.originalUrl, true);//获取url参数 true表示返回对象 {keyWord: 'xx'}const query = parsedUrl.query;res.setHeader('Content-Type', 'application/json')const data = mockjs.mock({//返回1000条数据"list|1000": [{"id|+1": 1, //id自增"name": query.keyWord, //name为url参数中的keyWord'address': '@county(true)', //address为随机地址}]})//返回数据res.end(JSON.stringify(data))})}}
}
// https://vitejs.dev/config/
export default defineConfig({plugins: [react(), viteMockServer()],
})

编写完成访问我们的接口 http://localhost:5174/api/list?keyWord=xx 5174为默认端口,可以自行更改,返回数据如下

在这里插入图片描述

前端

组件结构

在我们的示例中,我们创建了一个简单的输入框和一个列表,用于展示基于输入关键词的结果。以下是组件的主要部分:

Input, Flex, List 来源antd https://ant.design/components/input/

npm install antd
import { useTransition, useState } from 'react';
import { Input, Flex, List } from "antd";
interface Item {id: number;name: string;address: string
}
const App = () => {const [inputValue, setInputValue] = useState('');const [isPending, startTransition] = useTransition(); // 开始过渡const [list, setList] = useState<Item[]>([])const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {const value = e.target.valuesetInputValue(value)fetch(`/api/list?keyWord=${value}`).then(res => res.json()).then(data => {const res = data?.list ?? [];// 使用过渡 useTransitionstartTransition(() => {setList([...res])})//不使用过渡 useTransition//setList([...res])})}return (<><Flex><Inputvalue={inputValue}onChange={handleInputChange} // 实时更新placeholder="请输入姓名"/></Flex>{isPending && <div>loading...</div>}<ListdataSource={list}renderItem={(item) => (<List.Item><List.Item.Metatitle={item.name}description={item.address}/></List.Item>)}/></>);
}export default App;
  1. 输入框和状态管理
    使用 useState Hook 管理输入框的值和结果列表。
    每次输入框的内容变化时,handleInputChange 函数会被触发,它会获取用户输入的值,并进行 API 请求。
  2. API 请求
    在 handleInputChange 中,输入的值会作为查询参数发送到 /api/list API。API 返回的数据用于更新结果列表。
    为了优化用户体验,我们将结果更新放在 startTransition 函数中,这样 React 可以在处理更新时保持输入框的响应性。
  3. 使用 useTransition
    useTransition 返回一个布尔值 isPending,指示过渡任务是否仍在进行中。
    当用户输入时,如果正在加载数据,我们会显示一个简单的“loading…”提示,以告知用户当前操作仍在进行。
  4. 列表渲染
    使用 List 组件展示返回的结果,列表项显示每个结果的 name 和 address。
为了更好的测试结果可以在性能中降级cpu渲染速度

在这里插入图片描述

注意事项

startTransition必须是同步的

错误做法

startTransition(() => {// ❌ 在调用 startTransition 后更新状态setTimeout(() => {setPage('/about');}, 1000);
});

正确做法

setTimeout(() => {startTransition(() => {// ✅ 在调用 startTransition 中更新状态setPage('/about');});
}, 1000);

async await 错误做法

startTransition(async () => {await someAsyncFunction();// ❌ 在调用 startTransition 后更新状态setPage('/about');
});

正确做法

await someAsyncFunction();
startTransition(() => {// ✅ 在调用 startTransition 中更新状态setPage('/about');
});

原理剖析

useTransition 的核心原理是将一部分状态更新处理为低优先级任务,这样可以将关键的高优先级任务先执行,而低优先级的过渡更新则会稍微延迟处理。这在渲染大量数据、进行复杂运算或处理长时间任务时特别有效。React 通过调度机制来管理优先级:

  1. 高优先级更新:直接影响用户体验的任务,比如表单输入、按钮点击等。
  2. 低优先级更新:相对不影响交互的过渡性任务,比如大量数据渲染、动画等,这些任务可以延迟执行。
+-----------------------+
|         App           |
|                       |
|  +--------------+     |
|  |    Input     |     |
|  +--------------+     |
|                       |
|  +--------------+     |
|  |   Display    |     |
|  +--------------+     |
+-----------------------+用户输入|v
[高优先级更新] ---> [调度器] ---> [React 更新组件]|+---> [低优先级过渡更新] --> [调度器] --> [等待处理]

相关文章:

React第十三章(useTransition)

useTransition useTransition 是 React 18 中引入的一个 Hook&#xff0c;用于管理 UI 中的过渡状态&#xff0c;特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”状态&#xff0c;这样 React 可以优先处理更重要的更新&#xff0c;比如用户输入&#x…...

IDEA使用Maven Helper查看整个项目的jar冲突

在插件市场安装Maven Helper&#xff0c;安装好后&#xff0c;重启IDEA&#xff1b;双击打开可能存在jar冲突的pom文件&#xff1b;在右侧面板查看冲突,text是引入的依赖明细&#xff0c;点击Dependecy Analyzer选项卡即可查看冲突的jar。...

uniapp项目 存储数据到手机本地

打开manifest.json&#xff0c;在App权限配置中&#xff0c;添加读取和写入的权限 <uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name"android.permission.WRITE_EXTERNAL_STORAGE"/&g…...

景联文科技医疗数据处理平台:强化医疗数据标注与管理,推动医疗数字化新篇章

随着医疗科技快速进步与广泛应用&#xff0c;医疗信息的规模正在迅速扩张&#xff0c;如何有效管理这些医疗数据成为了关键议题。 医疗数据不仅包括传统的纸质病历&#xff0c;还有电子病历、实验室检测结果、医学影像等多样化的数字信息。为确保这些数据能为临床决策、科研分析…...

vue使用高德地图实现轨迹显隐

<template><div><el-button type"primary" click"pathShowOrHide">轨迹显/隐</el-button><div id"container" /></div> </template><script> import AMapLoader from amap/amap-jsapi-loaderex…...

Maven(20) 如何使用Maven进行版本管理?

Maven提供了一套强大的版本管理机制&#xff0c;允许开发者管理项目的版本号&#xff0c;并在不同的版本之间进行升级和降级。以下是如何使用Maven进行版本管理的详细步骤和代码示例&#xff1a; 步骤 1: 定义项目版本 在pom.xml文件中&#xff0c;你需要定义项目的版本号。版…...

AWS RDS MySQL内存使用

1. AWS RDS所拥有的内存&#xff08;实例类型&#xff09;&#xff0c;和数据库能够使用的内存是不同的。RDS实例为操作系统和 RDS 管理进程预留了内存&#xff0c;数据库使用内存大小&#xff0c;小于数据库实例类的硬件规格中所示的值&#xff08;以 GiB 为单位&#xff09;[…...

Vue指令:v-else、v-else-if

目录 1.语法&#xff1a; 2. 题目 3.页面展示 4.结构 1.语法&#xff1a; 1.作用&#xff1a;辅助v-if进行判断渲染 2.语法&#xff1a;v-else 、v-esle-if"表达式" 2. 题目 <!DOCTYPE html> <html lang"en"> <head><meta chars…...

基于SSM志愿者招募系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;志愿组织管理&#xff0c;组织信息管理&#xff0c;组织申请管理&#xff0c;志愿活动管理活动报名管理 用户账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;…...

数学建模与优化算法:从基础理论到实际应用

数学建模和优化算法&#xff0c;它们不仅帮助我们理解和描述复杂系统的行为&#xff0c;还能找到系统性能最优化的解决方案。本文将从基础的数学理论出发&#xff0c;逐步深入到各种优化算法&#xff0c;并探讨它们在实际问题中的应用。 思维导图文件可获取&#xff1a;https:…...

微信小程序生成二维码

目前是在开发小程序端 --> 微信小程序。然后接到需求&#xff1a;根据 form 表单填写内容生成二维码&#xff08;第一版&#xff1a;表单目前需要客户进行自己输入&#xff0c;然后点击生成按钮实时生成二维码&#xff0c;不需要向后端请求&#xff0c;不存如数据库&#xf…...

自由软件与开源软件:异同与联系

自由软件与开源软件&#xff1a;异同与联系 随着信息技术的快速发展&#xff0c;自由软件运动与开源软件运动成为推动软件开发领域变革的重要力量。虽然这两个概念在日常对话中常被交替使用&#xff0c;但它们各自有着不同的理念和发展历程。本文将探讨自由软件运动与开源软件…...

Vue中ref、reactive、toRef、toRefs的区别

一、ref、reactive setup 函数中默认定义的变量并不是响应式的&#xff08;即数据变了以后页面不会跟着变&#xff09;&#xff0c;如果想让变量变为响应式的变量&#xff0c;需要使用 ref 和 reactive 函数修饰变量。 ref 函数可以把基本类型变量变为响应式引用reactive 函数…...

凸极式发电机的相量图分析和计算,内功率因数角和外功率因数角和功角的定义。

图1&#xff1a;同步发电机稳态相量图 若发电机为凸极式&#xff0c;由于凸极机正、交轴同步电抗不等&#xff0c;即xd≠xq&#xff0c;因此必须先借助虚构电动势 E ˙ Q E ˙ q − ( x d − x q ) I ˙ d \dot{E}_Q\dot{E}_q-(x_d-x_q)\dot{I}_d E˙Q​E˙q​−(xd​−xq​)…...

systemctl restart NetworkManager 重启后,文件/etc/resolv.conf修改失败

如果你在重启 NetworkManager 之后发现无法修改 /etc/resolv.conf 文件,这是因为 NetworkManager 会自动管理这个文件 为了解决这个问题,你可以采取以下两种方法之一: 方法一:禁用 NetworkManager 服务 使用以下命令停止 NetworkManager 服务:sudo systemctl stop Netwo…...

Admin.NET源码学习(5:swagger使用浅析)

直接启动Admin.NET.Web.Entry项目&#xff0c;会弹出swagger登录验证框&#xff0c;虽然采用Furion简化了项目加载过程及配置&#xff0c;但是学习源码过程就比较恼火&#xff0c;很多设置及功能搞不清楚到低是怎么启用的&#xff0c;本文记录学习Admin.NET项目中swagger的设置…...

在 openEuler 22.03 服务器上搭建 web 服务教程

一、项目背景与目标 在当今数字化时代,web 服务的搭建对于企业和个人来说都具有至关重要的意义。本项目旨在在 openEuler 22.03 服务器上搭建一个稳定、高效的 web 服务,以满足特定的业务需求。具体目标如下: 在 openEuler 22.03 服务器上成功安装和配置 Apache web 服务器…...

如何取消自动配置ipv4地址:步骤详解与实用指南

在现代网络环境中&#xff0c;自动配置IPv4地址&#xff08;APIPA&#xff0c;即自动专用IP寻址&#xff09;虽然为设备连接提供了便利&#xff0c;但在某些特定场景下&#xff0c;如服务器配置、网络故障排除等&#xff0c;手动设置静态IP地址成为必要之选。自动配置的IPv4地址…...

医院信息化与智能化系统(15)

医院信息化与智能化系统(15) 这里只描述对应过程&#xff0c;和可能遇到的问题及解决办法以及对应的参考链接&#xff0c;并不会直接每一步详细配置 如果你想通过文字描述或代码画流程图&#xff0c;可以试试PlantUML&#xff0c;告诉GPT你的文件结构&#xff0c;让他给你对应…...

小红书笔记详情API接口系列(概述到示例案例)

小红书笔记详情数据API接口是小红书开放平台提供的一项服务&#xff0c;允许开发者获取小红书上的笔记详情数据。以下是对该接口及其使用方法的详细介绍&#xff1a; 一、接口概述 小红书笔记详情数据API接口提供了一系列的接口&#xff0c;允许开发者获取笔记的标题、正文、标…...

智慧园区能源管理系统解决方案

某园区集成生产、办公、生活三大功能&#xff0c;建设有生产厂房、化学品库、辅助用房、气罐站、研发楼、综合楼及其他配套设施&#xff0c;涉及到多种用能&#xff0c;包含电能、天然气、压缩空气、冷热能等&#xff0c;带来日益高昂的能耗成本与能源浪费隐患。 1、制冷空调监…...

解锁Unity游戏定制潜能:MelonLoader全方位应用指南

解锁Unity游戏定制潜能&#xff1a;MelonLoader全方位应用指南 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 副标题&#xff…...

【仅限头部金融科技团队内部流通】FastAPI 2.0 AI流式响应安全加固方案:防内存溢出、防连接耗尽、防Token泄露(含OWASP ASVS v4.0合规对照表)

第一章&#xff1a;FastAPI 2.0 AI流式响应安全加固方案全景概览FastAPI 2.0 引入了对 Server-Sent Events&#xff08;SSE&#xff09;与异步生成器的原生增强支持&#xff0c;使大语言模型&#xff08;LLM&#xff09;的流式响应&#xff08;如 token-by-token 输出&#xff…...

重组胶原蛋白 | 可溶性蛋白 | 蛋白纯化 | 原核与真核系统

在生命科学研究中&#xff0c;重组胶原蛋白&#xff08;Recombinant Collagen&#xff09;作为一种关键的生物大分子&#xff0c;因其独特的结构特点和在细胞外基质研究中的重要性而被广泛关注。一、胶原蛋白分子构成与分类胶原蛋白&#xff08;Collagen&#xff09;是动物体内…...

Spring Boot 3.0 + Java 17 微服务实战:用Gradle统一管理多模块依赖与版本,告别配置混乱

Spring Boot 3.0 Java 17 微服务实战&#xff1a;用Gradle统一管理多模块依赖与版本 在微服务架构中&#xff0c;依赖管理往往成为开发者的噩梦。想象一下&#xff0c;当你需要在十几个子模块中同步更新Spring Boot版本时&#xff0c;传统的做法是在每个模块的构建文件中逐一修…...

TD-ACC+实验系统入门指南:手把手教你搭建典型环节模拟电路

TD-ACC实验系统实战手册&#xff1a;从零构建典型环节电路的21个关键细节 第一次接触TD-ACC实验系统时&#xff0c;看着密密麻麻的接口和旋钮&#xff0c;我的手指悬在半空迟迟不敢落下——生怕一个错误的连接就会烧毁昂贵的运算放大器。这种忐忑直到成功捕捉到第一个完美方波信…...

MongoDB高级面试:进阶面试题50题及答案详解

更多内容请见: 《深入掌握MongoDB数据库》 - 专栏介绍和目录 文章目录 一、高级查询优化与执行计划 (8题) 二、高级索引策略 (8题) 三、高级分片策略与优化 (8题) 四、性能调优与瓶颈分析 (7题) 五、高级复制集配置与故障处理 (6题) 六、高级事务与一致性模型 (5题) 七、安全高…...

Nacos服务实例权重设置详解:如何根据服务器性能动态调整流量分配

Nacos服务实例权重设置详解&#xff1a;如何根据服务器性能动态调整流量分配 在分布式系统架构中&#xff0c;服务实例的性能差异是不可避免的现实问题。新采购的服务器与运行多年的老旧设备并存&#xff0c;不同配置的云主机混合部署&#xff0c;这些场景都要求我们能够智能地…...

Dramatron:AI驱动的剧本创作革命

Dramatron&#xff1a;AI驱动的剧本创作革命 【免费下载链接】dramatron Dramatron uses large language models to generate coherent scripts and screenplays. 项目地址: https://gitcode.com/gh_mirrors/dr/dramatron 价值定位&#xff1a;重新定义创意写作流程 在…...

【中文文献管理效率提升90%】茉莉花插件:科研工作者的智能文献处理解决方案

【中文文献管理效率提升90%】茉莉花插件&#xff1a;科研工作者的智能文献处理解决方案 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum…...