mobx 知识点
-
antd+mobx 项目例子:https://github.com/cag2050/antd_mobx_demo
-
在 create-react-app 创建的项目中,使用 mobx:https://swizec.com/blog/mobx-with-create-react-app/swizec/7158
-
create-react-app 创建的项目中,支持 mobx 的装饰器:https://www.jianshu.com/p/d3f8cf7b3e31
-
mobx 与 vuex 的对比:
mobx的 | 等价于 | vuex的 |
---|---|---|
@computed | 等价于 | computed |
x | 等价于 | watch |
- mobx 和 vuex 使用store的区别:
区别项 | mobx | vuex |
---|---|---|
访问state、action | @inject('xxxStore')后,使用this.props.xxxStore访问属性、action | 组件里通过mapState访问state、mapActions访问action |
谁能更改state? | 配置某参数(?)后,可以强制只有action能更改state | vuex规定,只有mutations能更改state |
-
mobx 的Provider引入store,组件可以访问store,是利用react的context原理。
-
和Redux不同的是,Mobx在异步处理上并不复杂,不需要引入额外的类似redux-thunk、redux-saga这样的库。
-
在严格模式下,修改state的函数如果没有包裹在actions内,Mobx就不会执行state的修改操作。
严格模式下,只有标记了@action的函数或在runInAction中的代码,才能修改state。
configure({ enforceActions: "strict" });
- mobx 与 redux 的区别:
Redux 使用单一 store;Mobx 使用多个分散的 store。
Redux 状态数据采用不可变数据结构,状态修改必须在 reducer 中;Mobx 状态数据可以随处更改,仅在严格模式时强制在 action 中修改。
Redux 中脚手架代码更多,明确提出操作处理过程中的相关步骤;Mobx 脚手架代码很少,不关注项目代码的组织方式。
Redux 手动 dispatch(action);Mobx自动触发相关依赖的更新通知。
Redux 在 mapStateToProps 中订阅当前组件关注的应用状态;Mobx 根据当前组件中对应用状态的使用,自动收集依赖关系。
Redux 中应用状态为普通对象;Mobx 应用状态为可观察对象。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步