React--setState是同步還是異步?


在react中,原生js監聽事件中的setState是同步的,如addEventListener、setTimeout等
而在react控制的事件處理函數中,setState是異步的,如onClick等

setState有兩種設置方式,

  1. setState傳入對象,直接修改state中的數據
  2. setState中傳入兩個函數,第一個函數有兩個參數,第一個參數是當前的state,第二個參數是當前的props,返回的是要修改的state對象,類似於第一種設置方式;第二個函數是更新后的回調函數。

react是如何控制同步還是異步?

react中是根據isBatchingUpdates來設置同步or異步。而isBatchingUpdates默認為false,即默認同步更新。其中有batchedUpdates函數,用來設置isBatchingUpdates

多次連續設置會合並處理

state:{foo : 10}
let foo1 = this.state.foo
this.setState({foo: foo1 + 1})
this.setState({foo: foo1 + 1})
this.setState({foo: foo1 + 1})
// 在最后foo依然為11 因為所有都合並到一次更新,state中的foo只改變了一次

函數傳參解決合並問題

state:{foo : 10}
function increment(state, prop){
   return {
      foo: state.foo + 1
   }
}
this.setState(increment)
this.setState(increment)
this.setState{increment)
// foo為13


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM