React + Mobx構建React-Cnode

背景

前一陣子，我剛寫了篇React全家桶實戰，介紹了下我用react全家桶構建一個react webapp的中遇到的一些問題。後來，我發現了mobx。而後靜下心去看一看它的文檔。發現頗有趣，因此我把這個項目用mobx重構了一次。舊的版本是用react全家桶，就是react+redux構建的, 在github的old-verson的分支上。你們有興趣也能夠看看。

源碼地址

傳送門
若是能夠，但願你們star一下，給我點鼓勵。感謝~

開發體會

• 首先redux很強大，單項數據流的思想，可讓咱們很好地去將數據和UI解耦。咱們要修改UI，只能經過發起一個action給reducer，而後reducer通過一系列操做，得出一些新的state,而後這個state便會讓UI更新。可是有個比較蛋疼的地方就是，咱們要寫得太多了，咱們最起碼要寫一個actionType, 一個actionCreator， 一個reducer，固然還得建立一個store。若是有異步操做，那還得寫更多一點，這會讓我開發起來的時候比較枯燥。不知道大家有沒有，反正，我是有時候想到要寫那麼多東西，我就有點動力不足了。
• 其次就是性能優化的問題。就react中每一個組件都有一個shouldComponentUpdate的函數，不過它默認老是返回true的。就是不管如何，只要state和props發生了變化，就要發生一次render。可是有時候是不須要更新的。雖然能夠引入immutable-js來建立js不可變的數據，加上在shouldComponentUpdate搞點判斷。可是，額，好吧，我以爲引入也挺麻煩的，感受有點難以在現有的項目裏插入（大神別噴我~）。
• 最後呢，mobx能夠比較好解決我上面的兩個問題。mobx的寫法不難，看一個下午，就能夠開始動手寫代碼了。並且對在原來代碼上修改能夠比較迅速。由於UI和數據已經解耦了。你只要在store與UI和store的鏈接部分修改便可。還有就是mobx讓你再也不使用setState,那你也能夠規避setState的異步更新的問題。mobx會檢測被觀察的數據，只要數據發生改變，它就會去從新渲染UI。固然還有不少很好的地方，每一個人理解不同罷了。這裏就不深究mobx。畢竟我也只是處於一個能用的階段。

最後

最後這裏展現下demo

demo

固然還有， 歡迎你們star和fork, 傳送門