React配合Mobx状态管理、React-Router使用

原创 守候你的季节 随笔 JavaScript 241阅读 2017-12-24 20:42:52 举报

最近不断在博客中的看到MoBx这个东西,仔细研究下确实比Redux优势明显,代码也不再冗余。使用过Rxjs的开发者可能更有感觉。主要模式:(view层)观察者, (store)被观察者,在view层store可以被直接更改,但是最好还是要使用严格模式,使用action来更改store。

下面写一个简单的例子来入个门

  1. 下载相关依赖包
    javascript 代码
  1. mobx使用了ES7的装饰器,使用create-react-app 创建项目的话使用的是babel 6.x.x编译的,下面让babel支持对装饰器的编译
    html 代码

3.进行store的代码编写
javascript 代码

  1. store创建好后,接下来先搭建路由,这里使用react-router4,浏览中只需使用 react-router-dom便可
    javascript 代码

写一个路由组件
javascript 代码

5.完成路由后,接下来使路由生效,在入口index.js中进行配置
javascript 代码

  1. 最后是目标组件TestMobx.js
    javascript 代码

最后不得不说代码结构更清晰了,不再像redux那样,store需要有好几个文件。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复