适合平面设计师的网站微商如何引流与推广
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 | 自动优化更新 |
| 学习成本 | 较高 | 较低 |
如果项目 状态复杂、团队协作，建议用 Redux；
如果追求 简单、快速开发，可以选 MobX。
这 15 道 Redux & MobX 高频面试题 你学会了吗？😃 🚀