重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
react18中的Transition怎么用
这篇文章主要介绍“react18中的Transition怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react18中的Transition怎么用”文章能帮助大家解决问题。
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了吉阳免费建站欢迎大家使用！
React 18中，引入了一个新概念——transition，由此带来了一个新的API——startTransition和两个新的hooks——useTransition和usedeferredValue，本文由此展开使用尝鲜介绍。
1. 总览
本文分为4部分进行：
tansition产生初衷startTransition使用和介绍useTransition使用和介绍useDeferredValue使用和介绍
2. transition产生初衷
transtion 直接翻译为 过渡。tansition本质上是为了解决渲染并发问题所提出。在React中一旦组件状态改变并触发了重新渲染，则无法停止渲染。直到组件重新渲染完毕，页面才能继续响应用户的交互。
为此react 18中更新都可以划分为以下两类：
紧急更新（urgent update）：用户期望马上响应的更新操作，例如鼠标单击或键盘输入。过渡更新（transition update）：一些延迟可以接受的更新操作，如查询时，搜索推荐、搜索结果的展示等。
// 被startTransiton标记后为过渡更新
startTransition(()=> {
// 非紧急更新，会被降低优先级，延迟执行
setQueryValue(inputValue)
})
// 未被标记则马上执行
setInputValue(inputValue)在react 18中被startTrionstion标记的更新，即为过渡更新（执行的优先级被降低），此时react会根据内部的调度机制延迟执行内部的state更新。
开发中开发者可以通过transition hook决定哪些更新被标记为transition事件。一旦被标记则代表为低优先级执行，即react知道该state可以延迟更新，通过区分更新优先级，让高优先级的事件保持响应，提高用户交互体验，保持页面响应。
3. startTransiton
startTransiton使用介绍
const handleClick = () => {
// startTransition包裹标记为低优先级更新
startTransition(()=> {
setQueryValue(inputValue)
})
// 未被标记则马上执行
setInputValue(inputValue)
}首先我们来介绍下最简单的startTransition
startTransiton 是一个接受回调的函数，用于告知React需要延迟更新的state。
如果某个state的更新会导致组件挂起，则应该包裹在startTransition中
通过演示对比
这是一个对输入字符后展示搜索结果的场景模拟，通过伪造大量搜索结果，模拟容易卡顿的情况。
我们试着连续输入123，监听搜索框值value变化(urgent update)和搜索值searchVal变化(transition update)并输出到控制栏。
import React, { useEffect, useState, startTransition } from 'react';
import './App.css'
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ length: 10000 }, (_, index) => ({
id: index,
keyword: `${props.query} -- 搜索结果${index}`,
})) : [];
return resultList.map(({ id, keyword }) => (
{keyword}
))
}
const App = () => {
const [type, setTpye] = useState(1)
const [value, setValue] = useState('');
const [searchVal, setSearchVal] = useState('-');
useEffect(() => {
// 监听搜索值改变
console.log('对搜索值更新的响应++++++' + searchVal + '+++++++++++')
}, [searchVal])
useEffect(() => {
console.log('对输入框值更新的响应-----' + value + '-------------')
if (type === 1) {
setSearchVal(value || '-')
}
if (type === 2) {
startTransition(() => {
setSearchVal(value || '-')
})
}
}, [value, type]);
return (
setValue(e.target.value)} />
setTpye(1)}>normal 