此文主要探討了 React JS 中的 setState 背後的機制，供深入學習 React 研究之用。

在課程 React.js入門基礎與案例開發 中，有些同學會發現 React JS 中的 setState 的表現好像有點怪異，和理解中的 state 更新機制不太一樣，下麵我們就來簡單探討下 setState 背後的機制。
課程中的其他常見小問題請常見 React.js 開發參見問題 Q&A。

1 setState 問題的復現

我們看下麵一段簡單的代碼，代碼通過點擊一個按鈕，改變 state 中的 clicked 值。在修改值後進行 clicked 值的輸出，你嘗試猜測一下輸出的值是什麼？

許多同學在自己寫代碼遇到類似邏輯的時候都會發現，console.log(this.state.clicked); 這段代碼輸出的不是我們預期的 true，而是 false。
這是為什麼呢？

2 setState 的內部機制

遇到問題我們還是去官方文檔找線索。
我們看到 state 的章節有下麵這段話。

文章鏈接在這裡：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous。

我們會發現其實 React 的 setState 方法是一個非同步的方法，React 會將所有的 setState 方法打包成一次進行更新，類似於快遞點寄快遞，囤積了一些包裹後一次投遞，而不是你每次修改 state 都會進行更新。
這樣的設計主要是為了提高 UI 更新的性能，我們知道 React 中 state 的改變會導致 UI 的更新。
如果需要進行同步操作邏輯，那麼在回調函數里添加邏輯即可。

{% codeblock lang:js%}

handleClick = () => {
this.setState({
clicked: true
}, () => console.log(this.state.clicked)) //這時候輸出的是 true
}

{% endcodeblock %}

3 state 的更新時機

任何 state 的更新都會導致 React 進行重新渲染。props 也會導致 React 進行重新渲染。組件與父組件的更改同樣也會引起 React 的重新渲染。
那麼我們有沒有辦法手動控制 React 是否進行渲染呢？
這裡，你應該想起來生命周期函數里有一個方法 shouldComponentUpdate。
shouldComponentUpdate 方法官方文檔。
此方法預設每次在需要進行重新渲染時返回 true，但是在這個函數里你可以添加自己的邏輯，控制 React 不進行渲染以及渲染的條件。
那麼，同樣，我們也可以在此函數中定義那些我們關註的 state ，只有當它們變化才讓 React 進行重新渲染，而其他一些不相關的 state 的值即使變化了，我們也可以讓 React 不進行渲染。
理解了這些，那麼在你進行相關性能優化時就非常有用。