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
<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>
);
}
}
第五步，运行代码。
