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.mzph.cn/news/887137.shtml

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

相关文章

Etcd 框架

基本了解 客户端、长连接与租约的关系 客户端对象 etcd的客户端对象是用户与etcd服务进行交互的主要接口,主要功能就是存储、通知和事务等功能访问 键值存储:客户端通过put 和 get操作存储数据;数据存储在etcd的层级化键值数据库中监听器&a…

IDEA2023 创建SpringBoot项目(一)

一、Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。 二、快速开发 1.打开IDEA选择 File->New->Project 2、…

教育数字化转型新时代:探索智慧学习空间的无限可能

在信息技术的浪潮推动下,教育行业正迎来一场前所未有的变革。这场变革的核心在于教育数字化转型,它要求我们重新审视和构建传统的学习模式,以适应快速变化的社会需求。在这个过程中,智慧学习空间作为数字化转型的重要成果&#xf…

LSTM原理解读与实战

在RNN详解及其实战中,简单讨论了为什么需要RNN这类模型、RNN的具体思路、RNN的简单实现等问题。同时,在文章结尾部分我们提到了RNN存在的梯度消失问题,及之后的一个解决方案:LSTM。因此,本篇文章主要结构如下&#xff…

【成品文章+四小问代码更新】2024亚太杯国际赛B题基于有限差分格式的空调形状优化模型

这里仅展示部分内容,完整内容获取在文末! 基于有限差分格式的空调形状优化模型 摘 要 随着科技进步,多功能环境调节设备成为市场趋势,集成了空调、加湿器和空气 净化器功能的三合一设备能提供更舒适健康的室内环境。我们需要分析…

中国省级新质生产力发展指数数据(任宇新版本)2010-2023年

一、测算方式:参考C刊《财经理论与实践》任宇新(2024)老师的研究,新质生产力以劳动者劳动资料劳动对象及其优化组合的质变为 基本内涵,借 鉴 王 珏 和 王 荣 基 的 做 法构建新质生产力发展水平评价指标体系如下所示&a…

简单理解下基于 Redisson 库的分布式锁机制

目录 简单理解下基于 Redisson 库的分布式锁机制代码流程:方法的调用:具体锁的实现:riderBalance 方法:tryLock 方法(重载):tryLock 方法(核心实现): 简单理解…

Diving into the STM32 HAL-----DAC笔记

根据所使用的系列和封装,STM32微控制器通常只提供一个具有一个或两个专用输出的DAC,除了STM32F3系列中的少数零件编号实现两个DAC,第一个具有两个输出,另一个只有一个输出。STM32G4 系列的一些较新的 MCU 甚至提供多达 5 个独立的…

【数据分析】认清、明确

1、什么是数据分析。 - 通过对大量的数据进行科学的分析。 - 得出结论,提出建议,辅助公司企业的决策。2、数据分析分为几步。 - 1.明确目的! - 2.收集数据!自己的数据! 自动化采集的数据! - 3.数据处理! - 4.数据分析!数据分析(业务)数据挖掘(代码算法…

Sentinel服务保护

Sentinel是阿里巴巴开源的一款服务保护框架,目前已经加入SpringCloudAlibaba中。官方网站: home | Sentinel Sentinel 的使用可以分为两个部分: 核心库(Jar包):不依赖任何框架/库,能够运行于 Java 8 及以…

elasticsearch介绍和部署

1 elasticsearch介绍 Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎。可以很方便的使大量数据具有搜索、分析和探索的能力。充分利用Elasticsearch的水平伸缩性。Elasticsearch 的实现原理主要分为以下几个步骤,首先用户将数据提交到Elasticsea…

智能安全配电装置在高校实验室中的应用

​ 摘要:高校实验室是科研人员进行科学研究和实验的场所,通常会涉及到大量的仪器设备和电气设备。电气设备的使用不当或者维护不周可能会引发火灾事故。本文将以一起实验室电气火灾事故为例,对事故原因、危害程度以及防范措施进行分析和总结…

大语言模型---Llama模型文件介绍;文件组成

文章目录 1. 概要2. 文件组成 1. 概要 在使用 LLaMA(Large Language Model Meta AI)权重时,通常会涉及到与模型权重存储和加载相关的文件。这些文件通常是以二进制格式存储的,具有特定的结构来支持高效的模型操作。以下以Llama-7…

12 —— Webpack中向前端注入环境变量

需求:开发模式下打印语句生效,生产模式下打印语句失效 使用Webpack内置的DefinePlugin插件 const webpack require(webpack) module.exports { plugins: [ new webpack.DefinePlugin({ process.env.NODE_ENV:JSON.stringify(process.env.NODE_ENV) }…

【vba源码】导入excel批注信息

Hi,大家好呀! 又到了一周一分享的时间,上周繁忙的我都没有给大家直播,视频也没更新,那这周大家放心,都会给大家更新,今天我们来讲点啥呢?每周找优质的内容给大家更新是我最最痛苦的…

Java设计模式 —— Java七大设计原则详解

文章目录 前言一、单一职责原则1、概述2、案例演示 二、接口隔离原则1、概述2、案例演示 三、依赖倒转原则1、概述2、案例演示 四、里氏替换原则1、概述2、案例演示 五、开闭原则1、概述2、案例演示 六、迪米特法则1、概述2、案例演示 七、合成/聚合复用原则1、概述2、组合3、聚…

服务器数据恢复—DS5300存储硬盘指示灯亮黄灯的数据恢复案例

服务器存储数据恢复环境: 某单位一台某品牌型号为DS5300的服务器存储,1个机头4个扩展柜,底层是2组分别由数十块硬盘组建的RAID5阵列。存储系统上层一共分了11个卷。 服务器存储故障&分析: 存储设备上一组raid5阵列上的2块磁盘…

Cloud Native 云原生后端的开发注意事项

在云原生后端开发里,数据管理和存储这块得好好弄。数据库选型得综合考虑,像关系型数据有复杂查询需求就选 MySQL、PostgreSQL,海量非结构化数据就可以考虑 MongoDB、Cassandra 这些。设计数据库得遵循规范化原则,像设计电商订单表…

Mac vscode 激活列编辑模式

列编辑模式在批量处理多行文本时,非常有效,但 vscode 默认情况下,又没有激活,因此记录一下启动方法: 激活列编辑模式 然后就可以使用 Alt(Mac 上是 Option 或 Command 键) 鼠标左键 滑动选择了…

c#使用高版本8.0步骤

一、找到项目所在怒路&#xff0c;记事本打开.proj文件。 二、记事本打开此文件&#xff0c;<PropertyGroup>后面加入如下语句&#xff1a; <LangVersion>8.0</LangVersion> 关闭并保存。 根据提示全部重新加载即可。