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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【漏洞复现】|百易云资产管理运营系统/mobilefront/c/2.php前台文件上传

漏洞描述 湖南众合百易信息技术有限公司(简称:百易云)成立于2017年是一家专注于不动产领域数字化研发及服务的国家高新技术企业,公司拥有不动产领域的数字化全面解决方案、覆盖住宅、写字楼、商业中心、专业市场、产业园区、公建、…

远程控制软件:探究云计算和人工智能的融合

在数字化时代,远程控制工具已成为我们工作与生活的重要部分。用户能够通过网络远程操作和管理另一台计算机,极大地提升了工作效率和便捷性。随着人工智能(AI)和云计算技术的飞速发展,远程控制工具也迎来了新的发展机遇…

漫谈 module caching——PyCharm jupyter notebook 在导入模块被更新后无法及时同步问题

目录 引子:问题的发现何为 module caching见微知著:Python 中的缓存机制参考链接 引子:问题的发现 近日笔者用 PyCharm 创建了一个项目时不经意间发现了这个问题:事情发生在调试 Jupyter Notebook 的过程中。当笔者修改了自己编写…

企业数字化转型现状

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

《Python基础》之算数、比较、赋值、逻辑、位运算符

目录 简介 Python中常见的运算符 1、算数运算符 2、比较运算符 3、赋值运算符 4、逻辑运算符 5、位运算符 总结 简介 Python 提供了多种运算符,用于执行各种操作,包括算术运算、比较运算、逻辑运算、位运算、赋值运算等。以下是 Python 中常用的…

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

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.MeshPhongMaterial高…

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

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

道品智能科技移动式水肥一体机:农业灌溉施肥的革新之选

在现代农业的发展进程中,科技的力量正日益凸显。其中,移动式水肥一体机以其独特的可移动性、智能化以及实现水肥一体化的卓越性能,成为了农业领域的一颗璀璨新星。它不仅改变了传统的农业灌溉施肥方式,更为农业生产带来了高效、精…

【PCB设计】AD16教程:分配位号

1、前提条件 确保已经基本画完原理图 2、点击【Tools-Annotate Schematics】 3、依次点击【Reset All】、【Update Changes Lise】、【Close】 最后位号就被自动分配好了

20241125编译友善之臂的NanoPi R3S开发板【RK3566】STEP-BY-STEP版本

20241125编译友善之臂的NanoPi R3S开发板【RK3566】STEP-BY-STEP版本 2024/11/25 15:59 20241125编译友善之臂的NanoPi R3S开发板【RK3566】精简步骤 2024/11/25 19:37 viewproviewpro-ThinkBook-16-G5-IRH:~$ viewproviewpro-ThinkBook-16-G5-IRH:~$ df -h viewproviewpro-T…

uniapp实际开发遇到过的问题(持续更新中....)

1. 在ios模拟器上会出现底部留白的情况 解决方案: 在manifest.json文件,找到开源码视图配置,添加如下: "app-plus" : {"safearea":{"bottom":{"offset" : "none" // 底部安…

计算机网络:应用层知识点概述及习题

网课资源: 湖科大教书匠 1、概述 习题1 1 在计算机网络体系结构中,应用层的主要功能是 A. 实现进程之间基于网络的通信 B. 通过进程之间的交互来实现特定网络应用 C. 实现分组在多个网络上传输 D. 透明传输比特流 2 以下不属于TCP/IP体系结构应用层范畴…

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

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

递推概念和例题

一、什么是递推 递推算法以初始值为基础,用相同的运算规律,逐次重复运算,直至求出问题的解,它的本质是按照固定的规律逐步推出(计算出)下一步的结果 这种从“起点”重复相同的的方法直至到达问题的解&…

【Android】RecyclerView回收复用机制

概述 RecyclerView 是 Android 中用于高效显示大量数据的视图组件&#xff0c;它是 ListView 的升级版本&#xff0c;支持更灵活的布局和功能。 我们创建一个RecyclerView的Adapter&#xff1a; public class MyRecyclerView extends RecyclerView.Adapter<MyRecyclerVie…

websocket是什么?

一、定义 Websocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;它允许服务器主动向客户端推送数据&#xff0c;而不需要客户端不断的轮询服务器来获取数据 与http协议不同&#xff0c;http是一种无状态的&#xff0c;请求&#xff0c;响应模式的协议(单向通信)&a…

已存大量数据的mysql库实现主从各种报错----解决方案

背景何谓“先死后生”本文使用技术1、实施流程图2、实施2.1、数据库备份2.2、搭建Mysql的Master-Slave2.2.1、准备工作2.2.2、开始部署2.2.3、账号配置2.2.4、slave 同步配置2.2.5、验证 2.3、Master做数据恢复 结语 背景 计划对已有大量数据的mysql库的主从搭建&#xff0c;使…

SAP 零售方案 CAR 系统的介绍与研究

前言 当今时代&#xff0c;零售业务是充满活力和活力的业务领域之一。每天&#xff0c;由于销售运营和客户行为&#xff0c;它都会生成大量数据。因此&#xff0c;公司迫切需要管理数据并从中检索见解。它将帮助公司朝着正确的方向发展他们的业务。 这就是为什么公司用来处理…

模电复习易错题

PN 结&#xff1a;PN 结是由 P 型半导体和 N 型半导体通过特殊工艺结合在一起形成的结构。P 型半导体中多子是空穴&#xff0c;N 型半导体中多子是电子。内建电场&#xff1a;在 PN 结形成时&#xff0c;由于 P 区和 N 区载流子浓度的差异&#xff0c;会在结区形成一个内建电场…

AI安全:从现实关切到未来展望

近年来&#xff0c;人工智能技术飞速发展&#xff0c;从简单的图像识别到生成对话&#xff0c;从自动驾驶到医疗诊断&#xff0c;AI技术正深刻改变着我们的生活。然而&#xff0c;伴随着这些进步&#xff0c;AI的安全性和可控性问题也日益凸显。这不仅涉及技术层面的挑战&#…