react hooks--useReducer

概述

很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是

useReducer仅仅是useState的一种替代方案:

  •  在某些场景下,如果state的处理逻辑比较复杂,我们可以通过useReducer来对其进行拆分;
  •  或者这次修改的state需要依赖之前的state时,也可以使用;

基本用法

useReducer仅仅是useState的一种替代方案:

 在某些场景下,如果state的处理逻辑比较复杂,我们可以通过useReducer来对其进行拆分;

 或者这次修改的state需要依赖之前的state时,也可以使用

数据是不会共享的,它们只是使用了相同的counterReducer的函数而已。

所以,useReducer只是useState的一种替代品,并不能替代Redux

useReducer 接受一个 reducer 函数作为参数,reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath,count 是返回状态中的值,而 dispatch 是一个可以发布事件来更新 state 的

语法:

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

state:组件内部的数据,更改后也会引起组件的渲染

dispatch:和redux中dispatch功能是类似的,也是需要派发一个action通知reducer更新数据。

特别说明:

useState的替代方案接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法

在某些场景下,useReducer 会比 useState 更适用,例如 state 逻辑较复杂且包含多个子值,或者下一个 state 依赖于之前的 state 等。并且,使用 useReducer 还能给那些会触发深更新的组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数

useReducer相当于一个简化版的redux。

演示示例

App.js

import React from 'react'
import UseFun from './components/UseFun'
import CountFun from './components/CountFun'
import UseReducer from './components/UseReducer'export default function App() {let msg = '132'return (<div><UseReducer /></div>)
}

components/UseReducer.jsx

import React from 'react'
import { useReducer } from 'react';const intiState = {count: 0
}const reducer = (state, action) => {switch(action.type) {case 'add':state.count += action.payload.numreturn {...state,count: state.count}case 'reduce':state.count -= action.payload.num;return JSON.parse(JSON.stringify(state))default: return state;}
}export default function UseReducer(props) {const [state, dispatch] = useReducer(reducer, intiState)// 增加const addCount = () => {dispatch({type: 'add',payload: {num: 10}})}// 减少const reduceCount = () => {dispatch({type: 'reduce',payload: {num: 2}})}return (<div><p>{state.count}</p><button onClick={addCount}>增加count</button><button onClick={reduceCount}>减少count</button></div>)
}

如果发现操作reducer数据时,计算了两次,那么你需要考虑将数据深拷贝出来进行单独操作,不要对state中的数据进行修改。

总结

const [state, dispatch] = useReducer(reducer, initialArg, init); useState 的替代方案,它接收一个 (state, action) => newState 的 reducer 处理函数,并返回当前的 state 和 配套 的 dispatch 方法。使用方法与 redux 非常相似。 某些场景下,useReducer 比 useState 更加适用: 当状态变量比较复杂且包含多个子值的时候 下一个 state 依赖之前的 state

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

gma 2.0.13 (2024.09.16) 更新日志

安装 gma 2.0.13 pip install gma2.0.13网盘下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1P0nmZUPMJaPEmYgixoL2QQ?pwd1pc8 提取码&#xff1a;1pc8 注意&#xff1a;此版本没有Linux版&#xff01; 编译gma的Linux虚拟机没有时间修复&#xff0c;本期Linux版…

Angular17+leaflet集成天地图组件

Angular17leaflet集成天地图组件 例图 需要的包 "asymmetrik/ngx-leaflet": "^17.0.0","types/leaflet": "^1.9.12","leaflet": "^1.9.4",去天地图网站获取一个token https://www.tianditu.gov.cn/ 创建Angul…

8、创建一般资产负债科目

定义解释 在前台创建资产负债类科目。定义资产负债类会计科目。 在 SAP 中,会计科目的定义分为两层&#xff1a;科目表层和公司代码层。 比如&#xff1a;一个集团企业可以定义一套会计科目表&#xff0c;但是下面的每个公司代码&#xff0c;从中选择哪些科目&#xff0c;这…

透明LED模块的应用场景

随着科技的不断进步和市场需求的增长&#xff0c;透明LED显示屏的应用越来越广泛&#xff0c;成为了众多领域中的创新亮点。透明LED模块凭借其高通透率、轻薄设计以及与环境的完美融合&#xff0c;正逐步替代传统显示方式&#xff0c;为现代化的展示和广告提供了全新的解决方案…

PicoQuant公司:探索铜铟镓硒(CIGS)太阳能电池技术,引领绿色能源革新

铜铟镓硒&#xff08;‌CIGS&#xff09;‌薄膜太阳能电池具有生产成本低、污染小、不衰退、弱光性能好等显著特点&#xff0c;光电转换效率居各种薄膜太阳电池之首&#xff0c;接近于晶体硅太阳电池&#xff0c;而成本只是它的三分之一&#xff0c;被称为下一代非常有前途的新…

window批处理脚本:将本地的三个文件通过SCP传输到Linux设备上

文件名send_file.bat&#xff1a; echo off setlocal:: 提示用户输入远程IP地址 set /p remoteIpAddressplease input IP::: 定义本地文件名 set "localFile1111" set "localFile2222" set "localFile3333":: 获取本地文件的完整路径 set "…

项目与产品的生命周期

在项目管理领域有两个关键概念&#xff0c;即项目生命周期和产品生命周期。它们是理解项目管理过程中的关键要素。 项目生命周期是一个项目从概念到完成所经过的所有阶段。所有项目都可分成若干阶段&#xff0c;且所有项目无论大小&#xff0c;都有一个类似的生命周期结构。阶…

学习大数据DAY59 全量抽取和增量抽取实战

目录 需求流程&#xff1a; 需求分析与规范 作业 作业2 需求流程&#xff1a; 全量抽取 增量抽取 - DataX Kettle Sqoop ... 场景: 业务部门同事或者甲方的工作人员给我们的部门经理和你提出了新的需 求 流程: 联系 > 开会讨论 > 确认需求 > 落地 需求文档( 具体…

day-56 整数转罗马数字

思路 因为题目已经告知num<3999&#xff0c;所以只需依次对1000,900,500,400,100,90,50,40,10,9,5,4,1这些数进行除法&#xff0c;判断商是否大于等于1&#xff0c;如果大于等于1则将对应的罗马数字拼接到字符串中即可 解题过程 为了方便拼接&#xff0c;可以使用哈希键值对…

关于用matplotlib.pyplot加载图片颜色不对的解决方法

1.原理&#xff1a;用opencv加载的图片是BGR存储的。而用matplotlib.pyplot 需要RGB的格式,故在加载之前使用下面的语句改成RGB格式。 img2 cv2.cvtColor(img, cv2.COLOR_BGR2RGB) # 或使用 # img2 img[:, :, ::-1]#将图像img的颜色通道进行反转。 ::-1 表示在最后一个维度…

【吊打面试官系列-MySQL面试题】LIKE 声明中的%和_是什么意思?

大家好&#xff0c;我是锋哥。今天分享关于【LIKE 声明中的&#xff05;和_是什么意思&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; LIKE 声明中的&#xff05;和_是什么意思&#xff1f; &#xff05;对应于 0 个或更多字符&#xff0c;_只是 LIKE 语句中的…

图纸管理系统到底是什么?适合哪些企业去部署?

图纸管理系统作为现代企业数字化转型的基石&#xff0c;正逐步成为各行各业不可或缺的重要工具。它不仅革新了传统图纸的存储与管理方式&#xff0c;更通过集成化、智能化的功能&#xff0c;为企业带来了前所未有的工作效率与数据安全保障。无论是建筑设计、制造业还是航空航天…

Prometheus架构详解

1 Prometheus简介 Prometheus 是一个开源的系统监控报警工具套件&#xff0c;它最初由SoundCloud开发&#xff0c;并于2016年成为CNCF&#xff08;云原生计算基金会&#xff09;托管的第二个项目&#xff08;第一个是kubernetes&#xff09;。Prometheus 以其简单高效的方式收…

华为云服务综合实验

一、实验需求 本次实验内容基于华为云平台模拟企业web集群的构建&#xff0c;其中涉及的知识点包括Linux系统知识、nginx服务的安装及配置应用、云数据库 RDS(Relational Database Service,简称RDS)、虚拟私有云vpc、安全组、SFS弹性文件服务器以及负载均衡等。要求学生通过本…

基于SSM的“大学生兼职平台”的设计与实现(源码+数据库+文档+开题报告)

基于SSM的“大学生兼职平台”的设计与实现&#xff08;源码数据库文档开题报告) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统结构图 兼职平台首页 企业信息 用户注册界面 在线留…

光伏场地建设规划 - 华为OD统一考试(E卷)

2024华为OD机试&#xff08;C卷D卷E卷&#xff09;最新题库【超值优惠】Java/Python/C合集 题目描述 祖国西北部有一片大片荒地&#xff0c;其中零星的分布着一些湖泊&#xff0c;保护区&#xff0c;矿区;整体上常年光照良好&#xff0c;但是也有一些地区光照不太好。某电力公…

Android中SharedPreferences 的基本使用

1.SharedPreferences简介 SharedPreferences 是 Android 平台为应用开发者提供的一个轻量级的存储辅助类&#xff0c;用来保存应用的一些常用配置&#xff0c;它提供了 putString()、putString(Set<String>)、putInt()、putLong()、putFloat()、putBoolean() 六种数据类…

uniapp+renderJS+google map开发安卓版APP非小程序

背景需求 需要在uniapp中接入google地图,研究了一番,都没有找到合适的,现在说一下教程。 效果图 前期工作 这两点缺一不可,否则你啥也看不到。 1、电脑安装L-O-U梯 用于访问G-OO-G-LE的API或者创建google map key。 2、手机安装L-O-U梯 用于显示google地图。我就是手…

二叉树(下)

目录 判断树是否相同 判断树是不是另一棵树的子树 二叉树翻转 判断平衡二叉树 二叉树层序遍历 这篇主要提供一些关于二叉树例题的讲解&#xff0c;如果对二叉树及其基本操作有疑问的可以转至&#xff1a; 二叉树&#xff08;上&#xff09;-CSDN博客二叉树&#xff08;中&…

苹果手机删除的视频怎么恢复?记住这3个秘诀

我们的手机相册中保存着大量珍贵的视频&#xff0c;这些视频记录着日常生活的美好时刻。但是&#xff0c;如果不小心删除了怎么办呢&#xff1f;别担心&#xff0c;今天我们将揭示3个解决手机删除的视频怎么恢复问题的秘诀&#xff0c;下面&#xff0c;跟着小编的步伐&#xff…