mobx react
目录结构：
Model/index.js
'use strict'; import { action, autorun, observable, computed } from "mobx"; export default class TodoList { @observable todos = [{ title: "test", finished: true }]; @observable data = [];
constructor(){
autorun(()=>{console.log(this.unfinishedTodoCount)});
} @computed get unfinishedTodoCount() { return this.todos.filter(todo => !todo.finished).length; } @action getData() { fetch("http://localhost/Server/index.php").then(res => res.json()).then(data => this.data = data); } @action addList() { this.todos.push({ title: "test1", finished: false }); } }
- @: es6新增的装饰器语法，babel已支持需要安装 babel-plugin-transform-decorators-legacy
- 类的静态属性：es7新增的语法，babel已支持需要安装 babel-preset-stage-2
- @observer: 让 React 组件自动起来，它会自动更新，即便是在一个很大的程序里也会工作的很好
- @observable：监听数据，当数据发生改变的时候自动刷新视图
- @computed: 创建自动运算的表达式。（一般用于计算）
- @action：改变了@observable创建的数据，需要装饰action方法！（需要配合'use strict'使用，有助于更好地构建代码）(可以不适用action,但是不建议这样做)
- autorun: 当@observable创建的数据发生改变时自动执行
View/index.js
import React,{Component} from "react";
import ReactDOM from "react-dom";
import {observer} from "mobx-react";
import TodoList from "../Model/index";
@observer
class TodoListView extends Component {
componentDidMount(){
this.props.todoList.getData();
}
clickHandle(){
this.props.todoList.addList();
}
render() {
return <div>
<ul>
{this.props.todoList.todos.map(todo =>
<TodoView todo={todo} key={todo.id} />
)}
</ul>
Tasks left: {this.props.todoList.unfinishedTodoCount}<br />
姓名：{this.props.todoList.data.name}<br />
年龄：{this.props.todoList.data.age}<br />
密码：{this.props.todoList.data.pass}<br />
<input name='name' type='button' value="按钮" onClick={this.clickHandle.bind(this)} />
</div>
}
}
const TodoView = observer(({todo}) =>
<li>
<input
type="checkbox"
checked={todo.finished}
onClick={() => {return todo.finished = !todo.finished}}
/>{todo.title}
</li>
)
const store = new TodoList();
ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('container'));
webpack.config.js
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //插件项 // plugins: [commonsPlugin], //页面入口文件配置 entry: { index: './View/index.js' }, //入口文件输出配置 output: { path: 'dist/page', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js$/, loader: 'babel-loader' }, { test: /\.(png|jpg)$/, loader: 'url-loader' } ] }, };
.babelrc
{
"presets": ["react", "es2015", "stage-2"],
"plugins": [
"transform-decorators-legacy"
]
}
Page/index.html
<html> <head> <meta charset="utf-8" /> </head> <body> <div id="container"></div> <script src="../dist/page/index.js"></script> </body> </html>
