2.20 useTransition与useDeferredValue

一、useTransition与useDeferredValue

1. useTransition是一个让在不阻塞UI的情况下来更新状态的ReactHook，返回一个状态值表示过度任务的等待状态，以及一个启动该过度任务的函数

   import { useState, useTransition } from 'react'
   
   function List({ query }) {
     const items = []
     const word = 'hello snow'
   
     if (query !== '' && word.includes(query)) {
       const arr = word.split(query)
       for (let i = 0; i < 10000; i++) {
         items.push(
           <li key={i}>
             {arr[0]}
             <span style={{ color: 'red' }}>{query}</span>
             {arr[1]}
           </li>
         )
       }
     } else {
       for (let i = 0; i < 10000; i++) {
         items.push(<li key={i}>{word}</li>)
       }
     }
     return (
       <>
         <ul>{items}</ul>
       </>
     )
   }
   
   function App() {
     const [search, setSearch] = useState('')
   
     const [query, setQuery] = useState('')
   
     // 返回Boolean类型的状态，函数
     const [pending, startTransition] = useTransition()
   
     const handleChange = (e) => {
       // 紧急的
       setSearch(e.target.value)
       // 修改成非紧急
       startTransition(() => {
         setQuery(e.target.value)
       })
     }
   
     return (
       <>
         <div>Default Template</div>
         <input type="text" value={search} onChange={handleChange} />
         {pending && <div>loading</div>}
         <List query={query} />
       </>
     )
   }
   
   export default App
   

2. 使用useDeferredValue

   import { useState, useDeferredValue } from 'react'
   
   function List({ query }) {
     const items = []
     const word = 'hello snow'
   
     if (query !== '' && word.includes(query)) {
       const arr = word.split(query)
       for (let i = 0; i < 10000; i++) {
         items.push(
           <li key={i}>
             {arr[0]}
             <span style={{ color: 'red' }}>{query}</span>
             {arr[1]}
           </li>
         )
       }
     } else {
       for (let i = 0; i < 10000; i++) {
         items.push(<li key={i}>{word}</li>)
       }
     }
     return (
       <>
         <ul>{items}</ul>
       </>
     )
   }
   
   function App() {
     const [search, setSearch] = useState('')
     // 得到对应search一样的值，只不过是一个延迟的副本
     const [query] = useDeferredValue(search)
   
     const handleChange = (e) => {
       // 紧急的
       setSearch(e.target.value)
     }
   
     return (
       <>
         <div>Default Template</div>
         <input type="text" value={search} onChange={handleChange} />
         <List query={query} />
       </>
     )
   }
   
   export default App