Redux 和 MobX 是 React 生態中的兩大狀態管理方案，在面試中常涉及 原理、使用方式、對比、最佳實踐 等方面。以下是 高頻面試題 + 詳細答案，助你輕松應對面試！🚀

---

🔥 Redux 部分

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

Redux 是一個 可預測的狀態管理容器，用于管理應用的全局狀態。適用于：

• 組件間 狀態共享
• 數據流可預測，方便調試
• 適用于 大型復雜應用

---

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

Redux 由 三大核心概念 組成：

1. Store（存儲全局狀態）
2. Action（描述狀態變化的對象）
3. 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 中間件：

1. Redux Thunk（處理異步 action）
2. Redux Saga（基于 generator 的異步流）
3. 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 的核心概念有哪些？

1. Observable（可觀察狀態）
2. Computed（計算派生值）
3. Action（修改狀態的方法）
4. 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 高頻面試題 你學會了嗎？😃 🚀