Redux 和 MobX 高频面试题

Redux 和 MobX 是 React 生态中的两大状态管理方案，在面试中常涉及 原理、使用方式、对比、最佳实践 等方面。以下是 高频面试题 + 详细答案，助你轻松应对面试！🚀

🔥 Redux 部分

1. Redux 是什么？为什么需要 Redux？

Redux 是一个 可预测的状态管理容器，用于管理应用的全局状态。适用于：

组件间 状态共享
数据流可预测，方便调试
适用于 大型复杂应用

2. Redux 的核心概念有哪些？

Redux 由 三大核心概念 组成：

Store（存储全局状态）
Action（描述状态变化的对象）
Reducer（处理 state 变化的纯函数）

3. Redux 的数据流是什么样的？

Redux 采用 单向数据流：

组件 (dispatch action) → Redux Store → Reducer 计算新 state → 组件更新 UI

4. 如何在 React 中使用 Redux？

import { createStore } from 'redux';// 定义 reducer
const reducer = (state = { count: 0 }, action) => {if (action.type === 'INCREMENT') return { count: state.count + 1 };return state;
};// 创建 store
const store = createStore(reducer);// 发送 action
store.dispatch({ type: 'INCREMENT' });console.log(store.getState()); // { count: 1 }

5. Redux 和 React Context 有什么区别？

对比项	Redux	React Context
适用场景	复杂状态管理	轻量级全局状态共享
性能	只更新相关组件	Context 可能导致额外渲染
调试工具	Redux DevTools	无专门调试工具
中间件	Redux Thunk / Saga	无

Redux 适用于 复杂状态管理，而 Context 适用于 简单的全局状态共享。

6. Redux 中间件是什么？常见的 Redux 中间件有哪些？

Redux 中间件 作用：

处理异步操作
记录日志 / 错误处理
修改 action

常见 Redux 中间件：

Redux Thunk（处理异步 action）
Redux Saga（基于 generator 的异步流）
Redux Logger（日志记录）

7. Redux Thunk 和 Redux Saga 的区别是什么？

对比项	Redux Thunk	Redux Saga
原理	直接在 action 中处理异步逻辑	使用 `generator` 处理异步流
适用场景	简单异步请求	复杂异步流程（如轮询、并行）
代码复杂度	较低	较高

8. Redux Toolkit（RTK）是什么？

RTK 是 Redux 官方推荐的 简化版 Redux，提供：

createSlice()（自动生成 action 和 reducer）
configureStore()（简化 store 配置）
内置 Redux Thunk

示例：

import { createSlice, configureStore } from '@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: { count: 0 },reducers: {increment: (state) => { state.count += 1; }}
});const store = configureStore({ reducer: counterSlice.reducer });store.dispatch(counterSlice.actions.increment());
console.log(store.getState()); // { count: 1 }

🔥 MobX 部分

9. MobX 是什么？它和 Redux 有什么区别？

MobX 是 响应式的状态管理库，相比 Redux：

MobX 基于“观察者模式”（自动追踪数据变化）
代码更简洁，没有 action、reducer
MobX 适合中小型项目，Redux 适合大型项目

10. MobX 的核心概念有哪些？

Observable（可观察状态）
Computed（计算派生值）
Action（修改状态的方法）
Observer（自动监听 state 变化的组件）

11. 如何在 React 中使用 MobX？

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';class CounterStore {count = 0;constructor() { makeAutoObservable(this); }increment() { this.count++; }
}const store = new CounterStore();const Counter = observer(() => (<div><p>{store.count}</p><button onClick={() => store.increment()}>+1</button></div>
));

MobX 特点：

直接修改 store.count++
组件 observer() 自动更新 UI

12. Redux 和 MobX 的数据流有什么不同？

对比项	Redux	MobX
数据流	单向数据流	响应式双向绑定
修改 state	通过 action/reducer	直接修改 observable
学习成本	较高	较低

13. MobX 的 `observable` 和 `computed` 有什么区别？

observable：可观察的数据状态
computed：派生值，仅在依赖改变时重新计算

import { makeAutoObservable } from 'mobx';class Store {count = 2;constructor() { makeAutoObservable(this); }get doubleCount() { return this.count * 2; } // computed
}const store = new Store();
console.log(store.doubleCount); // 4

14. MobX 的 `action` 和 `runInAction` 有什么区别？

action：定义可修改 state 的方法
runInAction：在代码块中执行多个 state 修改

import { makeAutoObservable, runInAction } from 'mobx';class Store {count = 0;constructor() { makeAutoObservable(this); }increment() { this.count++; }
}const store = new Store();runInAction(() => {store.count = 5;store.count = 10;
});
console.log(store.count); // 10

15. Redux 和 MobX 哪个性能更好？

MobX 更快：

MobX 自动追踪状态变化，只更新受影响组件
Redux 触发全局 re-render，依赖 connect() 优化

🔥 适用场景总结

对比项	Redux	MobX
适用场景	大型复杂应用	小型/中型应用
代码复杂度	需要手写 `reducer`	直接修改 `state`
性能	可能有额外 re-render	自动优化更新
学习成本	较高	较低