React Hooks使用startTransition与useTransition教程示例
引言
今天带来的是react18版本推出的全新hooks:useTransition,它的使用范围主要是用于性能优化，今天我们一探究竟吧。
需求分析
假设现在有如下需求：当用户在输入框查询数据时，需要实时根据用户输入数据进行搜索提示项的展示。与以往不同的是，提示列表的个数是十分庞大的，每次都在10000条以上。
设计过程
import {useState} from "react";
import styles from "./index.module.css";
const Home:React.FC = () => {
const [val,setVal] = useState('');
const [arr,setArr] = useState<number[]>([]);
//根据用户输入获取查询列表
const getList = (e:any) => {
setVal(e.target.value)
let arr = Array.from(new Array(10000),item=>Date.now())
setArr(arr);
}
return (
<div className={styles.box}>
<input value={val} onChange={getList}/>
{
arr.map((item,key)=>(
<div key={key}>{item}</div>
))
}
</div>
)
}
export default Home;
效果展示
我们快速在表单输入了abcd，但是很明显出现了卡顿现象，大约2s后表单和列表数据都被渲染。
现象分析
由于我们使用了useState对表单和列表的数据进行了更新，二者触发批量更新机制但无优先级差异。实际上为了保证用户体验感，我们需要保证输入框的输入数据永远处于最新显示，而列表的提示可以稍微滞后显示。 基于优先级渲染问题，react提出了startTransition方案。使用startTransition触发的更新优先级会被降低，从而优雅降级，提高页面刷新和渲染性能。
startTransition使用
在更新大数据更新或者大列表dom时，为了页面性能和渲染优化，我们可以对大数据或列表的更新过程采用startTransition优雅降级处理。
使用
startTransition(()=>{
//大数据列表数据获取
do...
})
例子改造
import {useState,startTransition} from "react";
import styles from "./index.module.css";
const Home:React.FC = () => {
const [val,setVal] = useState('');
const [arr,setArr] = useState<number[]>([]);
//根据用户输入获取查询列表
const getList = (e:any) => {
setVal(e.target.value)
let arr = Array.from(new Array(10000),item=>Date.now());
startTransition(()=>{
setArr(arr);
})
}
return (
<div className={styles.box}>
<input value={val} onChange={getList}/>
{
arr.map((item,key)=>(
<div key={key}>{item}</div>
))
}
</div>
)
}
export default Home;
效果展示
相对于上面未使用startTransition，此处的输入框数据优化了许多，并且大数据列表展示卡顿达到了一定程度优化。
useTransition
useTransition和startTransition的功能一模一样，只是通过hooks的展现方式出现，并且增加了保存列表是否在渲染等待的状态。
使用
第一个变量保存是否渲染中的状态,ture表示渲染等待中
第二个变量和startTransition的使用方式一模一样
import {useState,startTransition} from "react";
const [pending,transition] = useTransition();
例子改造
import React,{useState,useTransition} from "react";
const Home:React.FC = () => {
const [val,setVal] = useState('');
const [arr,setArr] = useState<number[]>([]);
const [pending,transition] = useTransition()
const getList = (e:any) => {
setVal(e.target.value)
let arr = Array.from(new Array(10000),item=>Date.now())
transition(()=>{
setArr(arr);
})
}
return (
<div className={styles.box}>
<input value={val} onChange={getList}/>
{
pending?<h2>loading....</h2>:(
arr.map((item,key)=>(
<div key={key}>{item}</div>
))
)
}
</div>
)
}
export default Home;
效果展示
我们根据useTransition返回的pending状态添加判断，如果列表在渲染中就添加提示加载状态，否则正常显示列表。
总结
在处理大批量数据渲染时，通过使用startTransition或useTransition可以很好的提升渲染性能，提高用户体验感。
以上就是React Hooks使用教程startTransition与useTransition的详细内容，更多关于React Hooks startTransition useTransition的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了React使用State Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要为大家详细介绍了React实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
React+Redux实现简单的待办事项列表ToDoList
这篇文章主要为大家详细介绍了React+Redux实现简单的待办事项列表ToDoList，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Workbox是Google Chrome团队推出的一套 PWA 的解决方案,这套解决方案当中包含了核心库和构建工具,因此我们可以利用Workbox实现Service Worker的快速开发,本文小编给大家介绍了React中使用Workbox进行预缓存的实现,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了React18系列reconciler从0实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了React.js Gird 布局编写键盘组件,Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局2022-09-09
这篇文章主要为大家介绍了ahooks useRequest的源码精读解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中），这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下2023-01-01
详解React 如何防止 XSS 攻击论$$typeof 的作用
这篇文章主要介绍了详解React 如何防止 XSS 攻击论$$typeof 的作用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
最新评论