1-2 Mobx 入门实践之TodoList(官方Demo)

第一步：导入模块

import React, { Component } from 'react';

import { observable, autorun,computed } from 'mobx'

import {observer} from "mobx-react";

 

 

第二步：创建store

class ObservableTodoStore{

    @observable todos = [];

    @observable pendingRequests = 0;

    constructor(){

        autorun(()=>{

            console.log(this.report);

 

 

        })

    }

    @computed get completedTodosCount() {

        return this.todos.filter(

            todo => todo.completed === true

        ).length;

    }

 

    @computed get report() {

        if (this.todos.length === 0)

            return "没有任务";

        return `下一个任务: "${this.todos[0].task}". ` +

            `进度: ${this.completedTodosCount}/${this.todos.length}`;

    }

    addTodo(task) {

        setTimeout(()=>{

            this.todos.push({

                task: task,

                completed: false,

                assignee: null

            });

        },1000)

 

    }

}

 

 

第三步：写组件TodoList  和 TodoView

 

<TodoList/>

@observer

class TodoList extends React.Component {

    onNewTodo = () => {

        this.props.store.addTodo(prompt('输入一个新的store:','wjl'));

    }

    render(){

        const store = this.props.store;

        return(

            <div>

                {store.report}

                <ul>

                    {

                        store.todos.map((todo,idx)=><TodoView todo={todo} key={idx} />)

                    }

                    { store.pendingRequests > 0 ? <marquee>Loading...</marquee> : null }

                    <button onClick={ this.onNewTodo }>New Todo</button>

                    <small> (double-click a todo to edit)</small>

                   {/* <RenderCounter />*/}

                </ul>

            </div>

        )

    }

}

 

 

<TodoView/>

class TodoView extends React.Component {

    render() {

        const todo = this.props.todo;

        return (

            <li onDoubleClick={ this.onRename }>

                <input

                    type='checkbox'

                    checked={ todo.completed }

                    onChange={ this.onToggleCompleted }

                />

                { todo.task }

                { todo.assignee

                    ? <small>{ todo.assignee.name }</small>

                    : null

                }

                {/*<RenderCounter />*/}

            </li>

        );

    }

 

    onToggleCompleted = () => {

        const todo = this.props.todo;

        todo.completed = !todo.completed;

    }

 

    onRename = () => {

        const todo = this.props.todo;

        todo.task = prompt('Task name', todo.task) || todo.task;

    }

}

 

 

第四步：加入到App组件界面显示

class App extends Component {

  render() {

    return (

      <div className="App">

          <TodoList store={ observableTodoStore } />

      </div>

    );

  }

}

 

 

第五步，运行代码。

具体代码详见：https://github.com/gitwujiaolong/react-mobx-demo