react的Context 和 Redux 区别？

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 调试，维护性更好。