mobx 的autorun和reaction使用，监听mobx值变化

mobx 的autorun和使用：

Mobx中的衍生----动作（autorun、reaction）

（1）autorun

当你想创建一个永远不会被观察的响应式函数时，可以使用autorun。
当autorun依赖的状态变化时会自动执行参数的function，返回值disposer是autorun的清除函数，当不再需要autorun时，可以调用disposer清除autorun。

autorun参数中的函数在使用autorun时会立即执行一次，然后在每次它依赖的state发生变化时自动执行一次。

注意：

• autorun不会产生新值，是基于执行函数产生效果
• autorun不会被观察，是反应式代码桥接到命令式代码的方式
• 可用于打印日志、更新UI的代码、发起请求
• autorun第一个参数是函数，可接受第二个参数，处理delay、name、error等

  // autorun写法
  disposer = autorun(() => {
    if (store.refresh.bool) {
      console.log('监听', store.refresh.bool);
    } else {
      this.onResetCondition()
      console.log('监听2', store.refresh.bool);
    }
  });

（2）reaction

reaction是autorun的变种，第一个参数为数据函数，第二个参数为效果函数，数据函数返回一个值，作为效果函数的参数，效果函数不会对依赖的状态作出反应，只有数据函数返回的值变化时才会执行。

注意：
1、
有时候reaction无法监听到数据的变化，原因：

当前页面被销毁了，仓库也跟着被销毁，例如：

使用----windows.location.href=“/url” 当前页面-打开URL页面
它们会重定向到指定的页面

 window.location.href = '/';
 

解决方法，使用this.props.history.push进行路由跳转，等等

 this.props.history.push('/')
 

2、

• reaction 返回一个清理函数，不需要再执行时应该调用清理函数
• 数据函数对state的改变作出反应
• 效果函数仅对数据函数中访问的数据作出反应，不对state的改变作出反应
• autorun第一个参数是函数，可接受第二个参数，处理delay、name、error等

   componentWillUnmount() {
    // 销毁时清除reaction
    this.reaction();
  }
  // reaction写法
  reaction = reaction(
    () => store.refresh.bool,
    (data) => {
      console.log(data)
      }
    }
  );

3、有时候在使用Hook时reaction无法监听到数据的变化：
解决：可以使用useEffect副作用

推荐

---