mobx 和 redux 有什么区别？

参考答案：

共同点

• 为了解决状态管理混乱、无法有效同步的问题，统一维护管理应用状态
• 某一状态只有一个可信数据来源（通常命名为store，指状态容器）
• 操作更新状态方式统一，并且可控（通常以action方式提供更新状态的途径）
• 支持将store与React组件连接，如react-redux，mobx-react

区别

Redux更多的是遵循Flux模式的一种实现，是一个 JavaScript 库，它关注点主要是以下几方面∶

• Action∶ 一个JavaScript对象，描述动作相关信息，主要包含type属性和payload属性∶
• Reducer∶ 定义应用状态如何响应不同动作（action），如何更新状态;
• Store∶ 管理action和reducer及其关系的对象，主要提供以下功能∶
  • 维护应用状态并支持访问状态(getState());
  • 支持监听action的分发，更新状态(dispatch(action));
  • 支持订阅store的变更(subscribe(listener));
• 异步流∶ 由于Redux所有对store状态的变更，都应该通过action触发，异步任务（通常都是业务或获取数据任务）也不例外，而为了不将业务或数据相关的任务混入React组件中，就需要使用其他框架配合管理异步任务流程，如redux-thunk，redux-saga等;

Mobx是一个透明函数响应式编程的状态管理库，它使得状态管理简单可伸缩∶

• Action∶定义改变状态的动作函数，包括如何变更状态;
• Store∶ 集中管理模块状态（State）和动作(action)
• Derivation（衍生）∶ 从应用状态中派生而出，且没有任何其他影响的数据

对比总结

• redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中
• redux使用plain object保存数据，需要手动处理变化后的操作;mobx适用observable保存数据，数据变化后自动处理响应的操作
• redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数;mobx中的状态是可变的，可以直接对其进行修改
• mobx相对来说比较简单，在其中有很多的抽象，mobx更多的使用面向对象的编程思维;redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助一系列的中间件来处理异步和副作用
• mobx中有更多的抽象和封装，调试会比较困难，同时结果也难以预测;而redux提供能够进行时间回溯的开发工具，同时其纯函数以及更少的抽象，让调试变得更加的容易

题目要点：

MobX 和 Redux 都是用于管理 React 应用状态的流行库，但它们的设计理念和实现方式有显著的不同。以下是它们之间的主要区别：

1. 设计理念

• Redux:

  • 功能：基于 Flux 架构，侧重于功能性和明确的状态管理。
  • 核心思想：单一数据源（store），状态是只读的，通过 actions 描述状态的变化，reducers 处理这些变化。
  • 不可变性：状态是不可变的，每次状态更新都需要返回一个新的状态对象。

• MobX:

  • 功能：基于响应式编程，侧重于简化状态管理和组件之间的状态共享。
  • 核心思想：状态可以是可变的，通过 observable 使状态成为响应式，组件会自动反应状态变化。
  • 可变性：状态是可变的，直接修改状态并不会造成副作用。

2. 状态管理

• Redux:

  • 单一 store：整个应用的状态存储在一个全局的 store 中。
  • 纯函数（reducers）：状态的更新通过纯函数 reducers 进行，接收当前状态和 action，返回新的状态。
  • 不可变更新：状态更新需要创建新的状态对象，避免直接修改现有状态。

• MobX:

  • 多个 store：可以有多个 store，每个 store 管理独立的状态。
  • 响应式状态：状态使用 observable 标记，组件通过 observer 进行响应式更新。状态的更新是通过直接修改变量完成的。
  • 自动反应：组件自动跟踪状态变化，无需手动触发更新。

3. 中间件和异步处理

• Redux:

  • 中间件：支持中间件（如 redux-thunk、redux-saga）来处理异步操作和其他副作用。
  • 中间件的作用：用于在 dispatch 和 reducer 之间插入额外的逻辑，例如异步操作、日志记录等。

• MobX:

  • 内置支持：MobX 自身不需要中间件来处理异步操作。可以使用 async/await 直接在 action 中处理异步请求。
  • 简洁性：异步操作可以通过直接在 action 中进行，简化了状态管理。

4. 学习曲线和复杂性

• Redux:

  • 学习曲线：学习和使用 Redux 可能需要较多的时间和精力，尤其是在配置中间件和理解 actions、reducers 的概念时。
  • 复杂性：对于小型项目，Redux 的样板代码可能显得冗余，但在大型项目中，它提供了一种清晰的状态管理模式。

• MobX:

  • 学习曲线：MobX 的学习曲线相对较平缓，因为它更接近于自然的 JavaScript 编程模型。
  • 简洁性：提供了一种更直观的方式来处理状态和反应式编程，适合于中小型项目和快速开发。

5. 开发工具和调试

• Redux:

  • 开发工具：Redux 提供了强大的开发工具（如 Redux DevTools），可以方便地查看状态变化、调试和回溯状态。
  • 调试：可以很容易地追踪每个 action 和 state 的变化，查看状态的历史记录。

• MobX:

  • 开发工具：MobX 的开发工具（如 MobX Developer Tools）也提供了一些调试功能，但相对来说不如 Redux 的工具成熟。
  • 调试：调试可能需要更多的依赖于代码的日志和自定义工具，状态变化可能不如 Redux 那样透明。

总结

• Redux 更适合于需要明确和可预测状态管理的应用，特别是大型应用。它强调不可变性和单一数据源，通过中间件处理异步操作和副作用。
• MobX 更适合于需要简单和响应式状态管理的应用，特别是中小型项目。它提供了一种直接修改状态并自动反应的机制，简化了异步处理。

选择 Redux 还是 MobX 取决于项目的复杂性、团队的需求以及个人的偏好。