MOBX的入门案例

直接上代码demo

• 主要把握几个词observable和observer

/**
 * @author:水痕
 * @time:2017-03-20 11:36
 * @email:332904234@qq.com
 * @version:1.0
 * @fileName:index
 * @direction:
 * @title:
 */
'use strict';
import {observable, action, computed, useStrict} from 'mobx';
import {observer} from 'mobx-react';
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
useStrict(true);
class Store {
    @observable todos = [
        {
            title: "todo标题",
            done: false,
        },
        {
            title: "已经完成 todo 的标题",
            done: true,
        }
    ];

    @action changeTodoTitle({index, title, done}) {
        this.todos[index].title = title
        this.todos[index].done = done
    }

    @action isShow(index) {
        this.todos[index].done = false
    }

    @computed get unfinishedTodos() {
        return this.todos.filter((todo) => todo.done)
    }
}

@observer
class Hello extends Component {
    render() {
        return (
            <div>
                <ul>
                    {this.props.store.unfinishedTodos.map((todo, index) => <li key={`list-${index}`} onClick={()=>{
                        this.props.store.isShow(index)
                    }}>{todo.title}</li>)}
                </ul>
                <div>
                    <input type="button" onClick={() => {
                        this.props.store.changeTodoTitle({
                            index: 0,
                            title: "修改111后的todo标题",
                            done: !this.props.store.todos[0].done
                        });
                    }} value="点击我"/>
                </div>
            </div>
        )
    }
}

//实例化对象
const store = new Store();

ReactDOM.render(
    <Hello store={store}/>,
    document.getElementById("app")
)