one more time one more chance. 一歩重头学前端, MobX入门。

MobX用于简单、可扩展的状态管理。通常搭配 React 使用，但不只限于 React。如何你厌烦了 Redux 繁杂的模板代码和 API，那么可以尝试下 MobX。网上好像流传： Redux 是谁用谁加班?。

状态管理库的区别

网上某位大牛的 ppt, 链接有机会再补上。此处的自己为库的开发者，别人是指库的使用者，也就是我等码农。

1. MobX恶心自己，成全别人
2. Redux成全自己，恶心别人
3. Rxjs恶心自己，也恶心别人

用一句话概括 MobX: 追踪你的改变，并为之做出响应。

开发环境搭建

Step 1: npx create-react-app mobx-todo-list创建项目

Step 2: npm install -S mobx mobx-react安装 mobx 的相关依赖

Step 3: 使create-react-app 创建的项目支持装饰器语法

npm run ejectnpm install --save-dev babel-plugin-transform-decorators-legacy

Step 4: 修改配置文件package.json

"babel": {    "plugins": [        "transform-decorators-legacy"    ],    "presets": [        "react-app"    ]}

创建 App 的 store

Mobx 中创建 store 的常见关键字如下： observable computed action。

observable用来声明可观察的数据、computed是声明可观察数据的演变数据，和 observable 具有同等地位，action 用来改变observable数据，但是 action 不是必须的，可以认为其是较好的约定，最好遵循。在 mobx 程序中使用class、装饰器是最佳实践，因此我们的代码也使用装饰器实现。

import {observable, computed, action} from 'mobx';class Todo {    // 定义一个 TODO 项目的类，id 是随机数，没有使用@observable 装饰可以理解为是只读的    id = Math.random();    // todo 的 title 及完成状态 finished 是可被观察及更新的，同时 finished 的初始状态为 false    @observable title;    @observable finished = false;    // 构造函数接收tile    constructor(title) {        this.title = title;    }}// TODO List 类class TodoList {    // 可被观察的待办项 todos    @observable todos = [];    // 计算属性，重可观察属性 todos 衍生出来，返回没有完成的待办项的个数    @computed get unfinishedTodoCount() {        return this.todos.filter(todo => !todo.finished).length;    }    // 动作用来更新 todos 属性的值，添加待办项    @action    addTodo = title => {        if (!title) return;        this.todos.push(new Todo(title));    }}// 我们创建TodoList 对象，在手动的添加两个待办项，此处的 store 对象可以理解为是一个单例，在将其引用暴露出去const store = new TodoList();store.todos.push(new Todo('Get Coffee'), new Todo('Write blog'));store.todos[0].finished = true;export default store;

实现监听数据的组件

Provider、observer、inject均为是mobx-react提供。

Provider以组件的形式存在，用来包裹最外层组件节点，并且传入 store（通过）context 传递给后代组件。使用@observer装饰的react组件将转换成一个监听者，当@observable 修饰的数据变化，react组件就会重新渲染。@inject为了使被装饰的组件以 props 的形式获取到 Provider 传递过来的数据。

import {observer, inject} from 'mobx-react';const TodoView = ({todo}) => (    
         {todo.finished = !todo.finished;}}        />        {todo.title}    
)@inject('todolist')@observerexport default class TodoListView extends Component {    state = {        title: ''    }    changeTitle = e => {        let title = e.target.value;        this.setState({title});    }    // 调用 store 中的 addTodoaction 更新 store 里面的数据    submit = () => {        this.props.todolist.addTodo(this.state.title);    }    render() {        return (            
    
                
                     
     submit                
     
                          {this.props.todolist.todos.map(todo => (                        
                          ))}                
     
                Tasks left: {this.props.todolist.unfinishedTodoCount}            
    
        );    }}

通过 Provider 将数据传递给组件树

import TodoListView from './TodoListView';import store from './store';import {Provider} from 'mobx-react';export default class App extends Component {  // 将 store 传给 Provider  render() {    return (      
            
           
        );  }};

项目完整代码

Other

Todo list 实现完成，理论讲解，逐步更新。欢迎大家批评指正。

前端学习QQ群: 538631558

【开发环境推荐】 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。