日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React18之狀態批處理的使用_React

作者：yjwlike ? 更新時間： 2022-06-28 編程語言

react在3月29號正式發布了18版本, 此次更新包括: 狀態自動批處理, 客戶端渲染api的更新, 新的hook等很多變化, 本章先說一下狀態批處理的變化.

React v18.0 – React Blog

狀態自動批處理

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

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次

?退出狀態自動批處理

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

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. 原生事件內狀態更新改為批量處理

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

原文鏈接：https://blog.csdn.net/m0_58239318/article/details/124170539

欄目分類
最近更新