React (三)


文章目录

  • 项目地址
  • 十二、性能优化
    • 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.rhkb.cn/news/477384.html

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

相关文章

MD5算法的学习

MD5_百度百科 MD5信息摘要算法(Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出一个128位的(16字节)的散列值(hash value),用于确保信息传输完整一致。MD5由美…

【虚拟机】VMWare的CentOS虚拟机断电或强制关机出现问题

VMware 虚拟机因为笔记本突然断电故障了,开机提示“Entering emergency mode. Exit the shell to continue.”,如下图所示: 解决方法:输入命令: xfs_repair -v -L /dev/dm-0 注:报 no such file or direct…

【论文阅读】WGSR

0. 摘要 0.1. 问题提出 1.超分辨率(SR)是一个不适定逆问题,可行解众多。 2.超分辨率(SR)算法在可行解中寻找一个在保真度和感知质量之间取得平衡的“良好”解。 3.现有的方法重建高频细节时会产生伪影和幻觉,模型区分图像细节与伪影仍是难题。 0.2. …

解决 Android 单元测试 No tests found for given includes:

问题 报错: Execution failed for task :testDebugUnitTest. > No tests found for given includes: 解决方案 1、一开始以为是没有给测试类加public修饰 2、然后替换 Test 注解的包可以解决,将 org.junit.jupiter.api.Test 修改为 org.junit.Tes…

服务机器人三甲坎德拉:用智能化开启售后服务新篇章

随着市场需求快速增长,专注自动驾驶服务机器人研发的坎德拉近年来实现了快速发展,并且通过技术创新与优质服务收获了良好口碑。为了不断提升售后服务质量和客户服务水平,坎德拉与新一代智能客户服务解决方案提供商售后宝共同打造智能化的售后…

3D建筑模型的 LOD 规范

LOD(细节层次) 是3D城市建模中用于表示建筑模型精细程度的标准化描述不同的LOD适用于不同的应用场景 LOD是3D建模中重要的分级标准,不同层级适合不同精度和用途的需求。 从LOD0到LOD4,细节逐渐丰富,复杂性和精度也逐…

递归------深度优先搜索

深度优先搜索(Depth-First Search,简称DFS)是一种用于遍历或搜索树或图的算法。它从一个顶点开始,尽可能深地搜索树的分支。深度优先搜索沿着一条路径深入,直到无法继续为止,然后回溯并尝试其他路径。这种搜…

蓝桥杯c++算法学习【5】之枚举与模拟(卡片、回文日期、赢球票、既约分数:::非常典型的比刷例题!!!)

别忘了请点个赞收藏关注支持一下博主喵!!!! ! ! !!! 关注博主,更多蓝桥杯nice题目静待更新:) 枚举与模拟 一、卡片: 【问题描述】 小蓝有很多数字卡片,每张卡片上都…

相机网卡开启巨型帧和关闭节能模式方法

2022 年 8 月 2 日 Tank 阅读次数(ip/1年): 26,796 win10为例子 首先在开始菜单搜索:网络连接 对想要设置的网络右键:属性 点 配置 高级里面找到这三个选项,参考下图设置,螃蟹网卡建议关掉所有节能有关的…

Windows server2016设置多用户界面——保姆级教程

在 Windows Server 2016 服务器中,通常默认情况下能够支持两个用户进行远程登录。而通过在服务器上安装远程桌面服务中的远程桌面会话主机和远程桌面授权,并对其进行相应配置,便可以实现多用户远程登录。 远程桌面服务是一种由若干角色服务所…

第一个autogen与docker项目

前提条件:在windows上安装docker 代码如下: import os import autogen from autogen import AssistantAgent, UserProxyAgentllm_config {"config_list": [{"model": "GLM-4-Plus","api_key": "your api…

后端开发详细学习框架与路线

🚀 作者 :“码上有前” 🚀 文章简介 :后端开发 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 为帮助你合理安排时间,以下是结合上述学习内容的阶段划分与时间分配建议。时间安排灵活&a…

【Isaac Sim】相关问题汇总

目录 一、安装点击Install时报错二、启动时报 Failed to create any GPU devices三、加载Isaac Sim自带模型或示例时报 Isaac Sim is not responding 一、安装点击Install时报错 报错: request to https://asset.launcher.omniverse.nvidia.com/… failed, reason:…

社团管理智能化:SpringBoot技术

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…

【C++】继承(inheritance)

引入 假设我们有一个动物类 class Animal { public:int age;void eat() {std::cout << "吃东西&#xff01;" << std::endl;} };又想写一个狗类&#xff0c;它也有年龄&#xff0c;也会吃&#xff0c;除此之外还有种类 class Dog { public:const char…

Oracle - 多区间按权重取值逻辑 ,分时区-多层级-取配置方案(二)

Oracle - 多区间按权重取值逻辑 &#xff0c;分时区-多层级-取配置方案https://blog.csdn.net/shijianduan1/article/details/133386281 某业务配置表&#xff0c;按配置的时间区间及组织层级取方案&#xff0c;形成报表展示出所有部门方案的取值&#xff1b; 例如&#xff0…

电子应用设计方案-19:智能云饭锅系统方案设计

智能云饭锅系统方案设计 一、系统概述 本智能云饭锅系统旨在提供便捷、个性化和智能化的烹饪体验&#xff0c;结合云服务实现远程控制、食谱推荐和烹饪数据管理等功能。 二、系统组成 1. 锅体 - 采用高品质的不粘涂层内胆&#xff0c;确保米饭受热均匀且易于清洁。 - 具备良好…

镁光MT25QU01GXXX norflash调试笔记

目录 前言一、芯片概述二、数据手册解释1. 数据手册获取2.内容概括 三、几个操作的代码1.复位芯片操作2.读取芯片ID3.擦除芯片扇区4.向芯片存入数据5.读取存储的数据6.其它操作函数 前言 本笔记总结如何使用MCU对nor flash进行数据存储&#xff0c;包括芯片基本介绍&#xff0…

Qt界面设计时使各控件依据窗口缩放进行栅格布局的方法

图1 最终效果 想要达成上述图片的布局效果&#xff0c;具体操作如下&#xff1a; 新建一窗体&#xff1a; 所需控件如下&#xff1a; Table View控件一个&#xff1b; Group Box控件一个&#xff1b; Push Button控件2个&#xff1b; Horiziontal Spacer控件2个&#xf…

【Git】:Git基本操作

目录 创建、配置本地仓库 创建本地仓库 配置本地仓库 认识工作区、暂存区、版本库 修改文件 版本回退 撤销修改 删除文件 创建、配置本地仓库 创建本地仓库 我们通常可以通过以下两种方式之一获取 Git 存储库&#xff1a; 自己在本地目录创建一个本地仓库 从其它服务…