React 18中，引入了一个新概念——transition，由此带来了一个新的API——startTransition和两个新的hooks——useTransition和usedeferredValue。
1）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可以延迟更新，通过区分更新优先级，让高优先级的事件保持响应，提高用户交互体验，保持页面响应。
2）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 './index.css'
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ length: 100000 }, (_, index) => ({
id: index,
keyword: `${props.query} -- 搜索结果${index}`,
})) : [];
return resultList.map(({ id, keyword }) => (
{keyword}
))
}
export default () => {
const [type, setType] = useState(1)
const [value, setValue] = useState('');
const [searchVal, setSearchVal] = useState('');
useEffect(() => {
// 监听搜索值改变
console.log('对搜索值更新的响应++++++' + searchVal + '+++++++++++')
}, [searchVal])
useEffect(() => {
// 监听输入框值改变
console.log('对输入框值更新的响应-----' + value + '-------------')
}, [value])
useEffect(() => {
if (type === 1) {
setSearchVal(value)
}
if (type === 2) {
startTransition(() => {
setSearchVal(value)
})
}
}, [value]);
return (
StartTransition
setValue(e.target.value)} />
setType(1)}>normal
setType(2)}>transiton
);
}普通模式
startTransiton模式
和setTimeout的区别
就上面setSearchQuery的例子，使用setTimeout也能达到相似的目的，那这个startTransition和setTimeout有啥区别？
- 一个重要区别是setTimeout是「延迟」执行，startTransition是立即执行的，传递给startTransition的函数是同步运行，但是其内部的所有更新都会标记为非紧急，React将在稍后处理更新时决定如何render这些updates，这意味着将会比setTimeout中的更新更早地被render。
- 另一个重要区别是用setTimeout包裹的如果是内大面积的更新操作会导致页面阻塞不可交互，直到超时。这时候用户的输入、键盘按下等紧急更新操作将被阻止。而startTransition则不同，由于它所标记的更新都是可中断的，所以不会阻塞UI交互。即使用户输入发生变化，React也不必继续渲染用户不再感兴趣的内容。
- 最后，因为setTimeout是异步执行，哪怕只是展示一个小小的loading也要编写异步代码。而通过transitions，React可以使用hook来追踪transition的执行状态，根据transition的当前状态来更新loading。
3）useTransiton
useTransiton使用介绍
import { useTransiton } from 'react'
const [isPending, startTransition] = useTransiton({timeoutMs: 2000})
// 例如, 在pending状态下，您可以展示一个Spinner
{ isPending ? < Spinner /> : null }
- startTransition 是一个接受回调的函数，用于告知React需要延迟更新的state。
- isPending 是一个布尔值，这是react告知我们是否等待过渡完成的方式。
- useTransition 接受带有 timeoutMs 的延迟响应的值,如果给定的timeoutMs内未完成，它将会强制执行startTransition回调函数内state的更新。
import React, { useEffect, useState, useTransition } from 'react';
import './index.css'
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ length: 100000 }, (_, index) => ({
id: index,
keyword: `${props.query} -- 搜索结果${index}`,
})) : [];
return resultList.map(({ id, keyword }) => (
{keyword}
))
}
export default () => {
const [type, setType] = useState(1)
const [value, setValue] = useState('');
const [searchVal, setSearchVal] = useState('');
const [loading, startTransition] = useTransition({ timeoutMs: 2000 });
useEffect(() => {
// 监听搜索值改变
console.log('对搜索值更新的响应++++++' + searchVal + '+++++++++++')
}, [searchVal])
useEffect(() => {
// 监听输入框值改变
console.log('对输入框值更新的响应-----' + value + '-------------')
}, [value])
useEffect(() => {
if (type === 1) {
setSearchVal(value)
}
if (type === 2) {
startTransition(() => {
setSearchVal(value)
})
}
}, [value]);
return (
UseTransition
setValue(e.target.value)} />
setType(1)}>normal
setType(2)}>transiton
{loading && 数据加载中，请稍候...
}
);
}4）useDeferredValue
useDeferredValue使用介绍
const [value, setValue] = useState('')
// defferedValue值延后于state更新
const deferredValue = useDeferredValue(value, {timeoutMs: 2000})
- useDeferredValue 返回一个延迟响应的状态，可以设置最长延迟时间timeoutMs。
- 可以传入可选的timeoutMs，如果给定的timeoutMs内未完成，它将会强制更新。
- 与useTransition的不同： useTransition是处理一段逻辑，而useDeferred是产生一个新状态。
useDeferredValue通过useEffect监听传入值的变化，然后通过过渡任务执行值的改变。这样保证defrredValue的更新滞后于setState，同时符合过渡更新的原则，因为是通过transition 调度机制执行的。
import React, { useEffect, useState, useTransition, useDeferredValue } from 'react';
import './index.css'
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ length: 100000 }, (_, index) => ({
id: index,
keyword: `${props.query} -- 搜索结果${index}`,
})) : [];
return resultList.map(({ id, keyword }) => (
{keyword}
))
}
export default () => {
const [value, setValue] = useState('');
const searchValue = useDeferredValue(value, { timeoutMs: 2000 });
useEffect(() => {
console.log('对输入框值的响应--------' + value + '---------------')
}, [value])
useEffect(() => {
// 监听搜索值改变
console.log('对搜索值的更新响应++++++' + searchValue + '+++++++++++')
}, [searchValue])
return (
useDeferredValue
setValue(e.target.value)} />
useDeferredValue
);
};