t.state = {};會改變 state，但是不能觸發render t.setState({images:[]}); 是 array merge，并不是直接賦值state，并且是[異步](https://segmentfault.com/q/1010000003708852)的 render。然后計算虛擬DOM 再 決定是否改變DOM，或者說改變那些DOM，怎么操作DOM，這也是正確的改變state的方法，除此以外，任何對state進行改變的方式都是錯誤的，例如上面的方式。為了高效的操作DOM，所以必須采用一些手段，計算 react diff，虛擬DOM技術，這些都是為了提高DOM操作效率（越快，越少的操作），所以循環是的組件需要加一個key這也是為了更方便的計算DOM吧。 每次t.setState()都會執行 render() 相當于是服務端的$this->render()一樣。  由于react的開發理念/方式和傳統（jQuery）開發有很大的不同，所以有一些需要注意的問題。 還是以上面的例子為例，按照傳統開發方式開發時，當有新的消息，我們需要操作DOM將新消息“插入”到消息列表，這個插入動作可以帶點特效，讓這個來了新消息的過程更加生動形象。其實在傳統開發中這樣的例子有很多，比如，發布，刪除，這些操作，都可以帶一些“動作”，以使操作表現得生動具體，也就是說很多時候我們不是簡單的改變DOM，還會有一些為了描述當前操作的“動效（動作/效果）”的。這樣能增強應用操作的體驗。不然如果只是改變一下DOM，在瀏覽器上我們是看不到渲染過程的，只是看到頁面內容生硬的改變了而已。 >[danger] 這種頁面元素改變的方式顯得很突兀，非常生硬，用戶體驗不友好。 當我們使用react時就會遇到這個問題，由于數據和DOM對應，我們并不需要關心DOM，有新消息時，react經過計算DOM different 找到最優的方式去操作DOM，所以新消息感覺是生硬的插入到文檔中，我們只能感覺到突然多了一條消息，顯然這種體驗沒有上面傳統方式那樣好了，感覺不到新消息“插入進來”的效果。并且如果當一個數據放生多次改變，但最終和最初數據相同，那么react就會得到數據沒有變動，因而就不會有DOM操作了，比如讓一個點移到右邊后再移回來，由于setState是異步的，所以可能我們只會看到這個點待在原地并沒有動，而是用傳統方式就不會有這個問題，所以需要注意點，注意setState是怎么處罰渲染的。 所以當由傳統開發轉向react時需要注意可考慮這些問題。 但其實這些并不是問題，我們通過其他方式照樣可以實現傳統開發中的“動效”。 無論怎樣，react還是極大的提高了我們的開發效率，這點是毋庸置疑的。 ### 臨時筆記 state在釘釘項目中，使用路由時好像有緩存，如果不重置還會有緩存。我在想state這個東西到底是以一種什么形式存在的，全局？刷新就沒有了，是否可以使用HTML5的緩存將它緩存起來呢？？？？？？ 2017-1-25 10:36:01 ### 擴展 [淺談前端狀態管理（上）](https://zhuanlan.zhihu.com/p/25800767) [React中使用CSSTransitionGroup插件實現輪播圖 - 勤勞的小葉醬 - 博客園](http://www.cnblogs.com/diligentYe/p/6637585.html) [我的職業是前端工程師【九】：你應該知道的單頁面應用的五要素](https://zhuanlan.zhihu.com/p/25858609) [從零開始手把手教你實現一個Virtual DOM](https://mp.weixin.qq.com/s/viBtv7KSD70qrlAhUMsjDA) [你真的理解setState嗎？](https://mp.weixin.qq.com/s/_u_gqFe3t8lAAxiN724gpg) ---- update time: 2017-5-11 23:28:56