在v18之前,只有事件回调、生命周期回调中的更新会批处理,比如onClick。而在promise、setTimeout等异步回调中不会批处理,这就会导致多次render。React18实现了自动批处理,减少了更新次数,提升性能。
接下来,简单分析下setState例子,加深对批处理更新的理解。
const [myState,setMyState] = useState(1);
const [flag, setFlag] =useState(true);
console.log('render');
const handleClick = ()=>{
setMyState((myState) =>myState+6);
console.log('myState1',myState);
setMyState(myState+1);
setMyState((myState) =>myState+6);
console.log('myState2',myState);
setFlag((flag)=>!flag);
setTimeout(()=>{
setMyState(myState+1);
console.log('myState3',myState);
setMyState((myState) =>myState+10);
console.log('myState4',myState);
},1000)
}
return (
<p>
<