背景
前一陣子，我剛寫了篇React全家桶實(shí)戰(zhàn)晨逝，介紹了下我用react全家桶構(gòu)建一個(gè)react webapp的中遇到的一些問題蛾默。后來，我發(fā)現(xiàn)了mobx捉貌。然后靜下心去看一看它的文檔支鸡。發(fā)現(xiàn)很有趣，所以我把這個(gè)項(xiàng)目用mobx重構(gòu)了一次趁窃。舊的版本是用react全家桶牧挣，就是react+redux構(gòu)建的, 在github的old-verson的分支上。大家有興趣也可以看看醒陆。
源碼地址
如果可以瀑构，希望大家star一下，給我點(diǎn)鼓勵(lì)刨摩。感謝~
開發(fā)體會(huì)
- 首先redux很強(qiáng)大寺晌，單項(xiàng)數(shù)據(jù)流的思想世吨，可以讓我們很好地去將數(shù)據(jù)和UI解耦。我們要修改UI呻征，只能通過發(fā)起一個(gè)action給reducer耘婚，然后reducer經(jīng)過一系列操作，得出一些新的state,然后這個(gè)state便會(huì)讓UI更新陆赋。但是有個(gè)比較蛋疼的地方就是沐祷，我們要寫得太多了，我們最起碼要寫一個(gè)actionType, 一個(gè)actionCreator奏甫， 一個(gè)reducer戈轿，當(dāng)然還得創(chuàng)建一個(gè)store。如果有異步操作阵子，那還得寫更多一點(diǎn)思杯，這會(huì)讓我開發(fā)起來的時(shí)候比較枯燥。不知道你們有沒有挠进，反正色乾，我是有時(shí)候想到要寫那么多東西，我就有點(diǎn)動(dòng)力不足了领突。
- 其次就是性能優(yōu)化的問題暖璧。就react中每個(gè)組件都有一個(gè)shouldComponentUpdate的函數(shù)，不過它默認(rèn)總是返回true的君旦。就是無論如何澎办，只要state和props發(fā)生了變化，就要發(fā)生一次render金砍。但是有時(shí)候是不需要更新的局蚀。雖然可以引入immutable-js來創(chuàng)建js不可變的數(shù)據(jù)，加上在shouldComponentUpdate搞點(diǎn)判斷恕稠。但是琅绅，額，好吧鹅巍，我覺得引入也挺麻煩的千扶，感覺有點(diǎn)難以在現(xiàn)有的項(xiàng)目里插入（大神別噴我~）。
- 最后呢骆捧，mobx可以比較好解決我上面的兩個(gè)問題澎羞。mobx的寫法不難，看一個(gè)下午敛苇，就可以開始動(dòng)手寫代碼了妆绞。而且對在原來代碼上修改可以比較迅速。因?yàn)閁I和數(shù)據(jù)已經(jīng)解耦了。你只要在store與UI和store的連接部分修改即可摆碉。還有就是mobx讓你不再使用setState,那你也可以規(guī)避setState的異步更新的問題塘匣。mobx會(huì)檢測被觀察的數(shù)據(jù)，只要數(shù)據(jù)發(fā)生改變巷帝，它就會(huì)去重新渲染UI忌卤。當(dāng)然還有很多很好的地方，每個(gè)人理解不一樣罷了楞泼。這里就不深究mobx驰徊。畢竟我也只是處于一個(gè)能用的階段。
最后
最后這里展示下demo
demo
當(dāng)然還有堕阔， 歡迎大家star和fork, 傳送門
