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 只更改不渲染

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

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

相关文章

STM32设计学生宿舍监测控制系统-分享

目录 前言 一、本设计主要实现哪些很“开门”功能? 二、电路设计原理图 电路图采用Altium Designer进行设计: 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 本项目旨在利用STM32单片机为核心,结合传感器技术、无线通信技…

华为无线AC+AP组网实际应用小结

之前公司都是使用的H3C的交换机、防火墙以及无线AC和AP的,最近优化下无线网络,说新的设备用华为的,然后我是直到要部署的当天才知道用华为设备的,就很无语了,一点准备没有,以下为这次的实际操作记录吧&…

Linux麦克风录音实战

在 Linux 上使用麦克风进行录音可以通过多种方式实现,包括使用命令行工具、图形界面应用程序以及编程接口。下面我将介绍几种常见的方法,从简单的命令行工具到使用 PortAudio 库进行编程。 一. 使用arecord命令行工具 arecord 是 ALSA(Adva…

虚拟苹果系统MacOS中新建自定义C++Dylib并用C++测试程序测试

前言 苹果系统中Dylib的建立和使用是一个非常基础的功能。本博客使用苹果虚拟机MacOS Ventura 13.6.7,XCode15.2,来复现这个过程。供参考。 1、Dylib框架的建立 2、增加一个函数 注意,向导自动生成的Helloworld函数中嵌套了一个函数Helloworl…

Windows系统电脑安装TightVNC服务端结合内网穿透实现异地远程桌面

文章目录 前言1. 安装TightVNC服务端2. 局域网VNC远程测试3. Win安装Cpolar工具4. 配置VNC远程地址5. VNC远程桌面连接6. 固定VNC远程地址7. 固定VNC地址测试 前言 在追求高效、便捷的数字化办公与生活的今天,远程桌面服务成为了连接不同地点、不同设备之间的重要桥…

ThingsBoard规则链节点:Azure IoT Hub 节点详解

目录 引言 1. Azure IoT Hub 节点简介 2. 节点配置 2.1 基本配置示例 3. 使用场景 3.1 数据传输 3.2 数据分析 3.3 设备管理 4. 实际项目中的应用 4.1 项目背景 4.2 项目需求 4.3 实现步骤 5. 总结 引言 ThingsBoard 是一个开源的物联网平台,提供了设备…

如何利用 Puppeteer 的 Evaluate 函数操作网页数据

介绍 在现代的爬虫技术中,Puppeteer 因其强大的功能和灵活性而备受青睐。Puppeteer 是一个用于控制 Chromium 或 Chrome 浏览器的 Node.js 库,提供了丰富的 API 接口,能够帮助开发者高效地处理动态网页数据。本文将重点讲解 Puppeteer 的 ev…

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

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

【C语言】传值调用与传址调用:深度解析与实现

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 💯前言💯什么是传值调用和传址调用?1. 传值调用(Call by Value)2. 传址调用(Call by Reference) 💯传值调…

科技赋能健康:多商户Java版商城系统引领亚健康服务数字化变革

在当今社会,随着生活节奏的加快和工作压力的增大,越来越多的人处于亚健康状态。据《The Lancet》期刊2023年的统计数据显示,全球亚健康状态的人群比例已高达82.8%,这一数字背后,隐藏着巨大的健康风险和社会成本。亚健康…

vue实现列表滑动下拉加载数据

一、实现效果 二、实现思路 使用滚动事件监听器来检测用户是否滚动到底部&#xff0c;然后加载更多数据 监听滚动事件。检测用户是否滚动到底部。加载更多数据。 三、案例代码 <div class"drawer-content"><div ref"loadMoreTrigger" class&q…

【CSP CCF记录】201809-2第14次认证 买菜

题目 样例输入 4 1 3 5 6 9 13 14 15 2 4 5 7 10 11 13 14 样例输出 3 思路 易错点&#xff1a;仅考虑所给样例&#xff0c;会误以为H和W两人的装车时间是一一对应的&#xff0c;那么提交结果的运行错误就会让你瞬间清醒。 本题关键是认识到H和W的装车时间不一定一一对应&…

学习threejs,使用设置bumpMap凹凸贴图创建褶皱,实现贴图厚度效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…

GoF设计模式——结构型设计模式分析与应用

文章目录 UML图的结构主要表现为&#xff1a;继承&#xff08;抽象&#xff09;、关联 、组合或聚合 的三种关系。1. 继承&#xff08;抽象&#xff0c;泛化关系&#xff09;2. 关联3. 组合/聚合各种可能的配合&#xff1a;1. 关联后抽象2. 关联的集合3. 组合接口4. 递归聚合接…

Unity中动态生成贴图并保存成png图片实现

实现原理&#xff1a; 要生成长x宽y的贴图&#xff0c;就是生成x*y个像素填充到贴图中&#xff0c;如下图&#xff1a; 如果要改变局部颜色&#xff0c;就是从x1到x2(x1<x2),y1到y2(y1<y2)这个范围做处理&#xff0c; 或者要想做圆形就是计算距某个点&#xff08;x1,y1&…

互联网直播/点播EasyDSS视频推拉流平台视频点播有哪些技术特点?

在数字化时代&#xff0c;视频点播应用已经成为我们生活中不可或缺的一部分。监控技术与视频点播的结合正悄然改变着我们获取和享受媒体内容的方式。这一变革不仅体现在技术层面的进步&#xff0c;更深刻地影响了我们。 EasyDSS视频直播点播平台是一款高性能流媒体服务软件。E…

1语言基础

数据结构与算法可以说是每位程序员的必修课&#xff0c;即使是AI高速发展的今天&#xff0c;熟悉数据结构与算法都无疑是面向开发的一项加分项。先从一个问题看起&#xff1a; # 怎么让后面不带空格 print("11",11) # 11 2方案可能有更多&#xff0c;就像一个问题&am…

Redis 可观测最佳实践

Redis 介绍 Redis 是一个开源的高性能键值对&#xff08;key-value&#xff09;数据库。它通常用作数据库、缓存和消息代理。Redis 支持多种类型的数据结构&#xff0c;Redis 通常用于需要快速访问的场景&#xff0c;如会话缓存、全页缓存、排行榜、实时分析等。由于其高性能和…

【前端】JavaScript 变量声明和函数声明的提升机制:深入探讨提升优先级与其行为

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;提升&#xff08;Hoisting&#xff09;概述&#x1f4af;提升机制——函数声明 vs 变量声明&#x1f4af;代码示例&#xff1a;函数与 var 的提升提升后的代码解析分析 …

fastadmin实现站内通知功能

实现效果如下 application/admin/view/common/header.html <style>#notificationMenu {display: none;position: absolute;top: 40px;right: 0;background: #fff;border-radius: 6px;padding: 10px 0;width: 300px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);z-inde…