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的,最近优化下无线网络,说新的设备用华为的,然后我是直到要部署的当天才知道用华为设备的,就很无语了,一点准备没有,以下为这次的实际操作记录吧&…

Java学习,继承(1)

Java继承是面向对象的编程特性,允许一个类(称为子类或派生类)继承另一个类(称为父类或基类)的字段和方法。通过继承,子类可以获得父类的所有公共(public)和保护(protecte…

二刷代码随想录第13天

二叉树的递归遍历 递归三部曲1.确定递归函数的参数和返回值 2.确定终止条件 3.确定单层的递归逻辑前中后序遍历只需要改一下位置即可 class Solution { public:vector<int> inorderTraversal(TreeNode* root) {vector<int> vec;traversal(root, vec);return vec;…

Linux麦克风录音实战

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

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

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

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

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

树莓派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;而且支…

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 是一个开源的物联网平台&#xff0c;提供了设备…

MySQL获取数据库内所有表格数据总数

在 MySQL 中&#xff0c;要获取数据库内所有表格的数据总数&#xff0c;可以编写一个查询脚本来遍历每个表并计算其行数。你可以使用 INFORMATION_SCHEMA 数据库&#xff0c;它包含了关于数据库元数据的表格&#xff0c;如 TABLES 和 COLUMNS。 以下是一个示例脚本&#xff0c…

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

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

开发工具 - VSCode 快捷键

以下是一些常用的 VS Code 快捷键&#xff08;Windows、macOS 和 Linux 均适用&#xff0c;略有不同&#xff09;&#xff1a; 常用快捷键 功能Windows/LinuxmacOS打开命令面板Ctrl Shift P 或 F1Cmd Shift P打开文件Ctrl OCmd O保存文件Ctrl SCmd S全部保存Ctrl K,…

【Leetcode 每日一题】146. LRU 缓存(c++)

146. LRU 缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#x…

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

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

pytorch经典训练流程

文章目录 [toc]1. **经典训练流程和任务&#xff1a;监督学习****1.1 什么是监督学习&#xff1f;****1.2 为什么要设计训练流程&#xff1f;****1.3 怎么设计训练流程&#xff1f;****代码示例&#xff1a;监督学习的典型流程** 2. **超参数设置****2.1 什么是超参数&#xff…

241124学习日志——[CSDIY] [ByteDance] 后端训练营 [14]

CSDIY&#xff1a;这是一个非科班学生的努力之路&#xff0c;从今天开始这个系列会长期更新&#xff0c;&#xff08;最好做到日更&#xff09;&#xff0c;我会慢慢把自己目前对CS的努力逐一上传&#xff0c;帮助那些和我一样有着梦想的玩家取得胜利&#xff01;&#xff01;&…

001 MATLAB介绍

前言&#xff1a; 软件获取渠道有很多&#xff0c;难点也就是百度网盘下载慢&#xff1b; 线上版本每月有时间限制。 01 MATLAB介绍 性质&#xff1a; MATLAB即Matrix Laboratory 矩阵实验室的意思&#xff0c;是功能强大的计算机高级语言, 已广泛应用于各学科研究部门、…

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

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;什么是传值调用和传址调用&#xff1f;1. 传值调用&#xff08;Call by Value&#xff09;2. 传址调用&#xff08;Call by Reference&#xff09; &#x1f4af;传值调…

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

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

docker 卸载与安装

卸载 查询之前安装的docker, 没有查到则不用卸载删除 yum list installed | grep docker 卸载安装包 yum remove docker-* -y 删除镜像、容器、默认挂载卷 rm -rf /var/lib/docker 安装 -ce 安装稳定版本 -y 当安装过程提示选择全部为 "yes" yum install d…