React 全家桶构建 React 版 Cnode 社区

[Juliiii]

背景

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

[marknote]

看起来 mobx 是比较简单。不知道有没有什么副作用