【React Hooks】useReducer()

useReducer 的三个参数是可选的,默认就是initialState,如果在调用的时候传递第三个参数那么他就会改变为你传递的参数,实际开发不建议这样写。会增加代码的不可读性。

使用方法:

必须将 useReducer 的第一个参数(函数)写在定义 hook 的上方。

第一个参数 state 就是你定义的数据。action 是你将来调用 dispatchData 来告诉它你要如何操作数据。

比如我要往数组中增加一个元素,我就可以这样写

switch 语句我判断 type 传递的值是不是 AddItem 如果是的话我就执行对应的方法,并且把 data 作为新加入的元素。

那么删除也是同理:

调用 dispatchData 传入 type 为 DeleteItem 最后在 switch 中判断走逻辑方法。

时小记,终有成。

相关推荐
wear工程师2 分钟前
防抖为什么会失效?React 面试里的闭包和定时器
javascript·react.js
浅水壁虎4 分钟前
vue基础(第四章 Pinia)
前端·javascript·vue.js
用户2181697049308 分钟前
Flutter (十四) SingleChildScrollView ListView
前端
昭阳10 分钟前
4 个 vibe coding 项目,一个普通前端的半年
前端·人工智能·设计
颜进强13 分钟前
Claude Code - 26 效率三件套:cc-switch 切模型 · codeburn 算成本 · claude-hud 看状态
前端·后端·ai编程
东方小月36 分钟前
从零开发一个 Coding Agent(八):如何使用 Agent 类管理对话状态
前端·人工智能
张元清1 小时前
React useEventSource Hook:自带断线重连的 Server-Sent Events (2026)
javascript·react.js
光影少年1 小时前
RN 网络请求:Fetch / Axios 封装、超时、拦截器
前端·react native·react.js
学习星球1 小时前
Vue 3 实战:拆解 RealWorld 项目
前端·vue.js
铁皮饭盒1 小时前
网页端, 6.5MB人脸识别模型, 谷歌框架, 又快又准
前端·javascript·后端