react18 startTransition过度任务 性能优化
官方:
React.startTransition
不提供 isPending
的标志。要跟踪过渡的待定状态,请参阅 React.useTransition
。
由于React.startTransition
不支持 跟踪pending状态,则示例使用hooks - useTransition
示例判断跟踪pending状态,判断处理
// react 18+ 支持startTransition import React, { memo, useState, useTransition } from 'react' const mockDataArray = Array(10000).fill(1) function ShowText({ query, i }:any) { const text = 'asdfghjk' + i let children if (text.indexOf(query) > 0) { const arr = text.split(query) children = <div> {arr[0]} <span style={{color: 'pink'}}>{query}</span> {arr[1]} </div> } else { children = <div>{text}</div> } return children } function List ({ query }:any) { console.log('渲染。。。') return ( <> { mockDataArray.map((_, index) => { return <React.Fragment key={index}> <ShowText query={query} i={index}/> </React.Fragment> }) } </> ) } const NewList = memo(List) const App = () => { const [value, setValue] = useState('') const [isTransition, setIsTransition] = useState(false) const [query, setQuery] = useState('') const [isPending, startTransition] = useTransition() const handleChange = (e:any) => { setValue(e.target.value) if (isTransition) { startTransition(() => { setQuery(e.target.value) }) } else { setQuery(e.target.value) } } return ( <> <p> <button onClick={() => setIsTransition(!isTransition)} > {isTransition ? 'transition' : 'normal'} </button> </p> <input type="text" placeholder='请输入要检索的内容' value={value} onChange={handleChange} /> { isPending ? <div>Loading...</div> : <NewList query={query}/> } </> ) } export default App
参考
https://zh-hans.reactjs.org/docs/react-api.html#starttransition
https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition
https://blog.csdn.net/weixin_43294560/article/details/121428531 (参考 后有改动)