React Hooks使用startTransition与useTransition教程示例

更新时间：2023年01月10日 09:37:12 作者：前端兰博

这篇文章主要为大家介绍了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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React18新特性startTransition详解

学习ahooks useRequest并实现手写
这篇文章主要为大家介绍了学习ahooks useRequest并实现手写示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
解决react antd Table组件使用radio单选框更新选中数据不渲染问题
这篇文章主要介绍了解决react antd Table组件使用radio单选框更新选中数据不渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
使用hooks写React组件需要注意的5个地方
这篇文章主要介绍了使用hooks写React组件需要注意的5个地方，帮助大家更好的理解和学习使用React组件，感兴趣的朋友可以了解下
2021-04-04
React实现二级联动的方法
这篇文章主要为大家详细介绍了React实现二级联动的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
react-router-dom 嵌套路由的实现
这篇文章主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
React如何解决fetch跨域请求时session失效问题
这篇文章主要给大家介绍了关于React如何解决fetch跨域请求时session失效问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
React Native验证码倒计时工具类分享
这篇文章主要为大家分享了React Native验证码倒计时工具类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
使用React+ts实现无缝滚动的走马灯详细过程
这篇文章主要给大家介绍了关于使用React+ts实现无缝滚动的走马灯详细过程,文中给出了详细的代码示例以及图文教程,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-08-08
React Router6.x路由表封装的两种写法
本文主要介绍了React Router6.x路由表封装的两种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
React代码分割的实现方法介绍
虽然一直有做react相关的优化,按需加载、dll 分离、服务端渲染,但是从来没有从路由代码分割这一块入手过,所以下面这篇文章主要给大家介绍了关于React中代码分割的方式,需要的朋友可以参考下
2022-12-12