React中常用的hook函数(三)——useReducer和useContext

React中常用的hook函数(一)——useState和useEffect_usestate useeffect-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/Mrs_Lupin/article/details/142905749?sharetype=blogdetail&sharerId=142905749&sharerefer=PC&sharesource=Mrs_Lupin&spm=1011.2480.3001.8118React中常用的hook函数(二)——useMemo和useCallback-CSDN博客icon-default.png?t=O83Ahttps://blog.csdn.net/Mrs_Lupin/article/details/143424548?sharetype=blogdetail&sharerId=143424548&sharerefer=PC&sharesource=Mrs_Lupin&spm=1011.2480.3001.8118

一、useReducer

1.作用:

用于管理组件状态,尤其在状态逻辑较复杂或者状态依赖于之前状态时特别有用。它通常用于代替 useState

2.语法:

useReducer函数

useReducer 接受三个参数:

  1. reducer 函数:用于定义状态如何随着动作(action)变化的纯函数。
  2. 初始状态:用于设置状态的初始值。
  3. 可选的初始化函数:如果你的初始状态需要计算,可以传入这个函数。

返回值是一个数组,包含当前状态和一个 dispatch 函数,用于发送动作以更新状态。

reducer 函数

reducer 函数接受两个参数:

  1. 当前状态(state)
  2. 动作(action)

它必须返回一个新的状态对象。

3.基础用法:

(1)定义一个reducer函数(根据不同的action返回不同的新状态)

function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return { count: state.count };}
}

(2)在组件中调用useReducer,并传入reducer函数和状态的初始值

const initialState = { count: 0 };
function Counter() {const [state, dispatch] = useReducer(reducer, initialState);...
}

(3)事件发生时,通过dispatch函数分派一个action对象(通知reducer要返回哪个新状态并渲染UI)

function Counter() {...dispatch({ type: 'increment' })
}

 (4)分派action时传参

使用示例

下面是一个使用 useReducer 的简单计数器示例:

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 };case 'update':return { count: action.payload };default:return { count: state.count };}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button><button onClick={() => dispatch({ type: 'update', payload: 100 })}>to 100</button></>);
}export default Counter;

4.为什么要使用useReducer

  • 状态逻辑复杂:当状态逻辑涉及多个子值或者状态依赖于之前的状态时,使用useReducer可以更好地组织代码。useState适用于管理简单状态,如布尔值、数字、字符串等,或者只有几个状态值需要管理。
  • 可读性:使用 reducer 函数可以使状态更新的逻辑更加集中,便于理解和维护。
  • 调试:可以更容易地跟踪状态变化,特别是在大型应用中。

二、useContext

1.作用

在函数组件中访问 React 上下文(Context),可以在组件树中跨层级传递数据(通信)

2.实现步骤

(1)使用 createContext方法创建一个上下文对象Ctx

import { createContext, useContext } from "react"// 1. createContext方法创建一个上下文对象const MsgContext = createContext()

(2)在顶层组件(App)中通过 Ctx.Provider 组件提供数据

function App () {const msg = 'this is app msg'return (<div>{/* 2. 在顶层组件 通过Provider组件提供数据 */}<MsgContext.Provider value={msg}>this is App<A /></MsgContext.Provider></div>)
}

(3)在底层组件(B)中通过 useContext 钩子函数获取消费数据

function B () {// 3. 在底层组件 通过useContext钩子函数使用数据const msg = useContext(MsgContext)return (<div>this is B compnent,{msg}</div>)
}

示例代码

// App -> A -> Bimport { createContext, useContext } from "react"// 1. createContext方法创建一个上下文对象const MsgContext = createContext()function A () {return (<div>this is A component<B /></div>)
}function B () {// 3. 在底层组件 通过useContext钩子函数使用数据const msg = useContext(MsgContext)return (<div>this is B compnent,{msg}</div>)
}function App () {const msg = 'this is app msg'return (<div>{/* 2. 在顶层组件 通过Provider组件提供数据 */}<MsgContext.Provider value={msg}>this is App<A /></MsgContext.Provider></div>)
}export default App

3. 多重上下文

如果需要使用多个上下文,可以多次调用 useContext

import React, { createContext, useContext, useState } from 'react';// 创建主题上下文
const ThemeContext = createContext();
// 创建用户上下文
const UserContext = createContext();const App = () => {const [theme, setTheme] = useState('light');const [user, setUser] = useState({ name: 'John Doe' });return (<ThemeContext.Provider value={{ theme, setTheme }}><UserContext.Provider value={{ user, setUser }}><UserProfile /></UserContext.Provider></ThemeContext.Provider>);
};const UserProfile = () => {//在底层组件中获取数据const { theme, setTheme } = useContext(ThemeContext);const { user } = useContext(UserContext);return (<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}><h1>{user.name}</h1><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button></div>);
};

4. 注意事项

  • 性能考虑:当 Provider 的 value 改变时,所有使用该上下文的组件会重新渲染,因此可以通过缓存(如 useMemo)来优化性能。
  • 作用域:上下文的值是从最近的 Provider 组件中获取的,所以要确保 Provider 包裹住需要使用该上下文的组件。

5.结合useReducer

useReducer 也常与 useContext 结合使用,以便在组件树中共享状态:

使用步骤

(1)使用 useReducer 管理状态

useReducer 是一个 React Hook,适用于管理复杂的状态逻辑。它接收一个 reducer 函数和初始状态,并返回当前状态和一个 dispatch 函数。

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();}
}
(2)创建上下文

通过 createContext 创建一个上下文,来共享状态和 dispatch 函数。

const StateContext = React.createContext();
(3)创建提供者组件

定义一个提供者组件,将状态和 dispatch 通过上下文传递给子组件。

function StateProvider({ children }) {const [state, dispatch] = useReducer(reducer, initialState);return (<StateContext.Provider value={{ state, dispatch }}>{children}</StateContext.Provider>);
}
(4)在子组件中使用上下文

在需要访问状态和 dispatch 的子组件中,使用 useContext 来获取这些值。

const ChildComponent = () => {const { state, dispatch } = useContext(StateContext);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
};
(5)组合使用

在应用的根组件中,将 StateProvider 包裹在需要访问状态的组件树上。

const App = () => (<StateProvider><ChildComponent /></StateProvider>
);

通过这种方式,任何嵌套在 StateProvider 内的组件都可以访问和更新共享状态,使状态管理更加集中和高效。

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

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

相关文章

Android问题 -- DJ多多的下载文件在哪里? DJ多多dat格式转换为mp3

目的 想要将安卓 DJ多多 应用所下载的歌曲文件转换为 mp3 格式, 以便于传输到手表上进行播放 (健身跑步用) 但是找不到在安卓手机中DJ多多的下载的文件路径 文件路径 使用 ES文件浏览器 查看, 自带文件管理器一般查不到 文件路径: 内部存储/Android/data/com.shoujiduoduo.…

使用 Elastic、OpenLLMetry 和 OpenTelemetry 跟踪 LangChain 应用程序

作者&#xff1a;来自 Elastic Bahubali Shetti Langchain 应用程序的使用正在增长。构建基于 RAG 的应用程序、简单的 AI 助手等的能力正在成为常态。观察这些应用程序更加困难。考虑到现有的各种选项&#xff0c;本博客展示了如何将 OpenTelemetry 检测与 OpenLLMetry 结合使…

如何使用Web-Check和cpolar实现安全的远程网站监测与管理

文章目录 前言1.关于Web-Check2.功能特点3.安装Docker4.创建并启动Web-Check容器5.本地访问测试6.公网远程访问本地Web-Check7.内网穿透工具安装8.创建远程连接公网地址9.使用固定公网地址远程访问 前言 本期给大家分享一个网站检测工具Web-Check&#xff0c;能帮你全面了解网…

LabVIEW适合开发的软件

LabVIEW作为一种图形化编程环境&#xff0c;主要用于测试、测量和控制系统的开发。以下是LabVIEW在不同应用场景中的适用性和优势。 一、测试与测量系统 LabVIEW在测试与测量系统中的应用广泛&#xff0c;是工程测试领域的主流工具之一。利用其强大的数据采集与处理功能&…

面试题:JVM(四)

new对象流程&#xff1f;&#xff08;龙湖地产&#xff09; 对象创建方法&#xff0c;对象的内存分配。&#xff08;360安全&#xff09; 1. 对象实例化 创建对象的方式有几种&#xff1f; 创建对象的步骤 指针碰撞&#xff1a;以指针为分界线&#xff0c;一边是已连续使用的…

ERP研究 | 颜值美和道德美,哪个更重要?

摘要 道德美和颜值美都会影响我们的评价。在这里&#xff0c;本研究采用事件相关电位(ERPs)技术探讨了道德美和颜值美如何交互影响社会判断和情感反应。参与者(均为女性)将积极、中性或消极的言语信息与高吸引力或低吸引力面孔进行关联&#xff0c;并对这些面孔进行评分&#…

CSS中常见的两列布局、三列布局、百分比和多行多列布局!

目录 一、两列布局 1、前言&#xff1a; 2. 两列布局的常见用法 两列布局的元素示例&#xff1a; 代码运行后如下&#xff1a; 二、三列布局 1.前言 2. 三列布局的常见用法 三列布局的元素示例&#xff1a; 代码运行后如下&#xff1a; 三、多行多列 1.前言 2&…

Vue3版本的uniapp项目运行至鸿蒙系统

新建Vue3版本的uniapp项目 注意&#xff0c;先将HbuilderX升级至最新版本&#xff0c;这样才支持鸿蒙系统的调试与运行&#xff1b; 按照如下图片点击&#xff0c;快速升级皆可。 通过HbuilderX创建 官方文档指导链接 点击HbuilderX中左上角文件->新建->项目 创建vue3…

Nature文章《deep learning》文章翻译

这篇文章是对Nature上《deep learning》文章的翻译。原作者 Yann LeCun, Yoshua Bengio& Geoffrey Hinton。 这篇文章的中心思想是深入探讨深度学习在机器学习中的革命性贡献&#xff0c;重点介绍其在特征学习、监督学习、无监督学习等方面的突破&#xff0c;并阐述其在图…

AnaTraf | 全流量回溯分析:网络故障排除的 “时光回溯机”

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具AnaTraf网络流量分析仪是一款基于全流量&#xff0c;能够实时监控网络流量和历史流量回溯分析的网络性能监控与诊断系统&#xff08;NPMD&#xff09;。通过对网络各个关键节点的监测&#xff0c;收集网络性能…

Zabbix低权限SQL注入至RCE+权限绕过

Zabbix低权限SQL注入至RCE权限绕过&#xff0c;可惜没找到关于传webshell的好方法&#xff0c;如有大神告知&#xff0c;感激万分&#xff01; 本文中所有代码以及后续更新都会放在我的github仓库中&#xff1a; https://github.com/W01fh4cker/CVE-2024-22120-RCE 一、漏洞环…

[vulnhub]DC: 1

https://www.vulnhub.com/entry/dc-1,292/ 主机发现端口扫描 使用nmap扫描网段类存活主机 因为靶机是我最后添加的&#xff0c;所以靶机IP是156 nmap -sP 192.168.75.0/24 // Starting Nmap 7.93 ( https://nmap.org ) at 2024-09-28 12:48 CST Nmap scan rep…

jmeter脚本-请求体设置变量and请求体太长的处理

目录 1、查询接口 1.1 准备组织列表的TXT文件&#xff0c;如下&#xff1a; 1.2 添加 CSV数据文件设置 &#xff0c;如下&#xff1a; 1.3 接口请求体设置变量&#xff0c;如下&#xff1a; 2、创建接口 2.1 见1.1 2.2 见1.2 2.3 准备创建接口的请求体TXT文件&#xff…

SQL,力扣题目1549,每件商品的最新订单【窗口函数】

一、力扣链接 LeetCode_1549 二、题目描述 表: Customers ------------------------ | Column Name | Type | ------------------------ | customer_id | int | | name | varchar | ------------------------ customer_id 是该表主键. 该表包含消费者的…

卸载 Adobe Genuine Software Client

一、问题描述 使用破jie版Adobe Acrobat Pro DC软件后&#xff0c;会经常弹出以下窗口&#xff1a; 且上述探窗无法直接关掉。即使通过任务管理器将其临时关掉&#xff0c;可等过一段时间后&#xff0c;仍然会再次弹出&#xff0c;严重干扰工作进度。 二、问题解决 &#xff…

京东云雅典娜刷机步骤(需要拆机)

京东云雅典娜刷机步骤 必须拆机 必须拆机 必须拆机 刷机要用的文件 1.高通驱动文件&#xff08;USB刷机必备&#xff09;&#xff1a;https://pan.quark.cn/s/6405674f981b 2.进入临时uboot的程序&#xff1a;https://pan.quark.cn/s/ebc1d449cb89 3.uboot固件&#xff1a; ht…

电子商城购物平台的设计与开发+ssm(lw+演示+源码+运行)

摘 要 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;电子商城购物平台小程序被用户普遍使用&#xff0c;为方便…

基于 Spring Boot 和 Vue 的门票销售创新系统

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…

【Python】Python自习课:第一个python程序

【Python】Python自习课&#xff1a;第一个python程序 示例

docker-compose安装rabbitmq 并开启延迟队列和管理面板插件(rabbitmq_delayed_message_exchange)

问题&#xff1a; 解决rabbitmq-plugins enable rabbitmq_delayed_message_exchange &#xff1a;plugins_not_found 我是在docker-compose环境部署的 services:rabbitmq:image: rabbitmq:4.0-managementrestart: alwayscontainer_name: rabbitmqports:- 5672:5672- 15672:156…