MboX - 使用observable,当你的数据变化的时候,view自动更新

在MboX里面,使得一个数据(model)observable,就相当于告诉MboX去track(跟踪,监视)这个数据。当这个数据变化了,就会自动触发view的更新。

一:首先我们来看一个没有用到MboX的情况

import { Component } from 'react';
import React from "react";
import ReactDOM from "react-dom";

class Counter extends Component {
  count = 0;
  render() {
    return (
      <div>
        Counter {this.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {

  }

  handleDec = () => {

  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter/>, rootElement);

二:把数据@observable,组件@observer,从而数据的变化可以自动地触发View的更新

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { Component } from 'react';
import React from "react";
import ReactDOM from "react-dom";

@observer class Counter extends Component {
  @observable count = 0;
  render() {
    return (
      <div>
        Counter {this.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {
    this.count++;
    }

  handleDec = () => {
    this.count--;
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter/>, rootElement);

三:可以把数据抽离出组件,然后作为组件的一个prop传进去

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { Component } from 'react';
import React from "react";
import ReactDOM from "react-dom";

const counterState = observable({
  count: 0,
});
counterState.incream = function(){
  this.count ++;
}
counterState.decream = function(){
  this.count --;
}
@observer class Counter extends Component {
  render() {
    return (
      <div>
        Counter {this.props.store.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {
    this.props.store.incream();
  }

  handleDec = () => {
    this.props.store.decream();
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter store={counterState}/>, rootElement

四:把数据抽离出组件,但是在组件里面直接使用数据

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { Component } from 'react';
import React from "react";
import ReactDOM from "react-dom";

const counterState = observable({
  count: 0,
});
counterState.incream = function(){
  this.count ++;
}
counterState.decream =function(){
  this.count --;
}
@observer class Counter extends Component {
  render() {
    return (
      <div>
        Counter {counterState.count} <br />
        <button onClick={this.handleInc}> + </button>
        <button onClick={this.handleDec}> - </button>
      </div>
    )
  }

  handleInc = () => {
    counterState.incream();
  }

  handleDec = () => {
    counterState.decream();
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter/>, rootElement);

以上的第二,三,四点是三种不同的方式,使用obserable来标记你想track的数据,从而和对应的组件connect起来。当我的obserable数据变化的时候,对应的组件会自动完成view的更新。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章