React?Hooks使用startTransition與useTransition教程示例

更新時間：2023年01月10日 09:37:12 作者：前端蘭博

這篇文章主要為大家介紹了React?Hooks使用startTransition與useTransition教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

今天帶來的是react18版本推出的全新hooks:useTransition,它的使用范圍主要是用于性能優(yōu)化，今天我們一探究竟吧。

需求分析

假設現(xiàn)在有如下需求：當用戶在輸入框查詢數(shù)據(jù)時，需要實時根據(jù)用戶輸入數(shù)據(jù)進行搜索提示項的展示。與以往不同的是，提示列表的個數(shù)是十分龐大的，每次都在10000條以上。

設計過程

import {useState} from "react";
import styles from "./index.module.css";
const Home:React.FC = () => {
  const [val,setVal] = useState('');
  const [arr,setArr] = useState<number[]>([]);
  //根據(jù)用戶輸入獲取查詢列表
  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，但是很明顯出現(xiàn)了卡頓現(xiàn)象，大約2s后表單和列表數(shù)據(jù)都被渲染。

現(xiàn)象分析

由于我們使用了useState對表單和列表的數(shù)據(jù)進行了更新，二者觸發(fā)批量更新機制但無優(yōu)先級差異。實際上為了保證用戶體驗感，我們需要保證輸入框的輸入數(shù)據(jù)永遠處于最新顯示，而列表的提示可以稍微滯后顯示。基于優(yōu)先級渲染問題，react提出了startTransition方案。使用startTransition觸發(fā)的更新優(yōu)先級會被降低，從而優(yōu)雅降級，提高頁面刷新和渲染性能。

startTransition使用

在更新大數(shù)據(jù)更新或者大列表dom時，為了頁面性能和渲染優(yōu)化，我們可以對大數(shù)據(jù)或列表的更新過程采用startTransition優(yōu)雅降級處理。

使用

startTransition(()=>{
    //大數(shù)據(jù)列表數(shù)據(jù)獲取
    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[]>([]);
  //根據(jù)用戶輸入獲取查詢列表
  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，此處的輸入框數(shù)據(jù)優(yōu)化了許多，并且大數(shù)據(jù)列表展示卡頓達到了一定程度優(yōu)化。

useTransition

useTransition和startTransition的功能一模一樣，只是通過hooks的展現(xiàn)方式出現(xiàn)，并且增加了保存列表是否在渲染等待的狀態(tài)。

使用

第一個變量保存是否渲染中的狀態(tài),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;

效果展示

我們根據(jù)useTransition返回的pending狀態(tài)添加判斷，如果列表在渲染中就添加提示加載狀態(tài)，否則正常顯示列表。