当前位置： 首页 > news >正文

7.react useReducer使用与常见问题

news 2025/7/8 20:31:00

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…...

编程日记 2023/9/1 8:23:03

c#泛型（generic）

概述&#xff1a; C#中的泛型&#xff08;Generics&#xff09;是一种允许在编写类、方法和委托时使用参数化类型的机制。泛型允许我们编写更通用、可重用的代码&#xff0c;可以避免类型转换和重复编写类似的代码。 泛型的基本语法如下所示&#xff1a; class ClassName<…...

编程日记 2023/9/1 8:22:02

【力扣每日一题】2023.8.30 到家的最少跳跃次数

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一只跳蚤&#xff0c;我们可以操控它前跳 a 格或是后跳 b 格&#xff0c;不能跳到小于0的位置&#xff0c;有一些被禁止的点不…...

编程日记 2023/9/1 8:21:00

精读《算法题 - 地下城游戏》

今天我们看一道 leetcode hard 难度题目&#xff1a;地下城游戏。 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里&#xff0c;他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士…...

编程日记 2023/9/1 8:19:58

随记-Kibana Dev Tools，ES 增删改查 索引，Document

索引 创建索引 创建索引 PUT index_test创建索引 并 修改分片信息 # 创建索引 并 修改分片信息 PUT index_test2 { # 必须换行, PUT XXX 必须独占一行&#xff0c;类似的 其他请求也需要独占一行 "settings": {"number_of_shards": 1, # 主分片"…...

编程日记 2023/9/1 8:18:56

什么是架构，架构的本质是什么

不论是开发人员还是架构师&#xff0c;我们都一直在跟软件系统打交道&#xff0c;架构是在工作中出现最频繁的术语之一。那么&#xff0c;到底什么是架构&#xff1f;你可能有自己的答案&#xff0c;也有可能没有答案。对“架构”的理解需要我们不断在实践中思考、归纳、演绎&a…...

编程日记 2023/9/1 8:17:55

Python爬虫(十七)_糗事百科案例

糗事百科实例 爬取糗事百科段子&#xff0c;假设页面的URL是: http://www.qiushibaike.com/8hr/page/1 要求&#xff1a; 使用requests获取页面信息&#xff0c;用XPath/re做数据提取获取每个帖子里的用户头像连接、用户姓名、段子内容、点赞次数和评论次数保存到json文件内…...

编程日记 2023/9/1 8:16:54

Ae 效果：CC Threads

生成/CC Threads Generate/CC Threads CC Threads&#xff08;CC 编织条&#xff09;效果基于当前图层像素生成编织条图案和纹理。可以用在各种设计中&#xff0c;如背景设计、图形设计、文字设计等。 ◆ ◆ ◆ 效果属性说明 Width 宽度 设置编织的宽度。 默认值为 50。值越大…...

编程日记 2023/9/1 8:15:53

Kotlin 协程 - 多路复用 select()

一、概念 又叫选择表达式&#xff0c;是一个挂起函数&#xff0c;可以同时等待多个挂起结果&#xff0c;只取用最快恢复的那个值&#xff08;即多种方式获取数据&#xff0c;哪个更快返回结果就用哪个&#xff09;。 同时到达 select() 会优先选择先写子表达式&#xff0c;想随…...

编程日记 2023/9/1 8:14:51

学习笔记-ThreadLocal

ThreadLocal 什么是ThreadLocal&#xff1f; ThreadLocal 是线程本地变量类&#xff0c;在多线程并行执行过程中&#xff0c;将变量存储在ThreadLocal中&#xff0c;每个线程中都有独立的变量&#xff0c;因此不会出现线程安全问题。 应用举例 解决线程安全问题&#xff1a;例…...

编程日记 2023/9/1 8:13:49

python利用pandas统计分析—groupby()函数的使用

文章目录 一、groupby使用场景二、groupby基本原理三、groupby分组运算基础聚合操作&#xff1a;只能选择一种聚合操作agg 聚合操作&#xff1a;可以针对同列选择不同聚合方法transformapply 四、groupby分组后去重统计nunique()五、groupby分组后重命名列名rename()直接重新命…...

编程日记 2023/9/1 8:12:47

OPENCV实现ORB特征检测

# -*- coding:utf-8 -*- """ 作者：794919561 日期：2023/8/31 """ import cv2 import numpy as np# 读图像 img = cv2.imread(F:\\learnOpenCV\\openCVLearning\\pictures\\chess.jpg)...

编程日记 2023/9/1 8:11:45

W5100S-EVB-PICO主动PING主机IP检测连通性（十）

前言 上一章节我们用我们开发板在UDP组播模式下进行数据回环测试&#xff0c;本章我们用开发板去主动ping主机IP地址来检测与该主机之间网络的连通性。 什么是PING&#xff1f; PING是一种命令&#xff0c; 是用来探测主机到主机之间是否可通信&#xff0c;如果不能ping到某台…...

编程日记 2023/9/1 8:10:44

使用 Nginx 搭建文件下载服务器

文章目录 一、基础环境二、适用场景三、方法和步骤四、其他说明 版权声明&#xff1a;本文为CSDN博主「杨群」的原创文章&#xff0c;遵循 CC 4.0 BY-SA版权协议&#xff0c;于2023年8月27日首发于CSDN&#xff0c;转载请附上原文出处链接及本声明。 原文链接&#xff1a;http…...

编程日记 2023/9/1 8:09:42

链式栈StackT

C关键词&#xff1a;内部类/模板类/头插 C自学精简教程 目录(必读) C数据结构与算法实现&#xff08;目录&#xff09; 栈的内存结构 空栈&#xff1a; 有一个元素的栈&#xff1a; 多个元素的栈&#xff1a; 成员函数说明 0 clear 清空栈 clear 函数负责将栈的对内存释放…...

编程日记 2023/9/1 8:08:41

Fiddler中 AutoResponder 使用

Fiddler的 AutoResponder &#xff0c;即URL重定向功能非常强大。不管我们做URL重定向&#xff0c;还是做mock测试等&#xff0c;都可以通过该功能进行实践。 下面&#xff0c;小酋就来具体讲下该功能的用法。 Enable rules 启用规则Unmatched requests passthrough 没有匹配…...

编程日记 2023/9/1 8:07:39

77GHz线性调频连续波雷达

文章目录 前言 一、背景 二、优缺点 三、工作原理 四、电路模块设计 4.1.LFMCW信号源 4.2.发射电路 4.3.接收电路 4.4.信号处理器 五、应用 5.1.汽车测距 5.2.军事方面 5.3.气象方面 总结 前言 这篇文章是博主本科期间整理的关于77GHz线性调频连续波雷达的相关资料&#xff0c;…...

编程日记 2023/9/1 8:06:38

YOLOV8改进：更换为MPDIOU,实现有效涨点

1.该文章属于YOLOV5/YOLOV7/YOLOV8改进专栏，包含大量的改进方式，主要以2023年的最新文章和2022年的文章提出改进方式。 2.提供更加详细的改进方法，如将注意力机制添加到网络的不同位置，便于做实验，也可以当做论文的创新点。 2.涨点效果：更换为MPDIOU,实现有效涨点！ 目录…...

编程日记 2023/9/1 8:05:37

BookStack开源免费知识库docker-compose部署

BookStack&#xff08;书栈&#xff09;是一个功能强大且易于使用的开源知识管理平台&#xff0c;适用于个人、团队或企业的文档协作和知识共享。 一、BookStack特点 简单易用&#xff1a;BookStack提供了一个直观的用户界面&#xff0c;使用户能够轻松创建、编辑和组织文档多…...

编程日记 2023/9/1 8:04:36

Linux：编译遇到 Please port gnulib freadahead.c to your platform ，怎么破

问题背景 编译m4时遇到以下错误&#xff0c;该怎么解决呢&#xff1f; 解决方法 进入m4的build目录&#xff1a;build/host-m4-1.4.17 输入命令&#xff1a; sed -i s/IO_ftrylockfile/IO_EOF_SEEN/ lib/*.c echo "#define _IO_IN_BACKUP 0x100" >> lib/std…...

编程日记 2023/9/1 8:03:31

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/7/8 1:38:37

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/7/7 7:20:27

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/6/21 6:34:03

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/7/5 5:14:22

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/7/8 17:57:05

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/7/7 13:44:32

跨平台商品数据接口的标准化与规范化发展路径：淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

编程新知 2025/7/5 15:42:25

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

编程新知 2025/7/4 5:43:04

数据分析六部曲？

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...

编程新知 2025/7/7 1:14:55