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

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

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

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

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

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版

點擊四下后,組件渲染了8次

18版

點擊4下后, 組件渲染了4次

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

在某些場景下我們可能不需要批處理狀態(tài)更新, 此時我們需要用到 react-dom 提供的flushSync函數, 該函數需傳入一個回調, 并且會同步刷新回調中的狀態(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

要點概述

1. 原生事件內狀態(tài)更新改為批量處理

2. 不需要批量處理時使用 react-dom 提供的flushSync函數, 此函數同步刷新參數回調內的狀態(tài)更新

到此這篇關于React18之狀態(tài)批處理的使用的文章就介紹到這了,更多相關React18 狀態(tài)批處理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React Store及store持久化的使用教程
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
詳解React中setState回調函數
這篇文章主要介紹了詳解React中setState回調函數，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
useState?解決文本框無法輸入的問題詳解
這篇文章主要為大家介紹了useState?解決文本框無法輸入的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
使用react的7個避坑案例小結
React是個很受歡迎的前端框架。今天我們探索下React開發(fā)者應該注意的七點，感興趣的小伙伴們可以參考一下
2021-05-05
react源碼層深入刨析babel解析jsx實現
同作為MVVM框架，React相比于Vue來講，上手更需要JavaScript功底深厚一些，本系列將閱讀React相關源碼，從jsx -> VDom -> RDOM等一些列的過程，將會在本系列中一一講解
2022-10-10
詳解React如何獲取狀態(tài)的舊值
最近剛開始接觸 React,突然腦海出現一個問題,React中怎么在狀態(tài)更新時獲取它的舊值,特別是如果你之前用過 Vue,你可能會想知道 React 中有沒有類似 Vue 的 watch 屬性,那么react中怎么實現呢？本文就給大家介紹一下React如何獲取狀態(tài)的舊值,需要的朋友可以參考下
2024-07-07
React Native開發(fā)封裝Toast與加載Loading組件示例
這篇文章主要介紹了React Native開發(fā)封裝Toast與加載Loading組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
比ant更豐富Modal組件功能實現示例詳解
這篇文章主要為大家介紹了比ant更豐富Modal組件功能實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
React?Fiber?鏈表操作及原理示例詳解
這篇文章主要為大家介紹了React?Fiber?鏈表操作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
react組件的創(chuàng)建與更新實現流程詳解
React組件分為函數組件與class組件；函數組件是無狀態(tài)組件，class稱為類組件；函數組件只有props，沒有自己的私有數據和生命周期函數；class組件有自己私有數據(this.state)和生命周期函數
2022-10-10