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

React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo


文章目录

  • 项目地址
  • 十六、useContecxt
  • 十七、useReducer
  • 十八、React.memo以及产生的问题
    • 18.1组件嵌套的渲染规律
    • 18.2 React.memo
    • 18.3 引出问题
  • 十九、useCallback和useMemo
    • 19.1 useCallback对函数进行缓存
    • 19.2 useMemo
      • 19.2.1 基本的使用
      • 19.2.2 缓存属性数据
    • 19.2.3 对于更新的理解
  • 二十、useRef记忆功能
    • 20.1 与useState的区别


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:
dbt 
airflow

十六、useContecxt

让子组件,子孙组件,不用通过props一层一层传递,可以直接取值,类似于定义一个全局变量,子孙组件都可以直接使用这个全局变量,而不是一层一层获取

  1. 创建context,给子组件传值
    在这里插入图片描述
  2. 使用context里的数据

在这里插入图片描述

十七、useReducer

  1. 设置一个函数,用来管理所有状态的操作,其中state表示操作之前的值,action = {type:具体操作的名称, payload:表示操作附带的值},最后操作结束后return的值去覆盖之前的state的值
    在这里插入图片描述

  2. 使用useReducer,第一个参数就是操作状态的函数,参数二,就是初始值,用来被参数一操作的值

在这里插入图片描述
注意:这里的state是个数值,所以它可以直接进行加减,但是如果state是对象或者数组,需要解构,使用的时候也是以对象的形式

十八、React.memo以及产生的问题

18.1组件嵌套的渲染规律

  1. 当父组件重新渲染,子组件默认情况下,跟着父组件一起重新渲染;
  2. 如果子组件重新渲染,父组件是不会重新渲染的;

18.2 React.memo

  • 为了解决上面父组件重新渲染,导致子组件也跟着一起渲染的资源浪费问题, 我们使用React.memo,对子组件进行缓存,只有当子组件发生了变化后,才会一起渲染,子组件 重新缓存的情况:
    1. props属性发生了改变;
    1. state组件的状态发生改变
    1. unseContext的值发生了改变
  1. 使用memo将子组件包裹起来

在这里插入图片描述
2. 但是,下面这种情况,由于父组件给子组件传递了props,子组件虽然设置了memo,但是还是会重新渲染,原因是因为每次父组件重新渲染后,里面传值的内存地址发生了变化,虽然值没变,但是对于子组件来说 发生了变化
在这里插入图片描述

18.3 引出问题

上面的数组和function为了保持不变,不让子组件重新渲染,需要使用useMemo和useCallback来防止子组件重新渲染

十九、useCallback和useMemo

19.1 useCallback对函数进行缓存

使用useCallback对函数进行缓存,其中参数1,是函数体,参数2是 依赖项,就是被观察是否变化的项,根据变化与否,改变来判断是否重新渲染

在这里插入图片描述

19.2 useMemo

19.2.1 基本的使用

  1. 假如以下代码,当x或y发生了变化的时候,下面的繁重计算也会发生重新渲染,重新计算,是非常消耗内存的
    在这里插入图片描述
  2. 为了解决这一问题,我们需要设计的程序是,只有计算条件发生变化的时候,才对计算部分进行重新渲染,使用useMemo解决这一问题,也是需要依赖项

在这里插入图片描述

19.2.2 缓存属性数据

  • 解决18里面的arr= [1,2,3]属性,没发生变化,但是传入子组件用的时候,会 导致子组件重新渲染
const arr = useMemo(()=>[1,2,3],[])

19.2.3 对于更新的理解

只要有方法把不变的状态记住,那么在父组件渲染的时候,子组件就不会重新渲染

  • useState
    在这里插入图片描述
  • useRef:这里使用useRef更合适,因为不需要渲染
  • 在这里插入图片描述

二十、useRef记忆功能

只用于记忆,不用于渲染

20.1 与useState的区别

  1. useState是,更改+渲染
  2. useRef 只更改不渲染

相关文章:

React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo

文章目录 项目地址十六、useContecxt十七、useReducer十八、React.memo以及产生的问题18.1组件嵌套的渲染规律18.2 React.memo18.3 引出问题 十九、useCallback和useMemo19.1 useCallback对函数进行缓存19.2 useMemo19.2.1 基本的使用19.2.2 缓存属性数据 19.2.3 对于更新的理解…...

ISUP协议视频平台EasyCVR萤石设备视频接入平台银行营业网点安全防范系统解决方案

在金融行业,银行营业厅的安全保卫工作至关重要,它不仅关系到客户资金的安全,也关系到整个银行的信誉和运营效率。随着科技的发展,传统的安全防护措施已经无法满足现代银行对于高效、智能化安全管理的需求。 EasyCVR视频汇聚平台以…...

Ubuntu20.04下安装向日葵

向日葵远程控制app官方下载 - 贝锐向日葵官网 下载Ununtu版的图形版本的安装deb包SunloginClient_15.2.0.63064_amd64.deb 直接执行 sudo dpkg -i SunloginClient_15.2.0.63064_amd64.deb 的话会报错: 如果在Ubuntu20.04里直接执行sudo apt install libgconf-2-4安装libgco…...

sql工具!好用!爱用!

SQLynx的界面设计简洁明了,操作逻辑清晰易懂,没有复杂的图标和按钮,想对哪部分操作就在哪里点击右键,即使你是数据库小白也能轻松上手。 尽管SQLynx是一款免费的工具,但是它的功能却丝毫不逊色于其他付费产品&#xff…...

Pytest-Bdd-Playwright 系列教程(13):钩子(hooks)

Pytest-Bdd-Playwright 系列教程(13):钩子(hooks) 前言一、什么是钩子?二、Pytest-Bdd 提供的钩子一览三、钩子用法详解1. pytest_bdd_before_scenario2. pytest_bdd_after_scenario3. pytest_bdd_before_s…...

【React 进阶】掌握 React18 全部 Hooks

一、数据更新驱动 1. useState 1. 基础介绍 useState主要用于声明和操作状态变量,可以使函数组件像类组件一样拥有state const [state, setState] useState(initialState);state:状态,作为渲染视图的数据源 setState:改变st…...

泥石流灾害风险评估与模拟丨AI与R语言、ArcGIS、HECRAS融合,提升泥石流灾害风险预测的精度和准确性

目录 第一章 理论基础 第二章 泥石流风险评估工具 第三章 数据准备与因子提取 第四章 泥石流灾害评价 第五章 HECRAS软件的应用 第六章 操作注意事项与模型优化 泥石流灾害的频发与严重后果,已成为全球范围内防灾减灾工作的重大挑战。随着科技的不断进步&…...

用js实现点击抽奖

用原生的JS来完成的一个小游戏&#xff0c;进行了简单的点击触发以及判断 css&#xff1a; <style>* {margin: 0;padding: 0;}body {background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {backg…...

JVM-类文件结构

类文件结构 JVM 的“无关性” 谈论 JVM 的无关性&#xff0c;主要有以下两个&#xff1a; 平台无关性&#xff1a;任何操作系统都能运行 Java 代码 语言无关性&#xff1a; JVM 能运行除 Java 以外的其他代码 Java 源代码首先需要使用 Javac 编译器编译成 .class 文件&#xff…...

丹摩征文活动|实现Llama3.1大模型的本地部署

文章目录 1.前言2.丹摩的配置3.Llama3.1的本地配置4. 最终界面 丹摩 1.前言 Llama3.1是Meta 公司发布的最新开源大型语言模型&#xff0c;相较于之前的版本&#xff0c;它在规模和功能上实现了显著提升&#xff0c;尤其是最大的 4050亿参数版本&#xff0c;成为开源社区中非常…...

深入探讨异步 API 的设计与实现

一、API 模式简介&#xff1a;同步与异步的对比 API 是客户端和服务器之间通信的桥梁。大多数 API 采用同步模式&#xff0c;执行的流程如下&#xff1a; 客户端发送请求。服务器处理请求。服务器返回响应。 同步模式对快速操作非常有效&#xff0c;比如数据查询或简单更新。…...

多模态大型语言模型(MLLM)综述

目录 多模态大语言模型的基础 长短期网络结构(LSTM) 自注意力机制 基于Transformer架构的自然语言处理模型 多模态嵌入概述 多模态嵌入关键步骤 多模态嵌入现状 TF-IDF TF-IDF的概念 TF-IDF的计算公式 TF-IDF的主要思路 TF-IDF的案例 训练和微调多模态大语言模…...

EasyPlayer-pro视频流播放学习

效果&#xff1a; 知识抢先看&#xff1a; 动态创建节点指的是通过 JavaScript 操作 DOM 来生成 HTML 元素并插入到页面中 document.createElement: 创建新的 HTML 元素节点。 // 创建一个 <div> 元素 const div document.createElement(div); // 设置其属性 div.id my…...

STM32F103C8T6实时时钟RTC

目录 前言 一、RTC基本硬件结构 二、Unix时间戳 2.1 unix时间戳定义 2.2 时间戳与日历日期时间的转换 2.3 指针函数使用注意事项 ​三、RTC和BKP硬件结构 四、驱动代码解析 前言 STM32F103C8T6外部低速时钟LSE&#xff08;一般为32.768KHz&#xff09;用的引脚是PC14和PC…...

springboot获取配置文件中的值

概括 在开发过程中&#xff0c;对于一些通用的配置&#xff0c;通常会定在一个配置文件中。通常为application.properties或者application.yml文件中。我们只需要在需要使用的地方通过注解直接获取即可。 使用 在springboot中可以通过使用value注解来读取配置文件中的属性。…...

Python 爬虫从入门到(不)入狱学习笔记

爬虫的流程&#xff1a;从入门到入狱 1 获取网页内容1.1 发送 HTTP 请求1.2 Python 的 Requests 库1.2 实战&#xff1a;豆瓣电影 scrape_douban.py 2 解析网页内容2.1 HTML 网页结构2.2 Python 的 Beautiful Soup 库 3 存储或分析数据&#xff08;略&#xff09; 一般爬虫的基…...

STM32C011开发(1)----开发板测试

STM32C011开发----1.开发板测试 概述硬件准备视频教学样品申请源码下载参考程序生成STM32CUBEMX串口配置LED配置堆栈设置串口重定向主循环演示 概述 STM32C011F4P6-TSSOP20 评估套件可以使用户能够无缝评估 STM32C0 系列TSSOP20 封装的微控制器功能&#xff0c;基于 ARM Corte…...

【GAMES101笔记速查——Lecture 19 Cameras,Lenses and Light Fields】

本章节内容&#xff1a;相机、棱镜、光场 计算机图形学的两种成像方法&#xff1a; 1.合成方法&#xff1a;光栅化、光线追踪&#xff08;展示出现实没有的东西&#xff09; 2.捕捉方法&#xff1a;相机&#xff08;捕捉现实已有的东西&#xff09; 目录 1 相机 1.1 针孔相…...

记录两次Unity编辑器和真机表现不符的情况,引用丢失等

如题&#xff0c;问题是在编辑器和打包在真机测试上的效果不一致。 首先&#xff0c;第一次遇到的问题是编辑器和真机上大量资源不符和丢失&#xff0c;多次对比表现为&#xff0c;异常和丢失内容都是两个版本之间变更的资源&#xff0c;判定为资源引用异常&#xff0c;尝试删…...

【Win】user32.SetWindowsHookExW - Notes

user32.SetWindowsHookExW user32.SetWindowsHookExW(idHook, lpfn, hMod, dwThreadId)用于在系统中安装钩子函数&#xff0c;以监视某些系统事件或消息。 Parameters idHook: int - 安装钩子的类型标识符&#xff1b;对应于不同的系统事件或消息类别。lpfn: callable - 指向…...

泷羽sec-linux

基础之linux 声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团…...

二叉树oj题解析

二叉树 二叉树的最近公共祖先什么是最近公共祖先&#xff1f;leetcode中求二叉树中最近公共祖先解题1.解题2. 根据二叉树创建字符串 二叉树的最近公共祖先 什么是最近公共祖先&#xff1f; 最近的公共祖先指的是这一棵树中两个节点中深度最大的且公共的祖先节点就是最近祖先节…...

python画图|无坐标轴自由划线操作fig.add_artist(lines.Line2D()函数

【1】引言 新发现了一种自由划线操作函数&#xff0c;和大家共享。 【2】官网教程 点击下述代码&#xff0c;直达官网&#xff1a; https://matplotlib.org/stable/gallery/misc/fig_x.html#sphx-glr-gallery-misc-fig-x-py 官网代码非常简洁&#xff0c;我进行了解读。 …...

Flutter封装Coap

前言 我们根据Coap数据通信流程写一个公共组件&#xff0c;用户只要在原本的组件外嵌套这个公共组件就可以使用Coap的功能&#xff0c;这样做更加的方便便捷。 具体步骤 封装一个udp函数 创建一个工厂函数&#xff0c;工厂函数初始化时监听广播数据发送广播函数&#xff1a…...

openharmony napi调试笔记

一、动态库的编译 第一种openharmony交叉编译链配置方法 使用的编译环境是ubuntu20.04 1、使用vscode配置openharmony sdk交叉编译环境 首先下载openharmony的sdk&#xff0c;如native-linux-x64-4.1.7.5-Release.zip 解压后native目录下就是交叉编译用的sdk 在要编译的源…...

C++数据结构与算法

C数据结构与算法 1.顺序表代码模版 C顺序表模版 #include <iostream> using namespace std; // 可以根据需要灵活变更类型 #define EleType intstruct SeqList {EleType* elements;int size;int capacity; };// Init a SeqList void InitList(SeqList* list, int capa…...

MATLAB深度学习(六)——LSTM长短期神经网络原理与应用

LSTM的应用可以参见一个相当好的视频&#xff1a;小车倒立摆最优控制教程 - Part1 Simulink Simscape Multibody仿真建模_哔哩哔哩_bilibili 6.1 序列建模——循环神经网络 循环神经网络RNN是一类专门用于处理序列性数据x&#xff0c;&#xff0c;xn的神经网络结构&#xff0c…...

利用Python爬虫获得1688按关键字搜索商品:技术解析

在电商领域&#xff0c;1688作为中国领先的B2B电商平台&#xff0c;其商品搜索功能对于商家来说具有极高的价值。通过获取搜索结果&#xff0c;商家可以更好地了解市场趋势&#xff0c;优化产品标题&#xff0c;提高搜索排名。本文将介绍如何使用Python编写爬虫&#xff0c;以获…...

Ajax学习笔记,第一节:语法基础

Ajax学习笔记&#xff0c;第一节&#xff1a;语法基础 一、概念 1、什么是Ajax 使用浏览器的 XMLHttpRequest 对象 与服务器通信2、什么是axios Axios是一个基于Promise的JavaScript库&#xff0c;支持在浏览器和Node.js环境中使用。相较于Ajax&#xff0c;Axios提供了更多…...

java基础知识(常用类)

目录 一、包装类(Wrapper) (1)包装类与基本数据的转换 (2)包装类与String类型的转换 (3)Integer类和Character类常用的方法 二、String类 (1)String类介绍 1)String 对象用于保存字符串,也就是一组字符序列 2)字符串常量对象是用双引号括起的字符序列。例如:&quo…...

修改bag的frame_id的工具srv_tools

在使用数据集导航或者建图时&#xff0c;bag中的点云或者其他话题的frame_id没有和需要的对应 1.创建工作空间 2.cd xxxx/src 3.git clone https://github.com/srv/srv_tools.git cd .. catkin_make source ./devel/setup.bash rosrun bag_tools change_frame_id.py -t /要改…...

浅谈丨功能安全测试,汽车的守护者

随着新能源汽车迅猛的发展&#xff0c;各类车型频频面世&#xff0c;同时辅助驾驶/自动驾驶等智驾功能也在不断迭代&#xff0c;使得整个汽车系统的复杂性越来越高&#xff0c;最终导致消费者不得不对如今的汽车质量和安全性提出质疑。 如何打破质疑&#xff1f; 那就不得不搬…...

了解M有SQL索引

目录 索引介绍 索引的优缺点 索引底层数据结构选型 Hash表 二叉查找树(BST) AVL树 红黑树 B 树& B树 索引类型总结 主键索引(Primary Key) 二级索引 聚簇索引与非聚簇索引 聚簇索引(聚集索引) 聚簇索引介绍 聚簇索引的优缺点 非聚簇索引(非聚集索引) 非聚簇…...

进程间通信5:信号

引入 我们之前学习了信号量&#xff0c;信号量和信号可不是一个东西&#xff0c;不能混淆。 信号是什么以及一些基础概念 信号是一种让进程给其他进程发送异步消息的方式 信号是随时产生的&#xff0c;无法预测信号可以临时保存下来&#xff0c;之后再处理信号是异步发送的…...

Excel把其中一张工作表导出成一个新的文件

excel导出一张工作表 一个Excel表里有多个工作表&#xff0c;怎么才能导出一个工作表&#xff0c;让其生成新的Excel文件呢&#xff1f; 第一步&#xff1a;首先打开Excel表格&#xff0c;然后选择要导出的工作表的名字&#xff0c;比如“Sheet1”&#xff0c;把鼠标放到“She…...

python oa服务器巡检报告脚本的重构和修改(适应数盾OTP)有空再去改

Two-Step Vertification required&#xff1a; Please enter the mobile app OTPverification code: 01.因为巡检的服务器要双因子认证登录&#xff0c;也就是登录堡垒机时还要输入验证码。这对我的巡检查服务器的工作带来了不便。它的机制是每一次登录&#xff0c;算一次会话…...

微信小程序下拉刷新与上拉触底的全面教程

微信小程序下拉刷新与上拉触底的全面教程 引言 在微信小程序的开发中,用户体验至关重要。下拉刷新和上拉触底是提高用户交互体验的重要功能,能够让用户轻松获取最新数据和内容。本文将详细介绍这两个功能的实现方式,结合实际案例、代码示例和图片展示,帮助开发者轻松掌握…...

第三十九章:Grafana 概述、Docker安装与验证指南

Grafana 概述、Docker安装与验证指南 一、Grafana 概述 Grafana 是一个跨平台的开源可视化分析工具,是目前网络架构和应用分析中最流行的时序数据展示工具。它主要用于大规模指标数据的可视化展示,并支持多种数据源和丰富的可视化插件。Grafana 使用Go语言开发,具备数据监…...

使用go实现流式输出

流式输出的深度剖析 之前一直在调用openai的key&#xff0c;只是照着文档进行流式调用&#xff0c;也只知其确是流式与api有所不同&#xff0c;而未成体系深究其实现原理。 就以openai的官方流式输出为切入。 概述 流式输出&#xff08;Streaming Output&#xff09;是 HTT…...

WebSocket详解、WebSocket入门案例

目录 1.1 WebSocket介绍 http协议&#xff1a; webSocket协议&#xff1a; 1.2WebSocket协议&#xff1a; 1.3客户端&#xff08;浏览器&#xff09;实现 1.3.2 WebSocket对象的相关事宜&#xff1a; 1.3.3 WebSOcket方法 1.4 服务端实现 服务端如何接收客户端发送的请…...

元组部分介绍

元组部分 元组的基本格式与特点 #1.元组 #基本格式&#xff1a; 元组名&#xff08;元素1&#xff0c;元素2&#xff0c;元素3&#xff09; #注意&#xff1a;所有元素包含在小括号内&#xff0c;元素与元素之间用逗号隔开&#xff0c;可以是不同的元素类型 #注意&#xff1a…...

mfc100u.dll是什么?分享几种mfc100u.dll丢失的解决方法

mfc100u.dll 是一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;属于 Microsoft Foundation Classes (MFC) 库的一部分。MFC 是微软公司开发的一套用于快速开发 Windows 应用程序的 C 类库。mfc100u.dll 文件包含了 MFC 库中一些常用的函数和类的定义&#xff0c;这…...

企业数字化转型现状

国家数字经济战略背景 2018年以来&#xff0c;国家政府不断出台政策规范我国企业数字化治理市场。2018年9月颁布《关于发展数字经济稳定并扩大就业的指导意见》&#xff0c;支持建设一批数字经济创新创业孵化机构。积极推进供应链创新与应用&#xff0c;支持构建以企业为主导。…...

数据治理:在企业数据管理中的关键角色与实现路径——《DAMA 数据管理知识体系指南》读书笔记- 第 3 章

文章目录 1. 数据治理的核心内涵与战略价值2. 数据治理的驱动因素&#xff1a;不仅仅是合规3. 数据治理的组织模型&#xff1a;选择适合企业结构的运营模式4. 实施数据治理的关键步骤&#xff1a;战略、制度和文化5. 数据治理工具的选择&#xff1a;支持业务与流程的高效管理6.…...

树莓派2装FreeBSD14.1 Raspberry Pi2 install FreeBSD14.1 00000121:error:0A000086:SSL

树莓派2代的Model B采用Broadcom BCM2836 900MHz的四核SoC&#xff0c;1GB内存&#xff0c;是新一代开拓者&#xff0c;兼容1代B。相比之下&#xff0c;树莓派2的性能比1代提升6倍&#xff0c;内存翻了一番。Raspberry Pi 2不仅能跑全系列ARM GNU/Linux发行版&#xff0c;而且支…...

uniop触摸屏维修eTOP40系列ETOP40-0050

在现代化的工业与商业环境中&#xff0c;触摸屏设备已成为不可或缺的人机交互界面。UNIOP&#xff0c;作为一个知名的触摸屏品牌&#xff0c;以其高性能、稳定性和用户友好性&#xff0c;广泛应用于各种自动化控制系统、自助服务终端以及高端展示系统中。然而&#xff0c;即便如…...

uniapp+vue2重新进入小程序就清除缓存,设备需要重新扫码

代码 app.vue页面 <script>export default {onLaunch: function() {uni.removeStorageSync(equiId)}} </script>...

视频推拉流EasyDSS互联网直播点播平台技术特点及应用场景剖析

在数字科技日新月异的今天&#xff0c;视频直播和点播已经成为互联网内容传播的重要方式之一。而互联网直播点播平台EasyDSS作为功能强大的流媒体直播点播视频能力平台&#xff0c;提供了一站式的视频推拉流、转码、直播、点播、时移回放、存储等视频服务&#xff0c;广泛应用于…...

论文笔记 网络安全图谱以及溯源算法

​ 本文提出了一种网络攻击溯源框架&#xff0c;以及一种网络安全知识图谱&#xff0c;该图由六个部分组成&#xff0c;G <H&#xff0c;V&#xff0c;A&#xff0c;E&#xff0c;L&#xff0c;S&#xff0c;R>。 1|11.知识图 ​ 网络知识图由六个部分组成&#xff0c…...

抓住鸿蒙生态崛起的机遇,拥抱未来开发挑战

随着华为鸿蒙&#xff08;HarmonyOS&#xff09;的持续发展&#xff0c;鸿蒙生态正在迅速崛起&#xff0c;逐步在智能手机、智能穿戴、车载、家居等领域形成完整闭环。它不仅为开发者带来了新的机遇&#xff0c;还带来了技术上的挑战。如何抓住这些机遇并应对挑战&#xff0c;是…...