快捷導(dǎo)航

React18之狀態(tài)批處理的使用

更新時(shí)間：2022年05月03日 10:58:55 作者：yjwlike

本文主要介紹了React18之狀態(tài)批處理的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

狀態(tài)自動(dòng)批處理

18版本之前, 在合成事件之外的原生事件中(例如 setTimeout, onclick, promise) , 更新?tīng)顟B(tài)并不會(huì)進(jìn)行批量處理(合并), 這意味著在原生事件中多次調(diào)用狀態(tài)更新會(huì)造成多次應(yīng)用的重新渲染, 往往我們只需要最后一次即可, react在18版本后優(yōu)化了這個(gè)問(wèn)題

import { useState } from 'react'
 
function App() {
  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(1)
  const add = () => {
    setTimeout(() => {
      setNum1((pre) => pre + 1)
      setNum2((pre) => pre + 1)
    })
  }
  console.log('渲染了')
  return (
    <div className="App">
      <header className="App-header">react 18</header>
      <p>num1 : {num1}</p>
      <p>num2 : {num2}</p>
      <button onClick={add}>+1</button>
    </div>
  )
}
 
export default App

17版

點(diǎn)擊四下后,組件渲染了8次

18版

點(diǎn)擊4下后, 組件渲染了4次

退出狀態(tài)自動(dòng)批處理

在某些場(chǎng)景下我們可能不需要批處理狀態(tài)更新, 此時(shí)我們需要用到 react-dom 提供的flushSync函數(shù), 該函數(shù)需傳入一個(gè)回調(diào), 并且會(huì)同步刷新回調(diào)中的狀態(tài)更新

import { useState } from 'react'
import { flushSync } from 'react-dom'
 
function App() {
  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(1)
  const add = () => {
    setTimeout(() => {
      flushSync(() => {
        setNum1((pre) => pre + 1)
      })
      flushSync(() => {
        setNum2((pre) => pre + 1)
      })
    })
  }
  console.log('渲染了')
  console.log(num1, num2)
  return (
    <div className="App">
      <header className="App-header">react 18</header>
      <p>num1 : {num1}</p>
      <p>num2 : {num2}</p>
      <button onClick={add}>+1</button>
    </div>
  )
}
 
export default App