React18之状态批处理的使用.docxVIP

第

React18之状态批处理的使用

目录状态自动批处理17版18版退出状态自动批处理要点概述react在3月29号正式发布了18版本,此次更新包括:状态自动批处理,客户端渲染api的更新,新的hook等很多变化,本章先说一下状态批处理的变化.

Reactv18.0ReactBlog

状态自动批处理

18版本之前,在合成事件之外的原生事件中(例如setTimeout,onclick,promise),更新状态并不会进行批量处理(合并),这意味着在原生事件中多次调用状态更新会造成多次应用的重新渲染,往往我们只需要最后一次即可,react在18版本后优化了这个问题

import{useState}fromreact

functionApp(){

const[num1,setNum1]=useState(1)

const[num2,setNum2]=useState(1)

constadd=()={

setTimeout(()={

setNum1((pre)=pre+1)

setNum2((pre)=pre+1)

console.log(渲染了)

return(

divclassName=App