不想装 Redux?useContext + useReducer 就够了!

先大概说下

React 官方在Hooks出来之后,并没有强推Redux,MobX 这类第三方库,而是建议先使用内置的Hooks组合起来做状态管理。

  • useReducer : 管理复杂状态更新逻辑
  • useContext : 解决多层组件传参的问题
  • 结合起来就像是一个迷你Redux
    • useReducer = Redux 的 reducer + dispatch
    • useContext = Redux 的 Provider/Store 订阅机制
  • 优点:
    • 无需额外依赖,纯Redux内置
    • 类型安全(TS友好)
    • API简单,学习成本低
    • 状态集中管理,避免props层层传递
各自作用回顾
  • useReducer
    • 适合复杂状态逻辑: 状态是一个对象/数组,多种不同更新方式
    • 接受(state, action) => newState 形式的reducer函数
  • useContext
    • 用于跨组件共享数据,避免父子组件层层传递props
    • 配合Provider包裹整个组件树,子组件直接拿到共享数据
如何配合使用?
  1. 在顶层使用useReducer 管理全局状态
  2. 用useContext把state 和 dispatch 共享给所有子组件
  3. 子组件直接dispatch({type:'xxx',payload:...})更新全局状态
  4. 总结:实际上就是把改变全局状态的方法提供给了所有子组件
小例子:计数器
tsx 复制代码
import React,{useReducer,createContext,useContext} from 'react';

// 1️⃣ 创建 Context
const CountContext = createContext(null);// 之后使用<CountContext.Provider>把子组件包起来,形成一个上下文区域

// 2️⃣ Reducer(专管状态更新)
function countReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
// 3️⃣ Provider(集中管理 state + dispatch)
function ContProvider({children}){
    const [state,dispatch] = useReducer(counter,{count:0});
     return (
        <CountContext.Provider value={{ state, dispatch }}>
          {children}
        </CountContext.Provider>
      );
}

// 4️⃣ 自定义 Hook(方便子组件用)
function useCount() {
  const context = useContext(CountContext);
  if (!context) throw new Error('useCount 必须在 CountProvider 中使用');
  return context;
}


// 5️⃣ 子组件
function Counter() {
  const { state, dispatch } = useCount();
  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
}

// 6️⃣ App 入口
export default function App() {
  return (
    <CountProvider>
      <h1>useContext + useReducer 最小例子</h1>
      <Counter />
    </CountProvider>
  );
}

这个例子里做了什么?

  1. CountContext:像"广播站",负责全局共享数据。
  2. countReducer:状态修改的唯一入口(类似 Redux 里的 reducer)。
  3. CountProvider:状态+dispatch 的容器,包裹住所有需要共享状态的组件。
  4. useCount() :封装 useContext,保证用起来更简洁。
  5. Counter :子组件可以直接 dispatch 来修改全局状态。
相关推荐
IT_陈寒2 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏17 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@18 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通19 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel23 分钟前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i2 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel2 小时前
Web发展与Vue.js导读
前端
YAY_tyy2 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_5 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801465 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d