对于 Redux 与 MobX 的比较与选择，我的思考与实践-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，状态管理是一个非常重要的问题。在 React 应用中，Redux 和 MobX 是两种非常流行的状态管理库。Redux 作为一种比较早期的状态管理库，它的设计思想非常简单，但是却非常灵活，可以处理很复杂的状态管理场景。而 MobX 则是一种相对比较新的状态管理库，它的设计思想非常直观，可以让开发者更加专注于业务逻辑的实现。

在实际开发中，我们应该如何选择 Redux 和 MobX，这是一个非常值得讨论的问题。本文将从 Redux 和 MobX 的设计思想、使用场景、优缺点等方面进行比较，帮助读者更好地选择合适的状态管理库。

Redux 和 MobX 的设计思想

Redux 的设计思想

Redux 的设计思想非常简单，核心概念只有三个：Store、Action 和 Reducer。

Store：存储应用的状态。
Action：描述发生的事件。
Reducer：根据 Action 更新 Store 中的状态。

Redux 的设计思想非常适合处理复杂的状态管理场景。通过 Store、Action 和 Reducer 的组合，可以构建出非常灵活的状态管理模式。Redux 的设计思想也非常符合函数式编程的思想，它的状态是不可变的，每次更新都是通过创建新的状态对象来实现的。

MobX 的设计思想

MobX 的设计思想则是更加直观的，它的核心概念只有两个：Observable 和 Action。

Observable：被观察的对象。
Action：描述发生的事件。

在 MobX 中，开发者只需要将需要被观察的对象转化为 Observable 对象，然后通过 Action 来修改 Observable，就可以实现状态的管理。MobX 的设计思想非常符合面向对象编程的思想，它的状态是可变的，每次更新都是直接修改对象属性来实现的。

Redux 和 MobX 的使用场景

Redux 的使用场景

Redux 的设计思想非常适合处理复杂的状态管理场景。在实际开发中，如果应用的状态比较复杂，需要进行多层嵌套、跨组件通信等操作，那么 Redux 就是一个非常好的选择。Redux 的设计思想也非常符合函数式编程的思想，可以帮助开发者编写出更加函数式的代码。

MobX 的使用场景

MobX 的设计思想非常适合处理简单的状态管理场景。在实际开发中，如果应用的状态比较简单，只需要进行一些简单的数据操作，那么 MobX 就是一个非常好的选择。MobX 的设计思想也非常符合面向对象编程的思想，可以帮助开发者编写出更加直观的代码。

Redux 和 MobX 的优缺点

Redux 的优缺点

优点

Redux 的设计思想非常简单，可以处理复杂的状态管理场景。
Redux 的状态是不可变的，每次更新都是通过创建新的状态对象来实现的，这样可以避免状态的不可预测性。
Redux 的状态是单向数据流，每个组件只能通过 Action 来修改状态，这样可以避免状态的混乱性。

缺点

Redux 的使用比较繁琐，需要编写很多的代码来实现状态的管理。
Redux 的状态是不可变的，每次更新都需要创建新的状态对象，这样会导致一定的性能问题。
Redux 的状态是单向数据流，每个组件只能通过 Action 来修改状态，这样会导致一定的限制性。

MobX 的优缺点

优点

MobX 的设计思想非常直观，可以处理简单的状态管理场景。
MobX 的状态是可变的，每次更新只需要修改对象属性，这样可以避免状态的不必要复杂性。
MobX 的状态是双向数据流，每个组件都可以直接修改状态，这样可以提高开发效率。

缺点

MobX 的设计思想相对简单，处理复杂的状态管理场景比较困难。
MobX 的状态是可变的，每次更新只需要修改对象属性，这样会导致状态的不可预测性。
MobX 的状态是双向数据流，每个组件都可以直接修改状态，这样会导致状态的混乱性。

Redux 和 MobX 的选择

在实际开发中，我们应该如何选择 Redux 和 MobX 呢？以下是我的一些思考和实践经验：

如果应用的状态比较复杂，需要进行多层嵌套、跨组件通信等操作，那么 Redux 是一个非常好的选择。
如果应用的状态比较简单，只需要进行一些简单的数据操作，那么 MobX 是一个非常好的选择。
如果应用的状态比较复杂，但是开发者比较熟悉 MobX，可以考虑使用 MobX 来处理状态管理。
如果应用的状态比较简单，但是开发者比较熟悉 Redux，可以考虑使用 Redux 来处理状态管理。

Redux 和 MobX 的实践

最后，我们来看一下 Redux 和 MobX 的实践。以下是一个简单的计数器应用，使用 Redux 和 MobX 分别实现：

Redux 实现

// www.javascriptcn.com code example
import { createStore } from 'redux';

// Action
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

const incrementAction = () => ({
  type: INCREMENT,
});

const decrementAction = () => ({
  type: DECREMENT,
});

// Reducer
const reducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

// Store
const store = createStore(reducer);

// View
const render = () => {
  const counter = document.getElementById('counter');
  counter.innerText = store.getState();
};

store.subscribe(render);

render();

// Controller
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');

incrementButton.addEventListener('click', () => {
  store.dispatch(incrementAction());
});

decrementButton.addEventListener('click', () => {
  store.dispatch(decrementAction());
});

MobX 实现

// www.javascriptcn.com code example
import { observable, action } from 'mobx';

// Observable
class CounterStore {
  @observable count = 0;

  @action increment() {
    this.count++;
  }

  @action decrement() {
    this.count--;
  }
}

// View
const store = new CounterStore();

const counter = document.getElementById('counter');

store.count.observe(() => {
  counter.innerText = store.count.get();
});

counter.innerText = store.count.get();

// Controller
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');

incrementButton.addEventListener('click', () => {
  store.increment();
});

decrementButton.addEventListener('click', () => {
  store.decrement();
});

可以看到，使用 Redux 实现计数器应用需要编写很多的代码，但是可以处理复杂的状态管理场景。而使用 MobX 实现计数器应用非常简单，但是比较适合处理简单的状态管理场景。在实际开发中，我们应该根据应用的实际情况选择合适的状态管理库。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d416c5a941bf71347beb51

对于 Redux 与 MobX 的比较与选择，我的思考与实践

前言