Mobx重构React WebApp

cartoon 发布于2019-08-21 17:03 / 431人阅读

摘要：发现很有趣，所以我把这个项目用重构了一次。旧的版本是用全家桶，就是构建的在的的分支上。其次就是性能优化的问题。就是无论如何，只要和发生了变化，就要发生一次。因为和数据已经解耦了。会检测被观察的数据，只要数据发生改变，它就会去重新渲染。

背景

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

GPU云服务器云服务器 Mobx WebApp 网站重构数据重构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89063.html

Redux 的问题：React、MobX 和 Realm 能解决吗？

摘要：它是由一个非常聪明的人开发的，用来缓解在单页面应用中管理状态的问题。的问题没有一种适合所有场景的完美工具。为设计的是世界的另一个新增内容，但目前仅适用于。这将导致最后期限延长，并且留下更多需要我们维护的代码。原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不讨厌 ...

snifes 2019-08-21 16:41 评论0 收藏0
【译】Redux 还是 Mobx，让我来解决你的困惑！

摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 评论0 收藏0
基于Mobx的多页面小程序的全局共享状态管理实践

摘要：所以虽然是是用在小程序上，不过我想对于的状态管理，也有这么一丢丢启发。在目录下放入和这两个库，同时在目录下新建用于存放全局状态。建立由于小程序中不支持装饰器，所以采用了的写法。另外，小程序中不支持路径的省略。 what 名字很长很绕靠口，总的来说，本文是对开发小程序过程中使用mobx的一个总结。状态管理，相比大家也很熟悉，顾名思义，是对前端页面繁复的状态进行管理，在此，我也不过多赘...

SexySix 2019-08-20 18:20 评论0 收藏0
Electron 14.0.0 发布、StackBlitz 支持快速创建 Nuxt.js 应用 |

摘要：发布发布节奏变化从月份的开始，将每周发布一个新的稳定版本。将于年月日开始测试，稳定版将于年月日发布。一个使用和实现了个用户界面的页面。实践总结是一个现代的企业级框架，提供了强大的和许多开箱即用的功能。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x...

Jensen 2021-09-08 09:45 评论0 收藏0
前端每周清单第 50 期: AngularJS and Long Term Support, Web

摘要：在该版本发布之后，开发团队并不会继续发布新的特性，而会着眼于进行重大的错误修复。发布每六个星期，团队就会创建新的分支作为发布通道，本文即是对新近发布的版本进行简要介绍。 showImg(https://segmentfault.com/img/remote/1460000013229009); 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热...

DobbyKim 2019-08-26 11:38 评论0 收藏0