React的hooks---useReducer

useReducer 作为 useState 的代替方案,在某些场景下使用更加适合,例如 state 逻辑较复杂且包含多个子值,或者下一个 state 依赖于之前的 state 等。

使用 useReducer 还能给那些会触发深更新的组件做性能优化,因为父组件可以向自组件传递 dispatch 而不是回调函数

const [state, dispatch] = useReducer(reducer, initialArg, init);

使用:

import React, { useReducer } from 'react'const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return {count: state.count + 1};case 'decrement':return {count: state.count - 1};default:throw new Error();}
}export default function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<><p>Count: {state.count}</p><button onClick={() => dispatch({type: 'decrement'})}>-</button><button onClick={() => dispatch({type: 'increment'})}>+</button></>);
}

 初始化 state:

useReducer 初始化 sate 的方式有两种

// 方式1
const [state, dispatch] = useReducer(reducer,{count: initialCount}
);// 方式2
function init(initialClunt) {return {count: initialClunt};
}const [state, dispatch] = useReducer(reducer, initialCount, init);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/11758.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux terminal显示git分支

首先查看PS1&#xff1a; echo $PS1 在.bashrc中添加下面修改&#xff1a; function git_branch {branch"git branch 2>/dev/null | grep "^\*" | sed -e "s/^\*\ //""if [ "${branch}" ! "" ];thenif [[ $branch *&…

华为OD机考--阿里巴巴黄金箱

题目内容 贫如洗的樵夫阿里巴巴在去砍柴的路上&#xff0c;无意中发现了强盗集团的藏宝地&#xff0c;藏宝地有编号从0~N的箱子每个箱子上面贴有一个数字箱子中可能有一个黄金宝箱。 黄金宝箱满足排在它之前的所有箱子数字和等于排在它之后的所有箱子数字之和; 一个箱子左边部分…

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jul 2023)

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jul 2023) Windows 11, version 22H2 官方原版&#xff0c;2023 年 7 月 更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-11/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作…

vue实现excel数据下载,后端提供的list由前端转excel并下载

前言,因为项目需求需要,我们需要把后端传来的list转成excel模板,并且下载下来) 之前有用的插件,但是会有少0的情况,如下 所以采用另一个项目用过的方法,最终完美实现效果,如下: 1,首先我们来看下后端提供的数据结构 2,具体前端代码如下 封装的组件,需要的同学直接copy就行(这…

苍穹外卖Day01项目日志

1.软件开发流程和人员分工是怎样的&#xff1f; 软件开发流程 一个软件是怎么被开发出来的&#xff1f; 需求分析 先得知道软件定位人群、用户群体、有什么功能、要实现什么效果等。 需要得到需求规格说明书、产品原型。 需求规格说明书 其中前后端工程师要关注的就是产品原…

nginx启动报 ssl parameter requires ngx_http_ssl_module

更新网站安全证书时报上面的错&#xff0c;解决步骤&#xff1a; 问题分析 原因&#xff1a;nginx缺少http_ssl_module模块&#xff0c;编译安装的时候带上–with-http_ssl_module配置就行了&#xff0c;但是现在的情况是我的nginx已经安装过了&#xff0c;怎么添加模块&…

IP代理技术在网络安全与爬虫应用中的优势与挑战

一、IP代理技术简介 IP代理是一种将客户端请求通过中间服务器转发至目标服务器的网络技术。通过代理服务器&#xff0c;客户端的真实IP地址被隐藏&#xff0c;从而提高用户的匿名性和隐私保护。常见的IP代理类型有HTTP代理和SOCKS代理。 二、IP代理在网络安全中的应用 防止DOS…

数据库缓存服务——NoSQL之Redis配置与优化

目录 一、缓存概念 1.1 系统缓存 1.2 缓存保存位置及分层结构 1.2.1 DNS缓存 1.2.2 应用层缓存 1.2.3 数据层缓存 1.2.4 硬件缓存 二、关系型数据库与非关系型数据库 2.1 关系型数据库 2.2 非关系型数据库 2.3 关系型数据库和非关系型数据库区别&#xff1a; 2.4 非…

B076-项目实战--宠物上下架 展示 领养 收购订单

目录 上下架功能提供后台宠物列表实现 前台展示前台宠物列表和详情展示店铺展示 领养分析前台后端PetControllerPetServiceImpl 订单需求分析可能产生订单的模块订单模块额外功能 订单设计表设计流程设计 集成基础代码收购订单创建订单前端后端 上下架功能提供 后台宠物列表实…

深度学习算法的计算量

文章目录 一、FLOPs与FLOPS二、参数量parameters三、Latency与FPS四、结论 一、FLOPs与FLOPS 二、参数量parameters 三、Latency与FPS 四、结论

Spring 项目过程及如何使用 Spring

文章目录 1.创建 Spring 项目步骤1.1 创建 Maven 项目1.2添加 Spring 框架支持1.3 添加启动项2.如何使用 Spring2.1 存储 Bean 对象2.1.1 创建 Bean对象2.1.2 将 Bean对象注册到容器中 2.2 获取并使用 Bean对象2.2.1 使用 ApplicationContext 获取对象2.2.2 使用 BeanFactory 获…

基于LoRA进行Stable Diffusion的微调

文章目录 基于LoRA进行Stable Diffusion的微调数据集模型下载环境配置微调过程 推理WebUI部署 基于LoRA进行Stable Diffusion的微调 数据集 本次微调使用的数据集为&#xff1a; LambdaLabs的Pokemon数据集 使用git clone命令下载数据集 git clone https://huggingface.co/…

快速排序qsort讲解

hello大家好&#xff0c;我是c语言boom家宝&#xff0c;今天为大家分享的博客内容是qsort快速排序&#xff0c;简称快排的一个知识点的讲解。 在讲到快排之前&#xff0c;允许博主先提一嘴冒泡排序。大家在c语言的学习过程中&#xff0c;冒泡排序是必不可少会学习到的一个思想&…

有关合泰BA45F5260中断的思考

最近看前辈写的代码&#xff0c;发现这样一段代码&#xff1a; #ifdef SUPPORT_RF_NET_FUNCTION if(UART_INT_is_L()) { TmrInsertTimer(eTmrHdlUartRxDelay,TMR_PERIOD(2000),NULL); break; } #endif 其中UART_INT_is_L&am…

python连接mysql数据库

1、安装mysql模块 pip install pymysql2、创建表结构 先自己安装一个数据库&#xff0c;并在navicat 中创建表结构 创建unicom的数据 create database unicom DEFAULT CHARSET utf8 COLLATE utf8_general_ci;创建admin的表&#xff0c;包含id, username,password、mobile C…

C++对C的加强(全)

目录 C对C的加强 命名空间 为什么要使用命名空间 怎么使用命名空间 命名空间的定义 命名空间的使用 使用域解析符 :: 使用using声明 内联命名空间 嵌套命名空间 随时将新的成员加入命名空间 命名空间中 函数的声明和实现分开 无名命名空间 命名空间取别名 使用u…

安卓面试问题记录

目录 1. JNI和NDK1.谈谈你对JNI和NDK的理解2.简要的JNI调用过程:2. 线程、同步、异步1.Java创建线程的方式有几种?start()方法和 run()方法的区别2.Handler 机制和原理3.为什么在子线程中创建Handler会抛异常?4.Android中的ANR的解决方法5.intentservice有什么优点?6.okhtt…

QEMU源码全解析17 —— QOM介绍(6)

接前一篇文章&#xff1a;QEMU源码全解析16 —— QOM介绍&#xff08;5&#xff09; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 上一回讲解了Q…

【通讯录】--C语言

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

路由策略(重发布)

要求&#xff1a; 1、使用双点双向重发布 2、所有路由器进行最佳选路 3、存在备份路径&#xff0c;不得出现环路&#xff0c;和路由回馈 1.更改设备名称配置接口IP地址 R1 <Huawei>system-view [Huawei]sysname R1 [R1]interface GigabitEthernet 0/0/0 [R1-GigabitEt…