当前位置：首页 > news >正文

Redux 和 MobX 高频面试题

news 来源：原创 2025/5/18 8:19:40

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	自动优化更新
学习成本	较高	较低