- 综合排序
- 最热优先
- 最新优先
- 来自专栏杨不易呀
React-Hooks-useReducer
以下是关于 useReducer 的简介：useReducer 的工作方式类似于传统的 React 类组件中的 this.setState，但更适用于处理复杂状态和操作。 useReducer 返回一个包含当前状态和 dispatch 函数的数组。dispatch 函数用于触发操作，并传递给 reducer 函数。 与 useState 不同，useReducer 更适合处理复杂的状态逻辑，例如表单验证、多步骤操作或需要依赖先前状态的更新。 useReducer Hook 概述从名称来看, 很多人会误以为 useReducer 是用来替代 Redux 的, 但是其实不是useReducer 是 useState 的一种替代方案, 可以让我们很好的复用操作数据的逻辑代码首先来用一个案例来带出 useReducer 接收的参数：第一个参数: 处理数据的函数第二个参数: 保存的默认值useReducer 返回值，会返回一个数组, 这个数组中有两个元素：第一个元素: 保存的数据第二个元素: dispatch
39320编辑于 2023-10-01 - 来自专栏进阶高级前端工程师
React源码之useState，useReducer
updateState(initialState) { return updateReducer(basicStateReducer);}看到这几行代码，看官们应该就明白为什么网上有人说useState和useReducer
1.1K40编辑于 2022-12-16 - 来自专栏WebJ2EE
【Hooks】：How to useReducer in React
React's useReducer Hook Part 3: What about useState? Part 2: How to useReducer in React？ React's useReducer Hook The useReducer hook is used for complex state and state transitions. in React： https://www.robinwieruch.de/react-usereducer-hook Getting to Know the useReducer React Hook ://kentcdodds.com/blog/should-i-usestate-or-usereducer ----
46320发布于 2021-02-26 - 来自专栏卡拉云-低代码开发工具
React useReducer 终极使用教程
本文完整版：《React useReducer 终极使用教程》 useReducer 是在 react V 16.8 推出的钩子函数，从用法层面来说是可以代替useState。 然而，useState其实是使用到useReducer的，这意味着，只要是使用useState实现的，都可以使用useReducer去实现。 用 useReducer 声明state 使用useReducer 的时候看下面的语句： const [state, dispatch] = useReducer(reducer, initialState useReducer 用法之不该使用的场景 这是一个好的问题，前面介绍了使用useReducer 的情况，但是什么时候我们不可以用useReducer 呢。 React useReducer 教程总结 到这里 useReducer 的使用场景和用法例子讲解都已经介绍完成了，最后我们回顾一下，首先类比于redux的reducer，useReducer 的思路和
4.5K10编辑于 2022-08-31 - 来自专栏进阶高级前端工程师
React源码中的useState，useReducer
updateState(initialState) { return updateReducer(basicStateReducer);}看到这几行代码，看官们应该就明白为什么网上有人说useState和useReducer
1.5K30编辑于 2022-12-07 - 来自专栏前端开发
react useReducer 复杂状态管理
useReducer 是 React 中用于管理复杂状态逻辑的 Hook，尤其适合处理具有多个子值的状态对象、存在复杂状态转换逻辑或多个操作影响同一状态的场景。 在组件中使用 useReducerimport { useReducer } from 'react';function TodoApp() { // 初始化状态（空数组），获取 [状态, dispatch 函数] const [todos, dispatch] = useReducer(todoReducer, []); const [inputText, setInputText] = useState 初始化状态：可直接传初始值，或通过函数返回（适合复杂初始化逻辑）：// 函数式初始化（只执行一次）const [state, dispatch] = useReducer(reducer, null, () => { return { count: localStorage.getItem('count') || 0 };});通过 useReducer，可以将复杂状态逻辑从组件中抽离，让组件更专注于
26910编辑于 2025-08-16 - 来自专栏进阶高级前端工程师
React源码分析(三)：useState，useReducer
updateState(initialState) { return updateReducer(basicStateReducer);}看到这几行代码，看官们应该就明白为什么网上有人说useState和useReducer
1.2K20编辑于 2022-09-27 - 来自专栏不知非攻
超性感的React Hooks（七）useReducer
useReducer是React hooks提供的API之一，它和redux的使用几乎一样。因此如果你熟悉redux，那么自然就已经知道如何去使用useReducer了。 首先从React中引入 import React, { useReducer } from ‘react’; 然后需要定义一个状态值，以表示useReducer维护的数据格式。 Store, Reducer, Action是Redux的三大核心概念，同时也是useReducer的三大核心概念。 三大核心准备好之后，我们就可以定义函数组件，并在其中使用useReducer了。 和redux不同的是，useReducer并没有围绕这些痛点提供对应的解决方案。因此如果你想要在项目中使用useReducer，仅仅只建议小范围使用，把复杂度控制在可以接受的范围之内。 因此在使用useReducer时，应该评估好当前应用场景。 当使用useState需要定义太多独立的state时，我们就可以考虑使用useReducer来降低复杂度。
3.2K20发布于 2020-07-27 - 来自专栏进阶高级前端工程师
React源码分析(三)：useState，useReducer4
updateState(initialState) { return updateReducer(basicStateReducer);}看到这几行代码，看官们应该就明白为什么网上有人说useState和useReducer
93030编辑于 2023-01-06 - 来自专栏前端达人
React 播客专栏 Vol.15｜彻底搞懂 useReducer 是个啥？
这节课，我们就用一张流程图、一个 demo，彻底弄懂 useReducer 的用法、场景和原理。 ✅ useReducer 是什么？ 它是 React 提供的另一个管理组件状态的 Hook。 为什么不是所有人都用 useReducer？ 你可能会问：为啥不用 useState 就好了？ useReducer 的基本语法长这样： const [state, dispatch] = useReducer(reducer, initialState); reducer：纯函数，接收 state 用 useReducer 的完整流程 1️⃣ 定义 State 和 Action 类型 2️⃣ 编写 reducer 函数 3️⃣ 使用 useReducer(reducer, initialState 总结：什么时候该用 useReducer？
43510编辑于 2025-05-22 - 来自专栏进阶高级前端工程师
React源码分析(三)：useState，useReducer_2023-02-19
updateState(initialState) { return updateReducer(basicStateReducer);}看到这几行代码，看官们应该就明白为什么网上有人说useState和useReducer
89720编辑于 2023-02-19 - 来自专栏Web 技术
将 useReducer 应用于 Web Worker，擦出奇妙的火花
我们还将学习通过 useWorkerizedReducer 在web worker 中使用 useReducer Hook。 useReducer useReducer是一个React Hook，用于存储和更新状态。 useWorkerizedReducer 负责向 worker 提供 useReducer 的功能。 结尾 在这篇文章中，我们简要介绍了 web worker 和 useReducer，以及如何构造和添加 web worker 文件到 React 应用程序中。 我们还讨论了useWorkerizedReducer，它为 web worker 带来了useReducer 的功能。
2.3K30编辑于 2022-07-29 - 来自专栏图雀社区
用动画和实战打开 React Hooks（三）：useReducer 和 useContext
但实际上在 React 的源码中，useState 的实现使用了 useReducer（本文的主角，下面会讲到）。 useReducer 使用浅析 首先，我们还是来看下官方介绍的 useReducer 使用方法： const [state, dispatch] = useReducer(reducer, initialArg 什么时候该用 useReducer 你也许发现，useReducer 和 useState 的使用目的几乎是一样的：定义状态和修改状态的逻辑。 useReducer 使用起来较为繁琐，但如果你的状态管理出现了至少一个以下所列举的问题： 需要维护的状态本身比较复杂，多个状态之间相互依赖 修改状态的过程比较复杂 那么我们就强烈建议你使用 useReducer 我们来通过一个实际的案例讲解来感受一下 useReducer 的威力（这次不是无聊的计数器啦）。
2K30发布于 2020-05-08 - ) } 改造：结合 useReducer 来使用 一些团队或者开源项目，会基于 context 和 useReducer 来封装状态管理，用来替代 redux 在项目中的地位。 准备工作都做好了之后，我们再定义 Provider 组件 export function Provider({children}: Props) { const [state, dispatch] = useReducer 惊喜的是，在逻辑清晰的情况下，我们发现 useReducer + useContext 使用起来也不是很困难。 我们在来一个更复杂一点的案例，巩固一下我们学习到的知识。 return tasks } 最后定义 Provider export function Provider({children}: Props) { const [tasks, dispatch] = useReducer来自专栏不知非攻
在爱 context 一次，并结合 useReducer 使用，这次有一点简单
onClick={increment}>递增</Button> <Button onClick={decrement}>递减</Button>
54520编辑于 2023-12-20
React的Reducer Hook让state有了状态！
useReducer 是 useState 的升级版本，对 setState 这个操作进行了拆分，可以根据不同类型，进行不同的逻辑计算，最后去改变 state 对象。 ); 2、法二：惰性初始化 useReducer 需要一个初始值和初始函数，经过计算得到的值作为 useReduccer 的初始化数据。 这样就把计算逻辑独立在 useReducer 外部，为将来对重置 state 的 action 做处理提供了便利。 useReducer 来解决。 useContext 负责传递执行函数，useReducer 负责对执行函数划分出不同状态，可供选择执行。
【TypeScript】：functions、types
React 是怎么定义 useReducer 的？ 2. TypeScript 必备知识 2.1. Functions 2.1.1. Type inference in conditional types 3. useReducer 定义解析 本系列文章将从一些著名开源项目中找一些 TypeScript 代码，讲解如何应用 TypeScript React 是怎么定义 useReducer 的？ 以下代码节选自 React 的 useReducer 的 TypeScript 定义。 如果能完全读懂，那这篇文章就不用看了... * * `useReducer` is usually preferable to `useState` when you have complex state logic that involves where dispatch could accept 0 arguments. function useReducer<R extends ReducerWithoutAction<any>, I>
React系列-自定义Hooks很简单
并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。 笔者[狗头]认为，暂时应该不会用useReducer替代useState，毕竟Redux的写法实在是很繁琐 复杂数据结构场景 刚好最近笔者的项目就碰到了复杂数据结构场景，可是并没有用useReducer 虽然没有使用useReducer进行替代，笔者还是推荐大家试试 如何使用 const [state, dispatch] = useReducer(reducer, initialArg, init); 知识点合集 引用不变 useReducer返回的state跟ref一样，引用是不变的，不会随着函数组件的重新更新而变化，因此useReducer也可以解决闭包陷阱 const setCountReducer 利用useReducer来创建我们的store import React, { Component, useReducer, useContext } from 'react'; import {
Reducer：让代码更灵活&简洁
如：上述提到的，希望age控制在1-120之间 const [personalInfo, setPersonalInfo] = useReducer((state, next) => { const useReducer((state, next) => { // ❌ 改变现存 state 对象 state.age = next.age; return state // ✔️ useReducer 对于拥有许多状态更新逻辑的组件来说，过于分散的事件处理程序可能会令人不知所措。 对于这种情况，可以将组件的所有状态更新逻辑整合到一个外部函数中，这个函数叫作 reducer。 useReducer 是一个 React Hook，允许向组件里面添加一个 reducer。 const [state, dispatch] = useReducer(reducer, initialArg, init?) 参数： reducer：用于更新 state 的纯函数。
react源码解析13.hooks源码2
：例如const [state, dispatch] = useReducer(reducer, {});，memoizedState等于state的值useEffect：在mountEffect时会调用 useCallback保存callback函数，useMemo保存callback的执行结果useState&useReducer之所以把useState和useReducer放在一起，是因为在源码中useState 就是有默认reducer参数的useReducer。 );}mount阶段 mount阶段useState调用mountState，useReducer调用mountReducer，唯一区别就是它们创建的queue中lastRenderedReducer 不一样，mount有初始值basicStateReducer，所以说useState就是有默认reducer参数的useReducer。
react源码解析13.hooks源码_2023-03-01
：例如const [state, dispatch] = useReducer(reducer, {});，memoizedState等于state的值 useEffect：在mountEffect时会调用 useCallback保存callback函数，useMemo保存callback的执行结果 useState&useReducer 之所以把useState和useReducer放在一起，是因为在源码中 useState就是有默认reducer参数的useReducer。 , init) { var dispatcher = resolveDispatcher(); return dispatcher.useReducer(reducer, initialArg, 不一样，mount有初始值basicStateReducer，所以说useState就是有默认reducer参数的useReducer。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号