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 }) => ( <li key={id}>{keyword}</li> ))}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 ( <div className='App'> <h3>StartTransition</h3> <input value={value} onChange={e => setValue(e.target.value)} /> <div className={`type_button ${type === 1 ? 'type_button_checked' : ''}`} onClick={() => setType(1)}>normal</div> <div className={`type_button ${type === 2 ? 'type_button_checked' : ''}`} onClick={() => setType(2)}>transiton</div> <ul> <SearchResult query={searchVal}></SearchResult> </ul> </div> );}一般模式
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 }) => ( <li key={id}>{keyword}</li> ))}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 ( <div className='App'> <h4>UseTransition</h4> <input value={value} onChange={e => setValue(e.target.value)} /> <div className={`type_button ${type === 1 ? 'type_button_checked' : ''}`} onClick={() => setType(1)}>normal</div> <div className={`type_button ${type === 2 ? 'type_button_checked' : ''}`} onClick={() => setType(2)}>transiton</div> {loading && <p>数据加载中，请稍候...</p>} <ul> <SearchResult query={searchVal}></SearchResult> </ul> </div> );}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 }) => ( <li key={id}>{keyword}</li> ))}export default () => { const [value, setValue] = useState(''); const searchValue = useDeferredValue(value, { timeoutMs: 2000 }); useEffect(() => { console.log('对输入框值的响应--------' + value + '---------------') }, [value]) useEffect(() => { // 监听搜寻值扭转 console.log('对搜寻值的更新响应++++++' + searchValue + '+++++++++++') }, [searchValue]) return ( <div className='App'> <h3>useDeferredValue</h3> <input value={value} onChange={e => setValue(e.target.value)} /> <div className='useDeferredValue'>useDeferredValue</div> <ul> <SearchResult query={searchValue}></SearchResult> </ul> </div> );};