Mobx重构React WebApp

背景

前一阵子，我刚写了篇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

固然还有， 欢迎你们star和fork, 传送门