react中mobx的使用

在组件当中调用action,action中修改state的状态，状态改变以后更新组件的视图。

传过去以后app组件就可以使用这个属性了。

@后面跟上一个成员名称这种语法在我们的es6当中我们称之为装饰器语法。

也可以理解为利用装饰器实现的一种继承方式。

装饰器除了可以修饰类本身还可以修饰类的内部成员。

当count发生改变，autorun就会默认执行。

需要经过一定业务处理而得到的数据我们把它提炼为一个方法或者是一个计算属性。

本质是方法但是我们用的时候把它当作属性来使用。

有缓存效果，就是访问多次的时候其实只调用了一次的意思。

action还有一个成员叫做bound.



加上bound以后this永远指向的是容器的实例对象。

就是计算的意思

我们需要监视一些数据的改变，当这些数据改变的时候我们去执行一些自定义的业务逻辑。

大佬：https://www.bilibili.com/video/BV1tL4y1h7ND?p=6&spm_id_from=pageDriver

import React from "react";
import { render } from "react-dom";
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class AppState {
  timer = 0;
  num=10;
  add=()=>{
    this.num++
  }

  constructor() {
    makeAutoObservable(this);
    setInterval(() => {
      this.timer += 1;
    }, 1000);
  }

  reset = () => {
    this.timer = 0;
  };
}
const appState=new AppState()

const TimerView = observer(({ appState }) => (
  Seconds passed: {appState.timer}
));

render(
  

    
    
{appState.num}
    加
  
,
  document.getElementById("root")
);