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 更新组件]|+---> [低优先级过渡更新] --> [调度器] --> [等待处理]

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

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

相关文章

使用wordcloud与jieba库制作词云图

目录 一、WordCloud库 例子&#xff1a; 结果&#xff1a; 二、Jieba库 两个基本方法 jieba.cut() jieba.cut_for_serch() 关键字提取&#xff1a; jieba.analyse包 extract_tags() 一、WordCloud库 词云图&#xff0c;以视觉效果提现关键词&#xff0c;可以过滤文本…

2024年云手机推荐榜单:高性能云手机推荐

无论是手游玩家、APP测试人员&#xff0c;还是数字营销工作者&#xff0c;云手机都为他们带来了极大的便利。本文将为大家推荐几款在市场上表现优异的云手机&#xff0c;希望这篇推荐指南可以帮助大家找到最适合自己的云手机&#xff01; 1. OgPhone云手机 OgPhone云手机是一款…

Template Method(模板方法)

1)意图 定义一个操作中的算法骨架&#xff0c;而将一些步骤延迟到子类中。Template Method 使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 2)结构 模板方法模式的结构图如图7-47 所示。 其中: AbstractClass(抽象类) 定义抽象的原语操作&#xff0c;具体…

自研小程序-心情追忆

在近期从繁忙的工作中暂时抽身之后&#xff0c;我决定利用这段宝贵的时间来保持我的Java技能不致生疏&#xff0c;并通过一个个人项目来探索人工智能的魅力。 我在Hugging Face&#xff08;国内镜像站点&#xff1a;HF-Mirror&#xff09;上发现了一个关于情感分析的练习项目&…

【设计模式】策略模式定义及其实现代码示例

文章目录 一、策略模式1.1 策略模式的定义1.2 策略模式的参与者1.3 策略模式的优点1.4 策略模式的缺点1.5 策略模式的使用场景 二、策略模式简单实现2.1 案例描述2.2 实现代码 三、策略模式的代码优化3.1 优化思路3.2 抽象策略接口3.3 上下文3.4 具体策略实现类3.5 测试 参考资…

【React】初学React

A. react中如何创建元素呢&#xff1f; 说明一点&#xff1a; 属性都改为驼峰形式&#xff08;无障碍属性aria-*除外&#xff09;&#xff0c; class改成className 创建元素 B. 变量或表达式如何表示呢&#xff1f;大括号{ }包起来 变量值用大括号包裹 C. 元素和组件的区别 元素…

伦敦金价格是交易所公布的吗?

今年以来&#xff0c;伦敦金价格波动可谓是波澜壮阔&#xff0c;盘中屡次刷新历史新高&#xff0c;目前已经冲上了2700的历史大关。面对高歌猛进的伦敦金价格&#xff0c;投资者除了进行交易之外&#xff0c;还有一点相关方面的知识是想了解的。例如&#xff0c;伦敦金价格是交…

程序员也要认识下“信创产业”

兄弟姐妹们&#xff0c;大家初入社会会觉得技术是第一位&#xff0c;我呸&#xff0c;其实你在那个领域敲代码的选择才是最重要的&#xff0c;选对了领域绝对比你背上100个面试题目强&#xff0c;今天带大家了解下信创产业。 信创产业&#xff0c;即信息技术应用创新产业&#…

钉钉向广告低头

商业化重压下&#xff0c;钉钉试水应用内广告。 作者|文昌龙 编辑|杨舟 “钉钉吃相真心难看&#xff01;早晨打卡时间还做开屏广告赚打工人的钱&#xff0c;比如很多踩点上班的&#xff0c;就因为你这5秒时间的开屏广告&#xff0c;没按上打卡按钮就会迟到&#xff0c;知道吗…

IDC报告解读:实用型靶场将成为下一代网络靶场的必然方向

——赛宁网安&#xff1a;回归用户需求&#xff0c;开创实用型靶场新范式 导读 本文基于《IDC TechScape&#xff1a;中国网络安全软件技术发展路线图&#xff0c;2024》中关于网络安全实训演练测试平台&#xff08;靶场&#xff09;的技术路线分析&#xff0c;结合国内外靶场…

RESTful风格

目录 一、什么是RESTful 1.1 RESTFul对WEB服务接口的规定包括&#xff1a; 1.2 REST对请求方式的具体约束如下&#xff1a; 1.3 REST对URL的具体约束如下&#xff1a; 1.4 RESTFul的核心概念&#xff1a; 二、RESTful风格与传统方式对比 三、RESTful风格演示 3.1 查询所…

openapi回调地址请求不通过

目录 1. 验证url接口get请求本地自测报错 2. 测试回调模式成功不返回结果 3. 测试回调模式返回结果带双引号 对接企业微信 产生会话回调事件 接口问题解决 1. 验证url接口get请求本地自测报错 java.lang.IllegalArgumentException: Last encoded character (before the pa…

砥砺十年风雨路,向新而行创新程丨怿星科技十周年庆典回顾

10月24日&#xff0c;是一年中的第256天&#xff0c;也是程序员节&#xff0c;同时也是怿星的生日。2014年到2024年&#xff0c;年华似水匆匆一瞥&#xff0c;多少岁月轻描淡写&#xff0c;怿星人欢聚一堂&#xff0c;共同为怿星科技的十周年庆生&#xff01; 01.回忆往昔&…

C++:AVL树

目录 AVL树概念 AVL树的实现 AVL树的节点 AVL树的插入 AVL树的平衡调整 右单旋 左单旋 左右双旋 右左双旋 完整的插入函数 AVL树的查找 AVL树的验证 验证有序 验证平衡 完整代码 AVL树概念 AVL树是一种具有特殊性质的二叉搜索树&#xff0c;AVL树的左右子树也都…

Nginx线程模型

Nginx的线程模型具有其独特的设计特点&#xff0c;主要基于多进程和异步非阻塞的处理机制。以下是对Nginx线程模型的详细解析&#xff1a; 一、多进程模型 Nginx采用的是多进程模型&#xff0c;而非多线程模型。在这种模型中&#xff0c;Nginx会启动一个master进程和多个work…

【HTML】——VSCode 基本使用入门和常见操作

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 零&#xff1a;HTML开发工具VSCode的使用 1&#xff1a;创建项目 2&#xff1a;创建格式模板&#x…

【C/C++】【三种方法】模拟实现strlen

学习目标&#xff1a; 使用代码模拟实现strlen。 逻辑&#xff1a; strlen 需要输入一个字符串数组类型的变量&#xff0c;并且返回一个整型类型的数据。strlen 需要计算字符串数组有多少个元素。 代码1&#xff1a;使用计数器 #define _CRT_SECURE_NO_WARNINGS 1 #include&…

【双指针】【数之和】 LeetCode 633.平方数之和

算法思想&#xff1a; 双指针枚举i,j&#xff1b;类似三数之和 class Solution { public:bool judgeSquareSum(int c) {long long sum0;vector<int> dp;dp.push_back(0);long long start1;while(sum < c){sum start *start;if(sum>c) break;else dp.push_back(…

HarmonyOS Next星河版笔记--界面开发(3)

属性 1.1.设计资源-svg图标 需求&#xff1a;界面中展示图标→可以使用的svg图标(任意放大缩小不失真、可以改变颜色) 使用方式&#xff1a; ①设计师提供&#xff1a;基于项目的图标&#xff0c;拷贝到项目目录使用 Image($r(app.media.ic_dianpu)) .width(40) fillColor…

解决方案 | 部署更快,自动化程度高!TOSUN同星线控底盘解决方案

Tosun——线控底盘解决方案 在汽车智能化和电动化进程中&#xff0c;智能线控底盘相关的核心技术和产品成为了新能源汽车及智能驾驶产业的重点发展方向。同星智能作为行业先行者&#xff0c;精研汽车电子行业整体解决方案&#xff0c;提供基于TSMaster的底盘HIL仿真测试解决方…