react18 异步同步中的setstate都是异步更新

74 阅读1分钟
import React, { useEffect, useState } from 'react';

  


function App() {

const [count, setCount] = useState(0);

  


// 异步更新

const onChangeAsyncState = () => {

setCount(count + 1);

console.log("同步", count);

};

  


const onResetState = () => {

setCount(0);

console.log(count);

};

  


// 同步更新

const onChangeSyncState = () => {

setTimeout(() => {

setCount(count + 1);

console.log("异步", count);

}, 10);

};

  


useEffect(()=> {

console.log("count", count);

},[count])

  


return (

<div>

<p>点击下面按钮,变更count</p>

<button onClick={onChangeAsyncState}>

异步更新:{count}

</button>

<button onClick={onResetState}>重置</button>

<button onClick={onChangeSyncState}>

同步更新:{count}

</button>

</div>

);

}

  


export default App;