首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React 播客专栏 Vol.15|彻底搞懂 useReducer 是个啥?

React 播客专栏 Vol.15|彻底搞懂 useReducer 是个啥?

作者头像
前端达人
发布2025-05-22 09:59:06
发布2025-05-22 09:59:06
23200
代码可运行
举报
文章被收录于专栏:前端达人前端达人
运行总次数:0
代码可运行

👋 欢迎回到《前端达人 · React 播客书单》第 15 期(正文内容为学习笔记摘要,音频内容是详细的解读,方便你理解),请点击下方收听

视频版

今天我们来学习一个比 useState 更“工程化”的 Hook:useReducer

你可能听说过它,但不太确定该不该用、该怎么用。这节课,我们就用一张流程图、一个 demo,彻底弄懂 useReducer 的用法、场景和原理

✅ useReducer 是什么?

👉 它是 React 提供的另一个管理组件状态的 Hook。

但和 useState 不一样,它并不直接“设值”,而是通过:

代码语言:javascript
代码运行次数:0
运行
复制
dispatch(action) → reducer(state, action) → 返回新 state

这种流程式的方式,来更新状态。

🔍 为什么不是所有人都用 useReducer?

你可能会问:为啥不用 useState 就好了?

因为:

适合用 useState

更适合用 useReducer

状态简单(比如一个布尔值)

状态结构复杂(比如一个对象中多个字段)

每次更新只影响一小部分状态

多个状态之间互相关联,需要统一逻辑处理

不需要维护“状态变化规则”

希望所有状态变化逻辑集中在一个地方,便于维护

简而言之:复杂逻辑,选 useReducer,更清晰、统一、可控。

🧠 useReducer 的基本语法长这样:

代码语言:javascript
代码运行次数:0
运行
复制
const [state, dispatch] = useReducer(reducer, initialState);
  • reducer:纯函数,接收 stateaction,返回新 state
  • initialState:状态初始值
  • dispatch:你用来“发指令”的函数

📌 核心记住一句话:dispatch 发 action,不是直接改状态。

🧱 Reducer 函数:状态更新的“大脑”

我们来看一个 reducer 函数示例👇

代码语言:javascript
代码运行次数:0
运行
复制
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'reset':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

💡 特别强调两个原则:

  1. 只能返回新对象,不能直接改 state
  2. 不能有副作用(比如发请求、操作 DOM)

🎯 Action:状态变更的“意图声明”

action 是一个普通对象,例如:

代码语言:javascript
代码运行次数:0
运行
复制
{ type: 'increment' }
{ type: 'initialize', name: 'Alice' }

用 TypeScript,你可以这样写更清晰:

代码语言:javascript
代码运行次数:0
运行
复制
type Action =
  | { type: 'initialize'; name: string }
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset' }

👉 优势:自动类型推导,写错字段也能被发现。

🔁 用 useReducer 的完整流程

1️⃣ 定义 StateAction 类型 2️⃣ 编写 reducer 函数 3️⃣ 使用 useReducer(reducer, initialState)4️⃣ 在组件里调用 dispatch({ type: '...' }) 发起更新 5️⃣ React 自动执行 reducer,更新 state,触发重渲染

可以理解为是一个迷你 Redux,但不需要引入额外库。

📌 总结:什么时候该用 useReducer?

✅ 适合:

  • 状态是对象、结构复杂
  • 状态变化逻辑有依赖或多个步骤
  • 需要把更新逻辑提取出去统一管理

❌ 不适合:

  • 状态简单(布尔值、数字)
  • 状态之间毫无关联
  • 想快速写点小功能
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-05-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 👋 欢迎回到《前端达人 · React 播客书单》第 15 期(正文内容为学习笔记摘要,音频内容是详细的解读,方便你理解),请点击下方收听
  • 视频版
  • ✅ useReducer 是什么?
  • 🔍 为什么不是所有人都用 useReducer?
  • 🧠 useReducer 的基本语法长这样:
  • 🧱 Reducer 函数:状态更新的“大脑”
  • 🎯 Action:状态变更的“意图声明”
  • 🔁 用 useReducer 的完整流程
  • 📌 总结:什么时候该用 useReducer?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档