不想装 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 来修改全局状态。
相关推荐
不知名raver(学python版)4 分钟前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休14 分钟前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel20 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组24 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽29 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳58142 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo43 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~1 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼1 小时前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js