react中setState同步 非同步問題

2022-09-14 19:03:14 字數 800 閱讀 3837

class example extends react.component ;

} componentdidmount() );

console.log(

this.state.val); //

第 1 次 log

this.setstate();

console.log(

this.state.val); //

第 2 次 log

settimeout(() =>);

console.log(

this.state.val); //

第 3 次 log

this.setstate();

console.log(

this.state.val); //

第 4 次 log

}, 0);

} render()

};

1、第一次和第二次都是在 react 自身生命週期內,觸發時 isbatchingupdates 為 true,所以並不會直接執行更新 state,而是加入了 dirtycomponents,所以列印時獲取的都是更新前的狀態 0。

2、兩次 setstate 時,獲取到 this.state.val 都是 0,所以執行時都是將 0 設定成 1,在 react 內部會被合併掉,只執行一次。設定完成後 state.val 值為 1。

3、settimeout 中的**,觸發時 isbatchingupdates 為 false,所以能夠直接進行更新,所以連著輸出 2,3。

輸出: 0 0 2 3

react中state與setstate的使用

我們可以利用state來定義一些變數的初始值 放在construcor裡 this.state 要更改state裡的值,注意要遵循react裡immutable規範,state不允許我們做任何改變,只能通過setstate來更改 const list this state.list list.spl...

React中setState為非同步機制

setstate用來更改state,並觸發render方法重新渲染頁面,這之間要經過react核心中diff演演算法比較dom樹,最終決定是否需要被渲染如何渲染。如何在第一時間獲取並應用setstate的值,set完第一時間呼叫方法即可獲取 如 this.setstate nowstate 便利 1...

React中setState修改深層物件

在react中經常會使用到setstate,因為在react生態中,state就是一切.在開發過程中,時長會在state中遇到一些比較複雜的資料結構,類似下面這樣的 state objb objc objd d 這時需要我們修改list中obja中的name屬性和objd的屬性,遇到這樣的情況我們一...