1.store:

import { observer } from "mobx-react";
import { observable, action, computed ,autorun} from "mobx";
export default class NewStore {
@observable inputValue1; //observable data 注册一个数据,这个数据将会成为一个可mobx监测的数据
@observable inputValue2;
@observable childValue;
constructor() {
this.inputValue1=0; //初始化可监测的数据
this.inputValue2=0;
this.fullValue=0;
this.childValue=0;
}
@action changeValue(s,e){ //注册action ,action里面可以改变mobx注册的数据,从而改变store里的数据
let tar=e.currentTarget;
let val=Math.abs(tar.value);
if(tar.name=='val1'){
this.inputValue1=val;
}else if(tar.name=='val2'){
this.inputValue2=val;
}
} @computed get sum(){ //computed 是自动监测已注册的数据,如果已注册的数据有改变自动执行这个函数
this.fullValue=this.inputValue1+this.inputValue2;
console.log(this.fullValue)
return this.fullValue;
}
@action childEvent(){
this.childValue=this.childValue+3;
}
}

2.all store:

import TestStore from  './test.js';
import NextStore from "./next.js";
import NewStore from "./new.js";
import FormStore from "./form.js";
import MenuStore from "./menu.js";
import NumChange from "./comm/numChange.js" export default {
testStore:new TestStore(),
nextStore:new NextStore(),
newStore:new NewStore(),
formStore:new FormStore(),
menuStore:new MenuStore(),
numChange:new NumChange()
}

3.provider:

import "./js/auto_rem.js";
import "./css/style.scss";
import React from "react";
import { render } from "react-dom";
import { observable, computed, autorun } from "mobx";
import { Provider } from 'mobx-react';
import { Router, Route, hashHistory ,browserHistory} from 'react-router';
import Test from "./src/components/test.js";
import Next from "./src/components/next.js";
import New from "./src/components/new.js";
import Forms from "./src/components/form.js";
import Menu from "./src/components/menu.js";
import store from "./src/store/store.js"; const routes = (
<Route component={App}>
<Route path="/" component={Menu}/>
<Route path="/menu" component={Menu}/>
<Route path="/form" component={Forms}/>
<Route path="/new" component={New}/>
<Route path="/test" component={Test}/>
<Route path="/next" component={Next}/>
</Route>
);
class App extends React.Component {
render() {
return (
<Provider {...store}> //把所有store的数据注入程序组件
<Router history={hashHistory} >
{routes}
</Router>
</Provider>
)
}
} render( < App />, document.getElementById('app'));

4.view :

import {observer,inject} from "mobx-react";
import {observable,action,computed,autorun} from "mobx"; import React,{Component} from "react";
import {render} from "react-dom";
import Child from "./comm/child.js";
@inject(['newStore']) @observer //inject 注入需要的store
export default class New extends Component{
constructor(props) {
super(props);
this.store=this.props.newStore; //通过props来导入访问已注入的store
this.changeValue=this.store.changeValue.bind(this.store,event) //访问store中的事件
}
render(){
return(
<div>
<input type='tel' name='val1' onKeyUp={this.changeValue}/>+ //促发事件改变store里的数据
<input type='tel' name='val2' onKeyUp={this.changeValue}/>=
<span>{this.store.sum}</span> //访问store里的数据,如果有事件促发改变,那么这个数据也会自动改变
<Child/>
</div>
)
}
}

mobx.js 使用教程-react的更多相关文章

  1. 【MobX】MobX 简单入门教程

    一.MobX 介绍 首先看下官网介绍: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive progra ...

  2. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  3. 24个很赞的 Node.js 免费教程和在线指南

    JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...

  4. Google Analytics统计代码GA.JS中文教程

    2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅     Google Analytics ...

  5. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

  6. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  7. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  8. 【D3.V3.js系列教程】--(十四)有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

  9. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

随机推荐

  1. DocFetcher 本机文件搜索工具

    优点: 支持的文件类型多 全文搜索 可以随时update索引

  2. tensorflow学习笔记

    常量的四则运算 import tensorflow as tf data1 = tf.constant(2) data2 = tf.constant(10) dataAdd=tf.add(data1, ...

  3. jmeter之Throughput Controller

    jmeter之Throughput Controller Throughput Controller 这个控制器的命名不准确,因为它不是用来控制吞吐量的.吞吐量控制器允许用户控制执行频率,jmeter ...

  4. NET设计模式 第二部分 行为型模式(17):迭代器模式(Iterator Pattern)

    概述 在面向对象的软件设计中,我们经常会遇到一类集合对象,这类集合对象的内部结构可能有着各种各样的实现,但是归结起来,无非有两点是需要我们去关心的:一是集合内部的数据存储结构,二是遍历集合内部的数据. ...

  5. git 查看提交历史

    查看提交历史 git log 查看每次提交的具体改动内容 git log -p 查看某个文件历次提交的具体改动内容 git log -p <file name> # git log -p ...

  6. Hadoop yarn工作流程详解

    yarn是什么?1.它是一个资源调度及提供作业运行的系统环境平台 资源:cpu.mem等 作业:map task.reduce Task yarn产生背景?它是从hadoop2.x版本才引入1.had ...

  7. Linux重定向及nohup不输出的方法

    转载自:http://blog.csdn.net/qinglu000/article/details/18963031   先说一下linux重定向: 0.1和2分别表示标准输入.标准输出和标准错误信 ...

  8. RedHat无法ping通Win10的解决办法

    1.环境 主机: win10 企业版 64位 ip地址: 192.168.168.100 虚拟机:Red Hat ip地址: 192.168.168.200 2.现象: win10系统可以ping通R ...

  9. spring boot打jar包(maven对jar和lib分离)

    spring boot intellij Ide打包有两种方式: 1.maven:熟悉.方便配置灵活 2.Build artifacts:操作比较复杂,jar和lib包分离 重点讲maven如何支持j ...

  10. 为什么人工智能用Python

    开发效率高.python有很多库很方便做人工智能,比如numpy, scipy做数值计算的,sklearn做机器学习的,pybrain做神经网络的,matplotlib将数据可视化的. 如果很在乎性能 ...