时间旅行调试(Time Travel Debugging)虽然mobx-react-devtools不直接提供时间旅行调试,但你可以使用mobx-state-tree库,它与MobX兼容,并提供了时间旅行功能 mobx-state-tree创建了一个可逆的操作历史,允许你回放和重播状态的变更。TypeScript支持MobX与TypeScript有很好的集成,可以提供类型安全和更好的代码提示。 myStore.setData(data); }); }); }微核架构(Microkernel Architecture)MobX的核心很小,可以根据需要选择性地引入额外的功能,如mobx-state-tree import { types, onSnapshot, IStateTreeNode } from 'mobx-state-tree'; const Todo = types.model({
说到 React 状态管理,必提的肯定是 Redux 与 MobX,2018 年快过去了,它们依然是最火热的状态管理工具,也有一些基于 Redux 的,如 dva、rematch 等,也有新的,如 mobx-state-tree
本期精读的文章是:Immutable 结构共享是如何实现的 鉴于 mobx-state-tree 的发布,实现了 mutable 到 immutable 数据的自由转换,将 mobx 写法的数据流,无缝接入 既然清楚了结构共享怎么做,就更加想知道 mobx-state-tree 是如何做到 mutable 数据到 immutable 数据转换了,敬请期待下次的源码分析(不一定在下一期)。
3、数据结构化,代表框架 – mobx-state-tree mobx-state-tree 是典型结构化 store 组织的代表,这种组织形式适合一体化 app 开发,比如很多页面之间细粒度数据需要联动
TypeArray、websocket详细知识、canvas一些api知识、正则表达式等...) 4、常用框架(vue、vue-router、vuex、react、react-router、redux、mobx、mobx-state-tree
observable 装饰,以及数据操作方式等等,对 Mobx 耦合较深, 日后切换框架或重构的成本很高 无数据快照,如果要重置 Store,那么得写reset action,一个个变量还原,当然也可以通过 mobx-state-tree
好在,mobx团队也给出了解决方案:mobx-state-tree。其底层和immutable一样,是一个不可变类型的数据容器,但是在api上比immutablejs容易使用太多太多。
没有任何约束,组织松散,每个人的代码可能都不一样,可能项目就会很快失控,越来越糟糕… 其实 MobX 社区也有其他选项,那就是 https://github.com/mobxjs/mobx-state-tree 时间旅行并不是不可变数据的专属,比如 Vuex、Pinia、MobX-state-tree 这些状态管理库都能做到。它们的实现的条件和过程如下: Single Store。 如果想要在 MobX 上实现时间旅行,建议使用 MobX-state-tree ---- 另一种时间旅行是满足业务上的需求,比如实现撤销/重做,甚至多人协作。
到这一层时已经脱离前端框架的范畴,上升到纯状态的管理,比如为mobx带来结构化数据的mobx-state-tree。
除此外,MobX 团队正在努力,希望在新项目—— mobx-state-tree(MST) 中结合 Redux 和 MobX 的优点。
比如 mobx-state-tree 就是一种 redux 与 mobx 结合的大胆尝试,作者在很早之前也申明了,Mobx 一样可以做时间旅行,只要遵守一定的开发规范。
状态, 但是对 Typescript 不友好; 基于类的方案,无处下手,代码会比较啰嗦, 但更直观 无数据快照,无法实现时间回溯,这是 Redux 的强项,但大部分的应用不需要这个功能; 另外可以通过 mobx-state-tree 这不后来其作者也开发了mobx-state-tree这个神器,作为 MobX 官方提供的状态模型构建库,MST 吸收了 Redux 等工具的优点,旨在结合不可变数据/函数式(transactionality
也就是 mobx 没有解决副作用问题,不代表 TFRP 无法分离副作用,而且 mutable 也不一定与 可回溯 冲突,比如 mobx-state-tree,就通过 mutable 的方式,完成了与 redux
而 Mobx 并没有这些优点,所以社区中涌现了一批补充方案,比如mobx-state-tree(简称MST)和mobx-keystone,核心思想就是将 store 的组织结构聚拢为树状,以便支持更友好的调试和时间回溯
mobx具有响应式的能力,直接修改即可,但因此也带来了数据修改途径不可追溯的烦恼从而产生了mobx-state-tree来配套约束修改数据行为。
[image.png] 当然因为mbox操作数据很方便,不满足大型应用里对状态流转路径清晰可追溯的诉求,为了约束用户的更新行为,配套出了一个mobx-state-tree,总而言之,mobx成为了响应式的代表