react-mobx解析及实现简单计数器

一. mobx解析

mobx背后的哲学其实很简单:

任何源自应用状态的东西都应该自动地获得。
其中包括UI、数据序列化、服务器通讯，等等。

React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

安装:

cnpm i mobx mobx-react -S

单项数据流:

MobX 支持单向数据流，也就是动作改变状态，而状态的改变会更新所有受影响的视图。

mobx原则

当状态改变时，所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。
所有衍生默认都是同步更新。这意味着例如动作可以在改变状态之后直接可以安全地检查计算值。
计算值 是延迟更新的。任何不在使用状态的计算值将不会更新，直到需要它进行副作用（I / O）操作时。 如果视图不再使用，那么它会自动被垃圾回收。
所有的计算值都应该是纯净的。它们不应该用来改变状态。

二. 实例

让我们来做个简单的计数器,加深一下对mobx的理解,我相信你会爱上mobx,start!!!

1.mobx显示取值:

//mobx.js

import {
   observable,action} from "mobx"
class Demo {
   
    @observable count = 2010
}
export default new Demo()

//组件中取值
import React, {
    Component } from 'react'
import demo from "../demo"
// console.log(demo);

export default class Newcounter extends Component {
   
    render(