React (三)

news2024/11/24 7:37:33

文章目录

  • 项目地址
  • 十二、性能优化
    • 12.1 使用useMemo避免不必要的计算
    • 12.2 使用memo缓存组件,防止过度渲染
    • 12.3 useCallBack缓存函数
    • 12.4 useCallBack里访问之前的状态(没懂)
  • 十三、Styled-Components
    • 13.1 安装
    • 13.2给普通html元素添加样式
    • 13.3 继承和覆盖样式
    • 13.4 给react组件添加样式
    • 13.5 使用props控制样式
    • 13.6 使用嵌套样式
    • 13.7 定义主题
    • 13.8 实现样式的多态
  • 十四、使用React Transition Group实现动画(跳过)


项目地址

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

十二、性能优化

12.1 使用useMemo避免不必要的计算

只有在指定的数值发生了变化,才会执行

  • 当页面发生变化时,因为react的机制,会导致页面进行一次刷新,但是由于购物车或者其他计算功能并没有更改,所以不应该重新计算;
  • 参数1:接受一个回调函数,返回我们需要计算的值
  • 参数2:和useEffect一样,接受一个依赖数组,把变化的东西放进去,来触发useMemo

在这里插入图片描述

12.2 使用memo缓存组件,防止过度渲染

只有props发生了变化,才会重新渲染组件

  • 虽然,上面计算没有重新渲染,但是商品列表没有变化(添加或者删除)商品ÿ

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

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

相关文章

javascrip页面交互

元素的三大系列 offset系列 offset初相识 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素,如果父级没有定位,则返回body element.offsetTop 返回元素相对于有定位父元素上方的偏移量 element.offsetLeft 返回元素…

生成对抗网络(简要介绍)

生成对抗网络(Generative Adversarial Network,GAN)是一种深度学习模型架构,由 Ian Goodfellow 等人在 2014 年提出。GAN 由两个神经网络组成——生成器(Generator)和判别器(Discriminator&…

(C语言)文件操作

目录 文件 程序文件 数据文件 文件名 ​编辑数据文件的分类 文件的打开和关闭 流 标准流 1)stdin 2)stdout 3)stderr 文件指针 文件的打开和关闭 对文件内容操作的函数 1)fgetc,fputc 2)fp…

招商蛇口|在低密园林里,开启生活的“任意门”

“最好的建筑是这样的,我们深处在其中,却不知道自然在哪里终了,艺术在哪里开始。” 凭借深耕西安10载的城市远见,以及建立在成功人居经验之上的敏锐洞察,招商蛇口将林语堂名言里的生活,变成了现实。 都市化越是加速&…

【es6进阶】vue3中的数据劫持的最新实现方案的proxy的详解

vuejs中实现数据的劫持,v2中使用的是Object.defineProperty()来实现的,在大版本v3中彻底重写了这部分,使用了proxy这个数据代理的方式,来修复了v2中对数组和对象的劫持的遗留问题。 proxy是什么 Proxy 用于修改某些操作的默认行为&#xff0…

掌上单片机实验室 – RT-Thread + ROS2 初探(25)

在初步尝试RT-Thread之后,一直在琢磨如何进一步感受它的优点,因为前面只是用了它的内核,感觉和FreeRTOS、uCOS等RTOS差别不大,至于它们性能、可靠性上的差异,在这种学习性的程序中,很难有所察觉。 RT-Threa…

李宏毅机器学习课程知识点摘要(14-18集)

线性回归,逻辑回归(线性回归sigmoid),神经网络 linear regression , logistic regression , neutral network 里面的偏导的相量有几百万维,这就是neutral network的不同,他是…

ThingsBoard规则链节点:AWS SQS 节点详解

引言 ThingsBoard 是一个开源的物联网平台,提供了设备管理、数据收集、处理和可视化等功能。规则链是 ThingsBoard 中的一个强大功能,允许用户定义复杂的业务逻辑来处理设备上报的数据。在规则链中,AWS SQS 节点用于将消息发送到 Amazon Simp…

在Windows 11上启用远程桌面及其故障排查

在Windows 11上启用远程桌面 这将允许其它设备远程连接到你的电脑,并像坐在你的电脑前一样操纵你的电脑桌面。 启用方法很简单,先在设置中找到远程桌面。 点击进入后,点击右侧的滑钮启用远程桌面即可。 勾选启用网络级别验证使得登录者在能…

【H2O2|全栈】JS进阶知识(八)ES6(4)

目录 前言 开篇语 准备工作 浅拷贝和深拷贝 浅拷贝 概念 常见方法 弊端 案例 深拷贝 概念 常见方法 弊端 逐层拷贝 原型 构造函数 概念 形式 成员 弊端 显式原型和隐式原型 概念 形式 constructor 概念 形式 原型链 概念 形式 结束语 前言 开篇语…

RabbitMQ3:Java客户端快速入门

欢迎来到“雪碧聊技术”CSDN博客! 在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将…

zotero7 插件使用

zotero style 1、下载地址 Zotero 插件商店 | Zotero 中文社区 2、配置 在工具插件里 3、配置 style 进入高级→设置编辑器 查找 easy 设置完即可显示, 注1:easyscholar的密钥要自行申请注册,注册地址:easySchol…

uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题

uniappvue3ts H5端使用Quill富文本插件以及解决上传图片反显的问题 1.在项目中安装Quill npm i quill1.3.72.需要显示富文本的页面完整代码 <template><view><div ref"quillEditor" style"height: 65vh"></div></view> &…

关于pip install 包 时出现This is an issue with the package mentioned above,not pip的问题

关于This is an issue with the package mentioned above,not pip 今天在用pip下载gensim包的时候&#xff0c;出现了上图中的问题&#xff0c;提示信息是&#xff1a;This is an issue with the package mentioned above,not pip 那说明是包的问题&#xff0c;而不是在使用 pi…

rust中解决DPI-1047: Cannot locate a 64-bit Oracle Client library问题

我们在使用rust-oracle crate连接oracle进行测试的过程中&#xff0c;会发现无法连接oracle&#xff0c;测试运行过程中抛出“DPI-1047: Cannot locate a 64-bit Oracle Client library”错误。该问题是由于rust-oracle需要用到oracle的动态连接库&#xff0c;我们通过安装orac…

软件测试面试之常规问题

1.描述一下测试过程 类似题目:测试的生命周期 思路:这是一个“范围”很大的题目&#xff0c;而且回答时间一般在3分钟之内&#xff0c;不可能非常详细的描述整个过程&#xff0c;因此答题的思路要从整体结构入手&#xff0c;不要过细。为了保证答案的准确性&#xff0c;可以引…

D77【 python 接口自动化学习】- python基础之HTTP

day77 postman接口请求 学习日期&#xff1a;20241123 学习目标&#xff1a;http 定义及实战&#xfe63;&#xfe63;postman接口请求 学习笔记&#xff1a; get请求 post请求 总结 get请求用于查询数据post请求用于添加数据

在 Swift 中实现字符串分割问题:以字典中的单词构造句子

文章目录 前言摘要描述题解答案题解代码题解代码分析示例测试及结果时间复杂度空间复杂度总结 前言 本题由于没有合适答案为以往遗留问题&#xff0c;最近有时间将以往遗留问题一一完善。 LeetCode - #140 单词拆分 II 不积跬步&#xff0c;无以至千里&#xff1b;不积小流&…

【从零开始的LeetCode-算法】3297. 统计重新排列后包含另一个字符串的子字符串数目 I

给你两个字符串 word1 和 word2 。 如果一个字符串 x 重新排列后&#xff0c;word2 是重排字符串的 前缀&#xff0c;那么我们称字符串 x 是 合法的 。 请你返回 word1 中 合法 子字符串的数目。 示例 1&#xff1a; 输入&#xff1a;word1 "bcca", word2 "…

.NET9 - 新功能体验(二)

书接上回&#xff0c;我们继续来聊聊.NET9和C#13带来的新变化。 01、新的泛型约束 allows ref struct 这是在 C# 13 中&#xff0c;引入的一项新的泛型约束功能&#xff0c;允许对泛型类型参数应用 ref struct 约束。 可能这样说不够直观&#xff0c;简单来说就是Span、ReadO…