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() {
        const {
            count
        } = demo
        return (
            <div>
                <h2>Mobx入门</h2>
                <p>实现数据的集中式管理</p>
                <h2>mobx实现简单的计数器</h2>
                <div>count == {count}</div>
            </div>
        )
    }
}

在组件中引用Newcounter即可显示

2.更改状态

//mobx.js

import { observable, action } from "mobx"
class Demo {
    @observable count = 2010
    
    @action countAdd = () => {
        this.count++
        console.log(this.count);
    }
}
export default new Demo()

//组件中取值

import React, { Component } from 'react'
import demo from "../demo"
import { Button } from 'antd';
console.log(demo);
export default class Newcounter extends Component {
    render() {
        const {
            count, 
            countAdd
        } = demo
        return (
            <div>
                <h2>Mobx入门</h2>
                <p>实现数据的集中式管理</p>
                <h2>mobx实现简单的计数器</h2>
                <div>count == {count}</div>
                <hr />
                <Button type="danger" onClick={countAdd}>count Add 1</Button>
            </div>
        )
    }
}

这里我们发现了值确实改变了,但是视图却没有刷新!!!

3.添加监听器

import React, { Component } from 'react'
import demo from "../demo"
import { Button } from 'antd';
import { observer } from "mobx-react"

@observer
class Newcounter extends Component {
    render() {
        const {
            count,
            countAdd
        } = demo
        return (
            <div>
                <h2>Mobx入门</h2>
                <p>实现数据的集中式管理</p>
                <h2>mobx实现简单的计数器</h2>
                <div>count == {count}</div>
                <hr />
                <Button type="danger" onClick={countAdd}>count Add 1</Button>
            </div>
        )
    }
}

export default  Newcounter

最后,如果还是没有实现可能因为你版本太高,尝试一下降低版本

npm i @mobx5.0 -D

npm i @mobx-react5.0 -D

安装完之后重启项目,就可实现数据的双向绑定!!!

那些看似不起波澜的日复一日,一定会在某一天让你看见坚持的意义,下期见!!!