7.react useReducer使用与常见问题
useReducer函数
1. useState的替代方案.接收一个(state, action)=>newState的reducer,
并返回当前的state以及与其配套的dispatch方法2. 在某些场景下,useReducer会比useState更加适用,例如state逻辑较为复杂,
且**包含多个子值**,或者下一个state依赖于之前的state等
清楚useReducer场景?
与useState区别?
不足之处,只能处理同步
如何实现异步,提供了两个案例?
1. 用useState做登录
一组响应式数据有关联关系,可以做成一个整体,使用useReducer将其作为一个整体实现
<body><div id="app"></div><script type="text/babel">let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState } = React;// 用useState做登录// > 一组响应式数据有关联关系,可以做成一个整体,使用useReducer将其作为一个整体实现let Welcome = (props) => { const [ isLogin, setLogin ] = useState(true);const [ isLogout, setLogout ] = useState(false);const handleLogin= () => {setLogin(true);setLogout(false);}const handleLogout= () => {setLogout(true);setLogin(false);}return (<div>{isLogin?<button onClick={handleLogout}>登出</button>:<button onClick={handleLogin}>登录</button>}</div>);}let element = (<Welcome />);root.render(element);</script>
</body>2. 改为useReducer
<body><div id="app"></div><script type="text/babel">/* useReducer改写*/let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useReducer } = React;let loginState = {isLogin: true,isLogout: false}// 不足: 处理同步actionlet loginReducer = (state, action) => {switch (action.type) {case 'login':return { isLogin: true, isLogout: false }case 'logout':return { isLogin: false, isLogout: true }default:throw new Error()}}// 用useReducer做登录// > 根据类型,决定不同的state处理变化let Welcome = (props) => {const [state, loginDispatch] = useReducer(loginReducer, loginState);const handleLogin = () => {loginDispatch({ type: 'login' })}const handleLogout = () => {loginDispatch({ type: 'logout' })// loginDispatch({ type: 'logout' ,payload:''})}return (<div>{state.isLogin ?<button onClick={handleLogout}>登出</button> :<button onClick={handleLogin}>登录</button>}</div>);}let element = (<Welcome />);root.render(element);</script>
</body>
不足
useReduer只处理同步请求,对异步请求如何处理?
https://zhuanlan.zhihu.com/p/114367502
3.1 异步封装
组件页面
const init = { dataList:[] };//初始化dataStateconst [state,dispatch] = useReducer(reducer,init);useEffect(() => {//发送网络请求axios.get("/user?ID=123").then(res => {dispatch({type:ACTION_TYPE.GETDATA,payload:res.data //后端返回的数据})})
},[]);//使用 state.dataList 渲染页面
在reducer页面function reducer(state,action){switch(action.type){case "getData":return { //根据需求对数据做出操作，这里将返回的数据与初始化的数据合并...state,dataList:action.payload };
} export default reducer;
3.2 异步封装
初始化直接执行获取数据
import React, { useEffect, useState, useReducer } from "react";
import ReactDom from "react-dom";
import $ from "jquery";const useProduct = () => {const [data, dispatch] = useReducer((state, action) => {switch (action.type) {case "a":return action.value;default:return [];}}, []);useEffect(() => {$.ajax({url: "http://suggest.taobao.com/sug?code=utf-8&q=袜子",dataType: "jsonp",jsonp: "callback",success: (data) => {dispatch({type: 'a',value: data.result});},error: data => dispatch({type: 'error', msg: data})});}, []);return data;
};const Index = () => {const data = useProduct();return <>{data.length}</>;
};ReactDom.render(<Index />, document.getElementById("root"));
官网:
1. https://zh-hans.legacy.reactjs.org/docs/hooks-reference.html#usereducer
相关文章：
7.react useReducer使用与常见问题
useReducer函数 1. useState的替代方案.接收一个(state, action)>newState的reducer, 并返回当前的state以及与其配套的dispatch方法2. 在某些场景下,useReducer会比useState更加适用,例如state逻辑较为复杂, 且**包含多个子值**,或者下一个state依赖于之前的state等清楚us…...
c#泛型（generic）
概述： C#中的泛型（Generics）是一种允许在编写类、方法和委托时使用参数化类型的机制。泛型允许我们编写更通用、可重用的代码，可以避免类型转换和重复编写类似的代码。 泛型的基本语法如下所示： class ClassName<…...
【力扣每日一题】2023.8.30 到家的最少跳跃次数
目录 题目： 示例： 分析： 代码： 题目： 示例： 分析： 题目给我们一只跳蚤，我们可以操控它前跳 a 格或是后跳 b 格，不能跳到小于0的位置，有一些被禁止的点不…...
精读《算法题 - 地下城游戏》
今天我们看一道 leetcode hard 难度题目：地下城游戏。 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里，他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士…...
随记-Kibana Dev Tools，ES 增删改查 索引，Document
索引 创建索引 创建索引 PUT index_test创建索引 并 修改分片信息 # 创建索引 并 修改分片信息 PUT index_test2 { # 必须换行, PUT XXX 必须独占一行，类似的 其他请求也需要独占一行 "settings": {"number_of_shards": 1, # 主分片"…...
什么是架构，架构的本质是什么
不论是开发人员还是架构师，我们都一直在跟软件系统打交道，架构是在工作中出现最频繁的术语之一。那么，到底什么是架构？你可能有自己的答案，也有可能没有答案。对“架构”的理解需要我们不断在实践中思考、归纳、演绎&a…...
Python爬虫(十七)_糗事百科案例
糗事百科实例 爬取糗事百科段子，假设页面的URL是: http://www.qiushibaike.com/8hr/page/1 要求： 使用requests获取页面信息，用XPath/re做数据提取获取每个帖子里的用户头像连接、用户姓名、段子内容、点赞次数和评论次数保存到json文件内…...
Ae 效果：CC Threads
生成/CC Threads Generate/CC Threads CC Threads（CC 编织条）效果基于当前图层像素生成编织条图案和纹理。可以用在各种设计中，如背景设计、图形设计、文字设计等。 ◆ ◆ ◆ 效果属性说明 Width 宽度 设置编织的宽度。 默认值为 50。值越大…...
)
Kotlin 协程 - 多路复用 select()
一、概念 又叫选择表达式，是一个挂起函数，可以同时等待多个挂起结果，只取用最快恢复的那个值（即多种方式获取数据，哪个更快返回结果就用哪个）。 同时到达 select() 会优先选择先写子表达式，想随…...
学习笔记-ThreadLocal
ThreadLocal 什么是ThreadLocal？ ThreadLocal 是线程本地变量类，在多线程并行执行过程中，将变量存储在ThreadLocal中，每个线程中都有独立的变量，因此不会出现线程安全问题。 应用举例 解决线程安全问题：例…...
python利用pandas统计分析—groupby()函数的使用
文章目录 一、groupby使用场景二、groupby基本原理三、groupby分组运算基础聚合操作：只能选择一种聚合操作agg 聚合操作：可以针对同列选择不同聚合方法transformapply 四、groupby分组后去重统计nunique()五、groupby分组后重命名列名rename()直接重新命…...
OPENCV实现ORB特征检测
# -*- coding:utf-8 -*- """ 作者：794919561 日期：2023/8/31 """ import cv2 import numpy as np# 读图像 img = cv2.imread(F:\\learnOpenCV\\openCVLearning\\pictures\\chess.jpg)...
W5100S-EVB-PICO主动PING主机IP检测连通性（十）
前言 上一章节我们用我们开发板在UDP组播模式下进行数据回环测试，本章我们用开发板去主动ping主机IP地址来检测与该主机之间网络的连通性。 什么是PING？ PING是一种命令， 是用来探测主机到主机之间是否可通信，如果不能ping到某台…...
使用 Nginx 搭建文件下载服务器
文章目录 一、基础环境二、适用场景三、方法和步骤四、其他说明 版权声明：本文为CSDN博主「杨群」的原创文章，遵循 CC 4.0 BY-SA版权协议，于2023年8月27日首发于CSDN，转载请附上原文出处链接及本声明。 原文链接：http…...
链式栈StackT
C关键词：内部类/模板类/头插 C自学精简教程 目录(必读) C数据结构与算法实现（目录） 栈的内存结构 空栈： 有一个元素的栈： 多个元素的栈： 成员函数说明 0 clear 清空栈 clear 函数负责将栈的对内存释放…...
Fiddler中 AutoResponder 使用
Fiddler的 AutoResponder ，即URL重定向功能非常强大。不管我们做URL重定向，还是做mock测试等，都可以通过该功能进行实践。 下面，小酋就来具体讲下该功能的用法。 Enable rules 启用规则Unmatched requests passthrough 没有匹配…...
77GHz线性调频连续波雷达
文章目录 前言 一、背景 二、优缺点 三、工作原理 四、电路模块设计 4.1.LFMCW信号源 4.2.发射电路 4.3.接收电路 4.4.信号处理器 五、应用 5.1.汽车测距 5.2.军事方面 5.3.气象方面 总结 前言 这篇文章是博主本科期间整理的关于77GHz线性调频连续波雷达的相关资料，…...
YOLOV8改进：更换为MPDIOU,实现有效涨点
1.该文章属于YOLOV5/YOLOV7/YOLOV8改进专栏，包含大量的改进方式，主要以2023年的最新文章和2022年的文章提出改进方式。 2.提供更加详细的改进方法，如将注意力机制添加到网络的不同位置，便于做实验，也可以当做论文的创新点。 2.涨点效果：更换为MPDIOU,实现有效涨点！ 目录…...
BookStack开源免费知识库docker-compose部署
BookStack（书栈）是一个功能强大且易于使用的开源知识管理平台，适用于个人、团队或企业的文档协作和知识共享。 一、BookStack特点 简单易用：BookStack提供了一个直观的用户界面，使用户能够轻松创建、编辑和组织文档多…...
Linux：编译遇到 Please port gnulib freadahead.c to your platform ，怎么破
问题背景 编译m4时遇到以下错误，该怎么解决呢？ 解决方法 进入m4的build目录：build/host-m4-1.4.17 输入命令： sed -i s/IO_ftrylockfile/IO_EOF_SEEN/ lib/*.c echo "#define _IO_IN_BACKUP 0x100" >> lib/std…...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
Python爬虫（二）：爬虫完整流程
爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程 以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备 网站技术分析： 使用浏览器开发者工具（F12&…...
【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）
🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...