2.19 startTransition方法及并发模式

一、startTransition方法及并发模式

1. 在React18之前，渲染是一个单一的、不间断地、同步的事务，一旦开始渲染就不能被中断

2. React18引入并发模式，它允许你将标记更新作为一个transitions，这会告诉React他们可以被中断执行，这样可以把紧急的任务先更新，不紧急的任务后更新

3. 简单使用：

   

   2023-08-04 10-15-05
4. 案例：

   import { useState } 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>
           </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('')
   
     const handleChange = (e) => {
       // 紧急
       setSearch(e.target.value)
       // 紧急
       setQuery(e.target.value)
     }
   
     return (
       <>
         <div>Default Template</div>
         <input type="text" value={search} onChange={handleChange} />
         <List query={query} />
       </>
     )
   }
   
   export default App
   

   功能：输入想要的文字内容，浏览器会标红展示输入的内容

   问题：两个紧急渲染，会出现先渲染，完成后输入框才出内容

5. 修改后：

   import { startTransition, useState } 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('')
   
     const handleChange = (e) => {
       // 紧急的
       setSearch(e.target.value)
       // 修改成非紧急
       startTransition(() => {
         setQuery(e.target.value)
       })
     }
   
     return (
       <>
         <div>Default Template</div>
         <input type="text" value={search} onChange={handleChange} />
         <List query={query} />
       </>
     )
   }
   
   export default App
   

   可以明显感觉到，输入框先展示，超多的内容后展示