目录结构:

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>

mobx react的更多相关文章

  1. MobX+react使用小demo

    第一次接触mobx,网上找了很多例子,写此主要总结一下create-react-app + mobx入门 create-react-app myreact cd myreact npm install ...

  2. [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer

    Applications are driven by state. Many things, like the user interface, should always be consistent ...

  3. mobx在react的使用

    ​ 创建项目第六步 mobx 1.安装 yarn add mobx yarn add mobx-react 2.新建/src/store/store.js import {observable, co ...

  4. React MobX 开始

    MobX 用于状态管理,简单高效.本文将于 React 上介绍如何开始,包括了: 了解 MobX 概念 从零准备 React 应用 MobX React.FC 写法 MobX React.Compon ...

  5. react学习一篇就够了

    webstrom自动格式化代码 命令 js框架 MVC 安装 npm install create-react-app -g 生成项目(项目名npm发包包命名规范 /^[a-z0-9_-]$/) cr ...

  6. [Mobx] Use MobX actions to change and guard state

    This lesson explains how actions can be used to control and modify the state of your application. Th ...

  7. Mobx-React : 当前适合React的状态管理工具

    MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商所赞助的.    安装 安装: npm install mobx ...

  8. React的状态管理工具

    Mobx-React : 当前最适合React的状态管理工具   MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商 ...

  9. 【译】Redux 还是 Mobx,让我来解决你的困惑!

    原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用了 Redux,但我最近都在使用 Mob ...

随机推荐

  1. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  2. 点击Textbox 给日历控件赋值

    1.前台代码: <asp:TextBox ID="TextBox1" runat="server" onfocus="return show() ...

  3. 转:Top 10 Algorithms for Coding Interview

    The following are top 10 algorithms related concepts in coding interview. I will try to illustrate t ...

  4. 解决octave for windows安装包无法通过SourceForge下载的问题

    近期SourceForge访问不了,可以通过访问SourceForge的ftp镜像ftp://sourceforge.nchc.org.tw/进行下载: ftp下载工具可以使用FileZilla,可在 ...

  5. 【HDOJ】1510 White Rectangles

    这个题目很好,变形的题目也很多.简单DP. /* 1510 */ #include <cstdio> #include <cstring> #include <cstdl ...

  6. BZOJ 1007 [HNOI2008]水平可见直线

    1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 4453  Solved: 1636[Submit][Sta ...

  7. 将银行读卡设备读取到的身份证头像Bitmap属性转换成路径

    需求是这样的,在项目开发的时候要求读取身份证,读到身份证的所有信息(信息里面包括头像属性,类型是Bitmap的).然后服务器要求我传过去的头像信息是String类型的Uri路径. 这是读卡器读到的身份 ...

  8. 【递归】Vijos P1114 FBI树(NOIP2004普及组第三题)

    题目链接: https://vijos.org/p/1114 题目大意: 把01串一分为二,左半边描述当前节点左子树,右半边描述右子树,子树全为1则为I节点,全为0则为B节点,混合则为F节点,直到当前 ...

  9. 《Linear Algebra and Its Application》-chaper1-行化简法解决线性方程组

    在实际生产生活中,需要我们解大量的线性方程组,例如是有探测.线性规划.电路等,这里我们便从理论角度建立一套解决线性方程组的体系. 线性方程组: 形如下面形式的方程组称为线性方程组. 回想起解决二元线性 ...

  10. adb getprop setprop watchprop用法

    在android系统中,有一些初始化的配置文件,例如: /init.rc /default.prop /system/build.prop 文件里面里面配置了开机设置的系统属性值,这些属性值,可以通过 ...