react hooks--useReducer

embedded/2024/9/24 15:29:35/

概述

很多人看到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.ppmy.cn/embedded/116142.html

相关文章

SSL 最长签发时间是多久?

在当今数字化的时代&#xff0c;网络安全变得至关重要。为了确保数据在网络传输中的安全性&#xff0c;SSL&#xff08;Secure Sockets Layer&#xff0c;安全套接层&#xff09;证书被广泛应用。那么&#xff0c;SSL最长签发时间是多久呢&#xff1f; SSL证书是一种数字证书&…

华为HarmonyOS灵活高效的消息推送服务(Push Kit) -- 7 推送卡片刷新消息

场景介绍 如今衣食住行娱乐影音应用占据了大多数人的手机&#xff0c;一部手机可以满足日常大多需求&#xff0c;但对需要经常查看或进行简单操作的应用来说&#xff0c;总需要用户点开应用体验较繁琐。针对此种场景&#xff0c;HarmonyOS提供了Form Kit&#xff08;卡片开发服…

工业交换机故障快速排查的方法有哪些

在现代工业自动化的环境中&#xff0c;工业交换机作为网络连接的重要设备&#xff0c;其稳定性和可靠性至关重要。然而&#xff0c;实际使用过程中难免会遇到各种故障&#xff0c;这对生产线和系统的正常运作造成了影响。为了有效应对这些问题&#xff0c;下面将介绍一些工业交…

深度学习速通系列:在进行大模型微调时,如何确定最佳的学习率和批次大小?

在进行大模型微调时&#xff0c;确定最佳的学习率和批次大小&#xff08;batch size&#xff09;通常需要考虑以下几个方面&#xff1a; 数据集的大小和特性&#xff1a;数据集的大小直接影响批次大小的选择。较大的数据集可能允许使用较大的批次大小&#xff0c;而较小的数据集…

麒麟银河桌面版,成功安装cuda12.6,mysql

一、 要卸载并禁用 nouveau 驱动程序&#xff0c;可以按照以下步骤进行&#xff1a; 1. 确认 nouveau 驱动的当前状态&#xff1a; 首先&#xff0c;你可以使用以下命令查看 nouveau 驱动是否正在运行&#xff1a; lsmod | grep nouveau如果有输出&#xff0c;说明 nouveau …

【Text2SQL】PET-SQL:在Spider基准测试中取得了SOTA

解读&#xff1a;PET-SQL: A Prompt-enhanced Two-stage Text-to-SQL Framework with Cross-consistency 这篇论文介绍了一个名为 PET-SQL 的文本到 SQL&#xff08;Text-to-SQL&#xff09;框架&#xff0c;旨在通过增强提示&#xff08;prompt&#xff09;和利用不同大型语言…

第一篇-基础-第四章-配置SpringBoot项目

4.1-SpringBoot项目的配置文件 项目默认的配置文件为/src/main/resources/application.properties 涉及系统核心配置信息都可保存在此文件中,比如端口号,mysql相关信息,第三方相关信息等。 4.1.1 配置文件的格式 1,properties格式 典型的键值对文本形式,kv,如果存在层级,a…

基于VUE的教师教学质量网络评测评价统计分析系统

1、 选题的背景与意义 21世纪是信息化的世纪&#xff0c;我们的一些生活习惯因为计算机而发生改变&#xff0c;我们也逐渐习惯于通过计算机的各项功能来获得便利。这其中所带来的挑战和机遇为各行业的发展指明了一个方向。教学质量评测是一项琐碎而又十分细致的工作&#xf…