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   （参考 后有改动）