位置: 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)

  • 以房抵债的房子交房产税吗
  • 新的税收
  • 旅游公司的账务框架
  • 退票凭证什么样子
  • 基本存款账户可以换银行吗?
  • 固定资产中的动态投资包括
  • 金税盘不用了之后要抄报税吗
  • 哪些行业不能开具增值税专用发票
  • 计提坏账又收回
  • 低于5000是什么意思
  • 商业银行的下列哪些行为违反了法律规定?给存款大户
  • 机动车丢失后怎么销户
  • 个人工资税收怎么申报
  • 子公司给母公司开票
  • 只开增值税普通发票,需要申报税务吗
  • 食堂伙食费怎么入账
  • 民办非企业单位设立分机构
  • 在建工程如何抵扣个税
  • 增值税的价外费用不包括什么
  • 所得税调增调减项目
  • 有合同未收到租金税务如何处理?
  • 免税农产品发票可以抵扣么
  • 发票金额大于实际支付金额如何报账
  • 火狐浏览器下载安装
  • mac系统怎么玩游戏
  • 购买的房屋如何过户
  • 车辆的代驾费应该怎么收
  • linux不能联网怎么解决
  • 未分配利润转增股本交印花税
  • 增值税专用发票有几联?
  • win11预览版dev改beta
  • 吃鸡显卡推荐配置1060 5g
  • php面向对象编程
  • PHP:pcntl_sigwaitinfo()的用法_PCNTL函数
  • 税盘可以全额抵扣是什么意思
  • 资产证券化会计信息披露规范
  • 仓储服务和不动产租赁
  • 小企业会计科目表
  • 违法汽车查询
  • 出口退税税率差
  • 上缴税金怎么算税额
  • 6月收到4月的单子怎么办
  • 前端架构优化
  • 固定资产是不是非货币性资产
  • 个人所得税核定征收税率
  • 固定资产折旧的账务处理
  • 劳务支出和应付职工薪酬
  • 预缴税款计算表填0.01行吗
  • 如何拉企业纳税申报表
  • 工资结算汇总表怎么填
  • 个人所得税手续费返还增值税申报表怎么填
  • 收到退还的增值税
  • 单位发给职工的餐费补贴我变卖了违法吗?
  • 公司租赁个人车辆租金多少合适
  • 房地产企业简易计税和一般计税的区别
  • 社保公积金怎么取出来
  • 递延所得税资产和所得税费用的关系
  • 停车费报账
  • 支付安全生产费会计科目
  • 工会经费会返还吗
  • 工伤 保险赔付
  • 会计核算采用什么形式
  • 养老服务机构有住房租赁贷款需求吗
  • sql数据库性能
  • mysql数据库数据迁移
  • xp系统怎么用u盘启动电脑
  • windows硬盘是什么意思
  • 连接远程mq
  • explorer.exe中文叫什么
  • win8如何进行系统还原
  • jquery实现
  • 批处理常用命令总结
  • perl脚本调试方法
  • jquery easyui 教程
  • 菜鸟教程 安卓版
  • shell 数组变量
  • jQ处理xml文件和xml字符串的方法(详解)
  • bat批处理如何添加参数运行
  • 北京煤火费2021标准
  • 购旧设备增值税能不能抵扣
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设