Context 和 Redux 都能解决 React 中的跨组件状态共享问题，但它们的定位和适用场景不同。
一、核心区别
| 对比项 | Context | Redux |
|---|---|---|
| 定位 | 状态传递工具 | 状态管理库 |
| 官方提供 | React 内置 | 第三方库 |
| 学习成本 | 低 | 较高 |
| 适合数据量 | 小~中型 | 中~大型 |
| 数据更新机制 | Provider 更新时可能导致大量组件重渲染 | 精准更新需要的组件 |
| 调试工具 | 无 | Redux DevTools |
| 中间件支持 | 无 | 支持 Thunk、Saga 等 |
| 异步处理 | 自己写 | 生态完善 |
| 数据追踪 | 较弱 | 强 |
二、Context 是什么？
Context 本质上是 React 提供的跨层级传值方案。
解决的问题：
App
└── A
└── B
└── C如果 App 的数据要传给 C：
普通 props
<App user={user}>
<A user={user} />
</App>一层层传：
A -> B -> C这叫：
Props Drilling（属性透传）
Context 可以直接获取：
const UserContext = createContext();
function App() {
return (
<UserContext.Provider value={{ name: "Tom" }}>
<A />
</UserContext.Provider>
);
}
function C() {
const user = useContext(UserContext);
return <div>{user.name}</div>;
}三、Context 的缺点
假设：
const value = {
user,
theme,
menu
};
<Provider value={value}>当：
setTheme("dark");时：
user
theme
menu依赖 Context 的组件可能都会重新渲染。
例如：
Header -> 用 theme
Profile -> 用 user
Menu -> 用 menu仅修改 theme：
Header 重新渲染
Profile 重新渲染
Menu 重新渲染项目大了性能会下降。
四、Redux 是什么？
Redux 是一个集中式状态管理库。
所有状态放到一个 Store 中：
{
user: {},
theme: "light",
cart: []
}结构：
Component
↓ dispatch
Action
↓
Reducer
↓
Store
↓
Component例如：
dispatch({
type: "CHANGE_THEME",
payload: "dark"
});Reducer：
function reducer(state, action) {
switch (action.type) {
case "CHANGE_THEME":
return {
...state,
theme: action.payload
};
}
}组件：
const theme = useSelector(
state => state.theme
);只有使用：
state.theme的组件更新。
五、Redux 为什么性能更好？
Redux 使用：
useSelector()进行订阅。
const user = useSelector(
state => state.user
);
const theme = useSelector(
state => state.theme
);当：
theme变化时：
theme组件 重新渲染
user组件 不渲染属于：
精准更新
而 Context 默认是：
Provider value变化 → Consumer全部通知
六、Redux Toolkit（现代 Redux）
现在几乎不会直接写 Redux。
官方推荐：
Redux Toolkit
安装：
npm install @reduxjs/toolkit react-redux创建 Store：
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {
user: userReducer
}
})创建 Slice：
import { createSlice } from '@reduxjs/toolkit'
const userSlice = createSlice({
name: 'user',
initialState: {
name: ''
},
reducers: {
setUser(state, action) {
state.name = action.payload
}
}
})相比传统 Redux：
Action
ActionType
Reducer
Store代码减少 70% 以上。
七、实际项目如何选？
用 Context
适合：
-
主题切换
theme
-
国际化
language
-
用户登录信息
userInfo
-
权限信息
permission
例如：
ThemeContext
UserContext
LanguageContext用 Redux
适合：
-
电商购物车
-
大型后台管理系统
-
复杂表单
-
多页面共享状态
-
实时数据
-
复杂业务流转
例如你的云鉴性能平台：
性能查询
性能报告
性能详情
CPU架构对比
性能覆盖这些页面都会共享：
筛选条件
用户信息
报告信息
缓存数据这类项目更适合 Redux Toolkit。
八、面试回答（简洁版）
如果面试官问：
Context 和 Redux 的区别？
可以这样回答：
Context 是 React 内置的跨组件通信机制，主要解决 Props Drilling 问题；Redux 是专门的状态管理库，提供集中式 Store、可预测的数据流和精准更新机制。
Context 适合主题、用户信息等简单全局状态，而 Redux 更适合大型项目中的复杂状态管理。对于复杂业务场景，我通常会优先使用 Redux Toolkit，因为它支持模块化状态管理、异步处理和 DevTools 调试，维护性更好。