React + mobx简单demo

日结博客 17.4.18 HangZhou

React + Mobx

对于各种spa页面或者各种前端页面的话，不拿一个状态管理工具如何完美地实现你的项目逻辑控制呢

困扰于Redux的繁琐，mobx便横空出世了，为了简单你的状态管理而生

做到完美状态管理，你只需要以下几步

关于装饰器的编译，请看我另一篇博客：React + 装饰器

1. 安装 mobx mobx-react

   npm install mobx --save
   npm install mobx-react --save

2. 写一个store文件

   observable: 观察对应的数据

   import { observable } from "mobx";
   class TodoList {
      // 利用
     @observable todos = [] 
   }
   ​
   export default new TodoList()

3. 在对应的页面添加引用

   index页面

   import TodoList from './store/TodoList'
   ​
   <App todoList ={TodoList}>

   app页面

   ​
   export default App {
     render() {
       <div>todoList的lenth是{this.props.todoList.length}</div>
     }
   }

   到这里为止你就能拿到store的数据了，超级简单！

4. 页面跟着store的数据改变发生改变

   app.js页面添加观察

   import { observable }  from 'mobx-react'
   @observable // 给这个页面添加observable装饰器
   export default App {
     render() {
       <div>todoList的lenth是{this.props.todoList.length}</div>
     }
   }

   添加了observable的页面会根据注入的数据发生改变而重新渲染

5. Action

   这里我们给todoList添加一个事件

   import { observable, action } from "mobx";
   class TodoList {
      // 利用
     @observable todos = [] 
     @action push() {
         this.todos.push({
             id: 1,
             name: 'new Task'
         })
     }
   }
   ​
   export default new TodoList()

   我们在app添加一个btn

   <button onClick={() => this.props.todoList.push}>点我添</button>

   点击按钮的时候，我们可以对应看到文本的长度在发生改变

6. computeds

   计算一些对应的属性或数值

   给todoList添一些料

   import { observable, action, computed } from "mobx";
   class TodoList {
      // 利用
     @observable todos = [] 
     @action push() {
         this.todos.push({
             id: 1,
             name: 'new Task'
         })
     }
     @computed get allIdCount() {
         return this.todos.reduce(init, item => {
             return init+item.id
         }, 0)
     }
   }
   ​
   export default new TodoList()

7. 在app添加一个显示

   <div>目前todoList的id总和是：{this.props.todoList.allIdCount}</div>

   我们可以看到，随着你每次的变化，文件都发生了改变

最基本的就到这里了，更多的乐趣希望大家各自探索

献上mobx-demo地址，欢迎Star mobx-demo

喜欢就点个赞吧。谢谢你～

:D