位置: IT常识 - 正文

React中useReducer的理解与使用(react usereducer)

编辑:rootadmin
React中useReducer的理解与使用

推荐整理分享React中useReducer的理解与使用(react usereducer),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react use,react use,react useref和createref,react useref和createref,react userouter,react useref和createref,react usereducer,react usereducer,内容如对您有帮助,希望把文章链接给更多的朋友!

这里以简单的语言描述一下useReducer的使用。也可自己查看官方文档(英文)

useReducer的使用场景: 当一个state需要维护多个数据且它们之间互相依赖。 这样业务代码中只需要通过dispatch来更新state,繁杂的逻辑都在reducer函数中了。

一、useReducer

demo:

function reducer(state, action){ //...}const [state, dispatch] = useReducer(reducer, { name: "qingying", age: 18 });1. useReducer

主要作用就是更新state。

React中useReducer的理解与使用(react usereducer)

参数:

第一个是 reducer 函数,这个函数返回一个新的state。 后面再详述该函数的使用。第二个是 state 初始值。

返回值:

当前 state。(可以在业务代码中获取、操作的就是它。)dispatch 函数,纯函数,用来更新state,并会触发re-render。 (通俗地说,dispatch就是重新操作state的,会让组件重新渲染)2. reducer函数

作用:处理传入的state,并返回新的state。

参数:

接受当前 state。接受一个action,它是 dispatch 传入的。

返回值:

新的state。

3. dispatch函数

发送一个对象给reducer,即action。

参数: 一个对象。 返回值: 无。

完整代码:

import { useReducer } from "react";/* 当state需要维护多个数据且它们互相依赖时,推荐使用useReducer组件内部只是写dispatch({...})处理逻辑的在useReducer函数中。获取action传过来的值,进行逻辑操作*/// reducer计算并返回新的statefunction reducer(state, action) { const { type, nextName } = action; switch (type) { case "ADD": return { ...state, age: state.age + 1 }; case "NAME": return { ...state, name: nextName }; } throw Error("Unknown action: " + action.type);}export default function ReducerTest() { const [state, dispatch] = useReducer(reducer, { name: "qingying", age: 12 }); function handleInputChange(e) { dispatch({ type: "NAME", nextName: e.target.value }); } function handleAdd() { dispatch({ type: "ADD" }); } const { name, age } = state; return ( <> <input value={name} onChange={handleInputChange} /> <br /> <button onClick={handleAdd}>添加1</button> <p> Hello,{name}, your age is {age} </p> </> );}
本文链接地址:https://www.jiuchutong.com/zhishi/300187.html 转载请保留说明!

上一篇:【Node.js实战】一文带你开发博客项目(API 对接 MySQL)(node.js教程详细)

下一篇:SOC计算方法:卡尔曼滤波算法(sockas)

  • 三证合一后纳税人识别号和信用代码一样吗
  • 车船税可以免掉吗
  • 港建费征收管理办法
  • 工资申报是当月申报当月的吗
  • 城建税少申报了怎样罚款
  • 担保费能否开专票
  • 公司滴滴发票是什么意思
  • 金蝶k3审核过账在哪里
  • 甲方代扣水电费怎么做账
  • 个体生产经营所得税税率表
  • 企业进口关税和消费关税
  • 汽车的购置税可以不交吗
  • 差额征税怎么交税
  • 可供分配利润包含哪些
  • 汽车销售公司购进车辆怎么做账
  • 公司承揽员工租房个税如何入账?
  • 开出转账支票的摘要怎么写
  • 土地一次开发和二次开发
  • 实收资本未注明投资款
  • 融资租赁要怎么做
  • 专利年费是不是只能一项一项交
  • 无人机开票税收编码是多少
  • 商品进销差价属不属于存货
  • 销售发票冲红的条件有哪些?
  • 期末调汇会计分录
  • 谷歌浏览器adobe flash player已不再支持
  • 用户登录系统后首先进入什么
  • 卸载了驱动程序会怎么样
  • deepin切换系统
  • u盘的重装系统
  • 项目款申请
  • 企业生产过程中的一个安全问题必须
  • 印花税是按开票金额还是收入
  • 各种主板bios中文设置图解
  • win10一直显示修复
  • 交易性金融资产的入账价值
  • linux如何管理进程
  • 多对账工作的主要内容
  • 分公司开业开场白
  • vue插槽有什么作用
  • chat form
  • php curl_init
  • 税务申报说明怎么写范文
  • 关税组成计税价格公式推导
  • 帝国cms视频教程
  • 文化事业建设费税收优惠政策2023
  • 收到快递赔款分录怎么做
  • 用友财务软件怎么下载到电脑
  • 织梦安装详细教程
  • sqlserver存储过程声明变量
  • 报表怎么报送
  • 买新车检测费
  • 纳税人增值税专用发票票面价税合计最多开多少金额
  • 公司账户钱取出来税务局会查账吗
  • 纳税申报是根据什么填写的
  • 完税凭证抵扣进项税额分录
  • 借管理费用贷应交税费个人所得税
  • 公司举办活动的好处
  • 收入可以直接转成本吗?
  • 其他应收怎么转收入
  • 货款已付对方不发货的案例分析
  • 固定资产清理明细账采用什么账簿
  • 用SQL脚本读取Excel中的sheet数量及名称的方法代码
  • mysql innode
  • mysql怎么切换到bin目录
  • linux 的ll
  • freenas11.2安装教程
  • win8如何安装win10系统
  • win8的VPN连接报942错误(xp、win7下均可使用)
  • 红帽企业版更新了吗
  • debian linux教程
  • WIN7系统如何设置开机密码和屏保密码
  • win7系统咋样
  • 河北税务云办税厅官方
  • 哪些润滑油属于润滑剂
  • 河北市国家税务局官网
  • 下列关于消费税委托加工说法正确的是
  • 企业所得税的改革与完善
  • 小规模纳税人在电子税务局怎么报税
  • 税务系统全面从严
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设