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

主要記錄一下在 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 不是如預期地被更新。
• 傳入 object 到 setState() 並不是問題的所在，實際上的問題是，當你想要從 previous state 去計算 next state，這是不安全的，因為 this.props 和 this.state 是非同步的被更新，你不能依賴它們的值來計算 next state。
• 當 React 遇到多次的 functional setState() 被呼叫，這些 function 會被 React queue，並按照呼叫順序來更新 state。

Dan Abramov 在 twitter 上的推文

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