執(zhí)行setState()之后干了什么鳖藕?
setState()方法通過一個隊列機制實現(xiàn)state更新,當執(zhí)行setState()的時候憔四,會將需要更新的state合并之后放入狀態(tài)隊列赋咽,而不會立即更新this.state(可以和瀏覽器的事件隊列類比)篙螟。如果我們不使用setState而是使用this.state.key來修改览闰,將不會觸發(fā)組件的re-render芯肤。如果將this.state賦值給一個新的對象引用,那么其他不在對象上的state將不會被放入狀態(tài)隊列中压鉴,當下次調(diào)用setState()并對狀態(tài)隊列進行合并時崖咨,直接造成了state丟失。
Object.assign({}, { a:2,b:3}, {a:1,c:4});
對象合并的操作油吭,屬性值將會以最后設置的屬性的值為準击蹲,如果發(fā)現(xiàn)之前存在相同的屬性,那么上鞠,這個屬性將會被后設置的屬性所替換际邻。所以芯丧,也就不難理解為什么我們調(diào)用了兩次?setState()?之后芍阎,count?依然只增加了 1 了。
但是如果執(zhí)行函數(shù)缨恒,就得到不一樣的結果~
與傳入對象更新 state 的方式不同谴咸,我們傳入函數(shù)來更新 state 的時候轮听,React 會把我們更新 state 的函數(shù)加入到一個隊列里面,然后岭佳,按照函數(shù)的順序依次調(diào)用血巍。同時,為每個函數(shù)傳入 state 的前一個狀態(tài)珊随,這樣述寡,就能更合理的來更新我們的 state 了。