為何要在 React 的 setState() 內傳入 function

March 6, 2017

主要記錄一下在 Medium 上所看到的 Functional setState is the future of React 文章的一些重點

TL; DR

  • state 的更新可能是非同步的 - 參考文章
  • setState() 接受一個 function (state, props) 作為參數被傳入。
  • 如果在一個 method 內多次呼叫 setState()並不會一次做完多次的 setState
  • 如果傳入到 setState() 內的是一個 Object,React 更新 state 會透過 Object Composition(Merging) 方式,如果它們都有相同的 key 會造成 state 不是如預期地被更新。
  • 傳入 objectsetState() 並不是問題的所在,實際上的問題是,當你想要從 previous state 去計算 next state,這是不安全的,因為 this.propsthis.state 是非同步的被更新,你不能依賴它們的值來計算 next state。
  • 當 React 遇到多次的 functional setState() 被呼叫,這些 function 會被 React queue,並按照呼叫順序來更新 state。

Dan Abramov 在 twitter 上的推文

See the Pen JEoEgN by Sophia Shoemaker (@mrscobbler) on CodePen