目录结构：

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. C#.Net参数

    C#.Net参数 阅读目录 引言 形参和实参 命名实参 可选参数 params,数目可变参数 方法解析与重载决策 参数传递      [重难点] ref引用参数/out输出参数   参数修饰符 泛型类 ...

  2. beini系列_1_U盘引导制作

    奶瓶(beini)这个系统,是一款基于 Tiny Core Linux 搭建的无线网络安全测试系统,当然由于它是用来安全测试的系统,因此在安全方面自然有着强大的功能.而且,这个系统非常简便易学,因此现 ...

  3. 机器学习公开课~~~~mooc

    https://class.coursera.org/ntumlone-001/class/index

  4. cf C. Hamburgers

    http://codeforces.com/contest/371/problem/C 二分枚举最大汉堡包数量就可以. #include <cstdio> #include <cst ...

  5. KEIL C编译器常见警告与错误信息的解决办法

    对于函数的自变量.局部变量和全局变量声明如果没有指定内存类型,则内存模式将成为内定的内存类型.如果指定了内存类型的变量,则不理会内存模式,完全有所指定的内存类型为主.    SMALL模式:小模式   ...

  6. bit和sbit的区别

    1．bit和sbit都是C51扩展的变量类型. bit和int char之类的差不多,只不过char=8位, bit=1位而已.都是变量,编译器在编译过程中分配地址.除非你指定,否则这个地址是随机的. ...

  7. BitmapFactory.decodeResource(res, id); 第一个参数跟第二个参数有什么关系？

    BitmapFactory.decodeResource(res, id); res= getResources();activity的方法 id = R.drawable.x  

  8. Notepad++去除代码行号的几种方法

    Notepad++去除代码行号的几种方法 (转自:http://hi.baidu.com/beer_zh/item/e70119309ee587f2a8842892)问:在网页中复制代码时,常常遇到高 ...

  9. [置顶] VB 中chr(10)、chr(13)和vblf、vbcr、vbcrlf的分别

    1.共同点: chr(10):换行,相当于VBLF chr(13):回车,相当于VBCR chr(13)+chr(10):回车+换行,相当于VBCRLF cr是回车,只有回车,是到本行的最头上:lf是 ...

  10. MySQL慢查询（二） - pt-query-digest详解慢查询日志

    一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...