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…

mock.js:定义、应用场景、安装、配置、使用

前言:什么是mock.js? 作为一个前端程序员,没有mockjs你不感觉很被动吗?你不感觉你的命脉被后端那个男人掌握了吗?所以,我命由我不由天!学学mock.js吧! mock.js 是一个用于生成随机…

IDEA2023 创建SpringBoot项目(一)

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

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

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

LSTM原理解读与实战

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

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

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

Go语言switch语句

在Go语言中,switch,是一个高度灵活,其功能强大的控制结构,相比较Java中的switch,更受到语言重视。 目录 1.基础用法2.多值匹配3.不指定表达式的 switch4.使用 fallthrough 强制进入下一个分支5.使用类型断言的 switch…

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

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

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

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

MIT6.S081 Lab2: system calls翻译

Lab2: system calls 在上一个实验室中,您使用系统调用编写了一些实用程序。在本实验室中,您将向xv6添加一些新的系统调用,这将帮助您了解它们是如何工作的,并使您了解xv6内核的一些内部结构。您将在以后的实验室中添加更多系统调…

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…

什么是GraphQL,有什么特点

什么是GraphQL? GraphQL 是一种用于 API(应用程序编程接口)的查询语言,由 Facebook 在 2012 年开发,并于 2015 年开源。它提供了一种更高效、强大的方式来获取和操作数据,与传统的 RESTful API 相比&#…

双指针算法详解:原理、应用场景及代码示例

文章目录 双指针算法概述主要应用场景及实现思路1. 数组排序后的两数之和2. 链表中环的检测3. 滑动窗口4. 合并两个有序数组5. 移除数组中的重复元素 总结 双指针算法概述 原理: 双指针算法的核心在于使用两个指针遍历数据结构,而不是单个指针。这种方法…

vue2-代理服务器插槽

解决跨域问题 配置代理服务器 代理服务器位于前端应用(客户端)和真实的后端服务器之间。当配置了代理服务器后,前端应用的请求不再直接发送到后端服务器,而是发送到代理服务器。代理服务器在接收到请求后,会根据预先配置的规则将请求转发到真…

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

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