目录结构：
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>