對react setState 的理解

2022-09-01 19:06:15 字數 1733 閱讀 7465

setstate是非同步的,對於這個我們隨便測試一些就知道的,關於為什麼是非同步的可以參考部落格的一些見解。

我們翻開react原始碼(version:

16.3.2), 首先是 setstate部分,看到這裡接受兩個引數partialstate (區域性狀態,限定只有物件和函式可以作為第乙個引數), callback

component.prototype.setstate = function

(partialstate, callback) ;

然後是更新部分enqueuesetstate 函式

enqueuesetstate: function (instance, partialstate, callback) 

var expirationtime = computeexpirationforfiber(fiber);

var update = ;

insertupdateintofiber(fiber, update);

schedulework(fiber, expirationtime);

}

function insertupdateintofiber(fiber, update) 

} // if there's only one queue, add the update to that queue and exit.

if (queue2 === null)

// if either queue is empty, we need to add to both queues.

if (queue1.last === null || queue2.last === null)

// if both lists are not empty, the last update is the same for both lists

// the lists.

insertupdateintoqueue(queue1, update);

// but we still need to update the `last` pointer of queue2.

queue2.last = update;

}

待續。。。

元件如下

import react, from 'react';

state =

countchange = () => )

this.setstate()

console.log('count change')

}countchange2 = () => ))

this.setstate(prestate => ())

console.log('count change2')

}unsafe_componentwillmount()

render()

加一加一);}

}render()

}

測試中在setstate中分別使用 物件引數和函式作為引數,結果說明 函式作為引數的方式是準確的,猜想,主要是物件的值已經確定了,而用使用函式是使用的prestate作為引數,這個引數是在**執行的時候傳遞下來的,所以是準確(在乙個函式呼叫裡面多次this.setstate的情況下)。在第一種情況下面setstate第二個引數是**函式~在**函式中使用this.state.count中獲取也是對的。

React setState 立即生效的幾種方式?

首先了解乙個造成不能立即生效的原因,setstate非同步的原因是因為react的監聽事件為合成事件,state執行過程中會經歷乙個生命週期函式,執行多個setstate會被合併,提公升效能,下面幾種方式可以避免我們的問題 setstate合適同步何時非同步?由react控制的事件處理程式,以及生命...

react setState 陣列 物件多種方式

this.setstate array.splice 0,1 this.setstate array.splice array.length 1 this.setstate array.splice index,1 this.setstate this.setstate this.setstate ...

php對mysql的了解 對MySQL的初步了解

首先安裝mysql 一.單詞部分 networking網路 option選擇 port埠 firewall防火牆 engine引擎 standard標準 character字元 collation校對 stirage儲存 二.預習部分 1.請寫出建立和刪除資料庫的sql語句 create datab...