Mobx学习笔记什么是Mobx 和Redux一样,Mobx也是用来管理应用数据状态的相比Redux, Mobx更加的灵

特别提示：本文仅仅是个人学习笔记,了解更多请看原著MobX 上手指南、mobx-react-lite、Mobx和Redux区别浅析、Mobx原理

什么是Mobx

和Redux一样,Mobx也是用来管理应用数据状态的
相比Redux, Mobx更加的灵活、适用于中小型的应用数据管理

使用

以下是以最新版本Mobx 6.0的示例

import { makeAutoObservable, runInAction, autorun } from 'mobx'

const store = makeAutoObservable({
  count: 0,
  get double() {
    return this.count * 2
  },
  setCount(count) {//setCount
    this.count += 1
  }
  increment() {//action
    this.count += 1
  },
  decrement() {//action
    this.count -= 1
  },
  //异步方法
  async calCount() { //action
    // 模拟获取远程的数据
    const count = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(10)
      }, 500)
    })
    // 获取数据后，将赋值操作放到 runInAction 中
    runInAction(() => {
      this.count = count
    })
    
    //如果不调用 `runInAction` ，则可以直接调用本身已经存在的 action。
    this.setCount(count);
  }
})

store.double
store.calCount()// 异步

//对象监听
document.getElementById("increment").onclick = function () {
  store.count++
}

const $count = document.getElementById("count")
$count.innerText = `${store.count}`
autorun(() => {
  $count.innerText = `${store.count}`
})

makeAutoObservable 是一个更强大的 makeObservable，可以自动为属性加上对象的包装函数
MobX 的属性在 makeAutoObservable 中就是一个 getter，getter 依赖的值一旦发生变化，getter 本身的返回值也会跟随变化。当 store.count 为 1 时，调用 store.double 会返回 2。
makeAutoObservable 中的所有方法都会被处理成 action。
在 MobX 中，不管是同步还是异步操作，都可以放到 action 中，只是异步操作在修改属性时，需要将赋值操作放到 runInAction 中，或者调用本身已经存在的 action。eg：async calCount()
autoru()是对象监听的方法，类似于React Hooks 中的 useEffect。每当 store 的响应属性发生修改时，传入 autorun 的方法（effect）就会被调用一次。
MobX 还提供了更精细化的监听方法：reaction、 when

const store = makeAutoObservable({
  count: 0,
  setCount(count) {
    this.count = count
  },
  increment() {
    this.count++
  },
  decrement() {
    this.count--
  }
})

// store 发生修改立即调用 effect
autorun(() => {
  $count.innerText = `${store.count}`
});

// 第一个方法的返回值修改后才会调用后面的 effect
reaction(
  // 表示 store.count 修改后才会调用
  () => store.count,
  // 第一个参数为当前值，第二个参数为修改前的值
  // 有点类似与 Vue 中的 watch
  (value, prevValue) => {
    console.log('diff', value - prevValue)
  }
);

// 第一个方法的返回值为真，立即调用后面的 effect
when(() => store.count > 10, () => {
  console.log(store.count)
})
// when 方法还能返回一个 promise
(async function() {
  await when(() => store.count > 10)
  console.log('store.count > 10')
})()

原理

Mbox的observable的方法主要实现的是对状态的Proxy深度代理，使用Proxy对象代理状态对象的属性，同时在autorun方法使用的时候，会在这个代理过程中执行状态的依赖收集的相关操作.即两个核心

1. Observable 。用来包装一个属性为被观察者
1. autorun 。用来包装一个方法为观察者

Mobx原理

Mobx-React

创建 store

// store.js
import {observable, action} from 'mobx';

class Store {
  @observable
  count = 0;

  @action
  handleCount() {
    this.count += 1;
  }
}

根组件通过 Provider 注入 store

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <CounterClass></CounterClass>
        <CounterFunction></CounterFunction>
      </div>
    </Provider>
  );
}

export default App;

类组件（class）访问 store

import React, { Component } from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx'; // 查看store中原始JavaScript数据结构

@inject('store')
@observer
class CounterClass extends Component {
  handleClick = () => {
    this.props.store.handleCount();
  };

  render() {
    console.log(toJS(this.props.store));
    return (
      <div>
        count: {this.props.store.count}
        <button onClick={this.handleClick}>add one</button>
      </div>
    )
  }
}

export default CounterClass;

函数组件使用 store

import React from 'react'
import {inject, observer} from 'mobx-react';

const CounterFunction = ({store}) => {
  return (
    <div>
      <p>you clicked {store.count} times</p>
      <button onClick={() => store.handleCount()}>Add</button>
    </div>
  );
}

export default inject('store')(observer(CounterFunction));

mobx-react-lite

mobx-react-lite是mobx-react的hooks版本

1. 创建 Counter store 组件

// HookStore.js
import React, {createContext} from 'react';
import {useLocalStore, observer} from 'mobx-react-lite';

export const MyContext = createContext(null);

export const Counter = observer((props) => {
  const store = useLocalStore(() => (
    {
      count: 1,
      get getCount() {
        return store.count;
      },
      handleCount() {
        store.count += 2;
      }
    }
  ));
  return (
    <MyContext.Provider value={store}>
      {props.children}
    </MyContext.Provider>
  );
});

1. 使用 Counter 组件，子组件是class类组件时，通过 MyContext.Consumer 访问 store，函数组件通过 useContext Hook API 访问 store

import React from 'react';
import {Counter} from './store/HookStore';
import './App.scss';

function App() {
  return (
    <div className="App">
      <Counter>
        <HookDemo01></HookDemo01>
        <ClassCom></ClassCom>
      </Counter>
    </div>
  );
}

export default App;

1. 类组件（class）连接 store

import React, { Component } from 'react';
import {Observer} from 'mobx-react-lite';
import {MyContext} from '../store/HookStore';
import {toJS} from 'mobx';

class CounterClass extends Component {
  render() {
    return (
      <div>
        <MyContext.Consumer>
          {
            store => {
              {/* 使用 Object.is 比较store是否发生变化，store的引用不变，导致不会重渲染，获取最新依赖值需使用 Observer 组件 */}
              console.log('store: ', toJS(store));
              return (
                <>
                  <p>counter2: {store.count}</p> {/* 这种方式在 class 组件中无效，不会引发重渲染 */}
                  <Observer>{() => <p>counter2: {store.count}</p>}</Observer> {/* 必须这样写，Observer 组件是mobx-react-lite提供的唯一可在类组件中使用的组件 */}
                  <button onClick={() => store.handleCount()}>Counter Add</button>
                </>
              )
            }
          }
        </MyContext.Consumer>
      </div>
    )
  }
}

export default CounterClass;

1. 函数组件连接 store

import React, {useState, useEffect, useContext} from 'react'
import {Observer, observer} from 'mobx-react-lite';
import {MyContext} from '../../store/HookStore';

const CounterFunction = (props) => {
  const [num, setNum] = useState(10);
  const store = useContext(MyContext); // 当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。

  useEffect(() => {
    console.log('num change', MyContext);
  }, [num]);

  return (
    <div>
      <p>num: {num}</p>
      <button onClick={() => setNum(num + 1)}>set num</button>

      {/* 深度监听 store 变化并进行重渲染，导致下面两行结果相同 */}
      <p>Count: {store.getCount}</p>
      <Observer>{() => <p>Count2: {store.getCount}</p>}</Observer>
      <button onClick={() => store.handleCount()}>Counter Add</button>
    </div>
  );
}

export default observer(CounterFunction);

Mobx 和 Redux 的比较

store: 在Redux应用中，我们总是将所有共享的应用数据集中在一个大的store中; Mobx则通常按模块将应用状态划分，在多个独立的store中管理。 -操作对象: Redux状态对象通常是不可变的（Immutable),需要再原来基础上返回一个新的对象；Mobx可以直接修改状态

switch (action.type) {
  case REQUEST_POST:
  	return Object.assign({}, state, {
      post: action.payload.post
  	});
  default:
    retur nstate;
}

编程思维： Redux是一种函数式编程; Mobx偏向于面向对象编程或者说响应式编程