React re-render

What is?

react的渲染分为两个阶段:

  • render,组件第一次出现在屏幕上的时候触发
  • re-render, 组件第一次渲染之后的渲染

当app的数据更新时(用户手动更新、或异步请求)。

When?

re-render发生有四种可能:

  1. state改变: 所有re-render的根源
  2. 父组件渲染
  3. 上下文改变: 全局变量的改变会引起所有使用此变量的组件

Reconciliation

Reconciliation被称为diff算法,用来比较两个React元素树的差异,提高渲染的效率,尽可能复用现有的组件和DOM。

通过比较元素的type和key相同就复用,否则就销毁和新建。

Props

改变props需要父组件更新,子组件无法改变props

optimise

  • 在组件中创建组件,将会极大的拖慢渲染速度。可能会引起闪烁、非期望的状态重置、useeffect不触发依赖、失去焦点等问题。
  • 把state尽可能的移动到子组件中
  • 将A组件作为props传给B组件,B组件的渲染不会带来A的渲染
  • 使用React.memo,防止渲染

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

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

相关文章

06-Numpy基础-线性代数

线性代数(如矩阵乘法、矩阵分解、行列式以及其他方阵数学等)是任何数组库的重要组成部分。 NumPy提供了一个用于矩阵乘法的dot函数(既是一个数组方法也是numpy命名空间中的一个函数) x.dot(y)等价于np.dot(x, y) 符(…

2023年高教社杯 国赛数学建模思路 - 复盘:人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 描述 …

当数据库表中某个字段内容很大带来的影响

目录 影响原因 影响原因 当某个字段的内容比较大时,会导致查询缓慢,具体原因如下所示 磁盘IO成本增加:页块是数据库中数据的基本存储单位,通常一个页块的大小为16KB。如果查询的数据分布在不同的页块上,数据库需要进行…

MongoDB Long 类型 shell 查询

场景 1、某数据ID为Long类型,JAVA 定义实体类 Id Long id 2、查询数据库,此数据存在 3、使用 shell 查询,查不到数据 4、JAVA代码查询Query.query 不受任何影响 分析 尝试解决(一) long 在 mongo中为 int64 类型…

【android12-linux-5.1】【ST芯片】HAL移植后没调起来

ST传感器芯片HAL按官方文档移植后&#xff0c;测试一直掉不起来&#xff0c;加的日志没出来。经过分析&#xff0c;是系统自带了一个HAL&#xff0c;影响的。 按照官方文档&#xff0c;移植HAL后&#xff0c;在/device/<vendor\>/<board\>/device.mk*路径增加PROD…

英语常用的介词

一、常用介词 介词&#xff08;Preposition&#xff09;是英语语法中的一类词语&#xff0c;用于连接名词、代词或名词性短语与其他词语&#xff0c;以指示位置、方向、时间、关系等概念。介词的最原始含义通常与空间、时间、方向或关系有关。以下是一些常见的介词及其最原始的…

运维高级学习--Kubernetes(K8s 1.28.x)部署

一、基础环境配置&#xff08;所有主机操作&#xff09; 主机名规划 序号 主机ip 主机名规划1 192.168.1.30 kubernetes-master.openlab.cn kubernetes-master2 192.168.1.31 kubernetes-node1.openlab.cn kubernetes-node13 192.168.1.32 kubernetes-node2…

从零开始的Hadoop学习(二)| Hadoop介绍、优势、组成、HDFS架构

1. Hadoop 是什么 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。主要解决&#xff0c;海量数据的存储和海量数据的分析计算问题。广义上来说&#xff0c;Hadoop通常是指一个更广泛的概念—Hadoop生态圈。 2. Hadoop 的优势 高可靠性&#xff1a;Hadoop底层维护多…

基于Centos搭建k8s仓库

系统环境&#xff1a; Red Hat Enterprise Linux 9.1 (Plow) Kernel: Linux 5.14.0-162.6.1.el9_1.x86_64 主机名地址master192.168.19.128node01192.168.19.129node02192.168.19.130 目录 1、关闭防火墙&#xff0c;关闭SElinxu &#xff0c;开启时间同步服务 2、关…

动态表情包怎么制作?分享一个一键生成gif动图的方法

跟朋友聊天时&#xff0c;经常会用很多有趣的表情包给朋友回复&#xff0c;那么除了利用系统提供的gif动画包&#xff0c;怎么才能完成gif图片制作&#xff08;https://www.gif.cn&#xff09;呢&#xff1f;下面就为大家分享一个一键生成gif动图的方法&#xff0c;通过简单的操…

React 18 用 State 响应输入

参考文章 用 State 响应输入 React 控制 UI 的方式是声明式的。不必直接控制 UI 的各个部分&#xff0c;只需要声明组件可以处于的不同状态&#xff0c;并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。 声明式 UI 与命令式 UI 的比较 当设计 UI 交互时…

Python爬虫猿人学逆向系列——第六题

题目&#xff1a;采集全部5页的彩票数据&#xff0c;计算全部中奖的总金额&#xff08;包含一、二、三等奖&#xff09; 地址&#xff1a;https://match.yuanrenxue.cn/match/6 本题比较简单&#xff0c;只是容易踩坑。话不多说请看分析。 两个参数&#xff0c;一个m一个f&…

软考高级系统架构设计师系列之:论文典型试题写作要点和写作素材总结系列文章四

软考高级系统架构设计师系列之:论文典型试题写作要点和写作素材总结系列文章四 一、论软件的静态演化和动态演化及其应用1.论文题目2.写作要点和写作素材二、论大规模分布式系统缓存设计策略1.论文题目2.写作要点和写作素材三、论基于REST服务的Web应用系统设计1.论文题目2.写…

SpringBoot原理

一、Bean原理 1、配置文件的优先级 SpringBoot项目当中支持的三类配置文件&#xff1a; ​ - application.properties - application.yml - application.yaml 配置文件优先级排名&#xff08;从高到低&#xff09;&#xff1a; 1. properties配置文件 2. yml配置文件 3. yaml…

【PHP】PHP变量

1、变量介绍 PHP 是一门弱类型语言&#xff0c;不必向 PHP 声明该变量的数据类型。PHP 会根据变量的值&#xff0c;自动把变量转换为正确的数据类型。在强类型的编程语言中&#xff0c;必须在使用变量前先声明&#xff08;定义&#xff09;变量的类型和名称。 <?php $x5;…

代码随想录算法训练营day46 | LeetCode 139. 单词拆分

139. 单词拆分&#xff08;题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台&#xff09; 思路&#xff1a;又是一种不同形式的背包问题&#xff0c;求一个字符串是否能由字符串数组中的若干字符排列组成。首相想到排列&#xff0…

cuda11.1和cuDNN v8.8.1的安装目录问题

cuda的不同版本文件路径是不一致的&#xff0c;在cuda10.1中&#xff0c;配置cudnn的文件路径是&#xff1a; sudo cp cuda/include/cudnn.h /usr/local/cuda-10.1/include/ sudo cp -P cuda/lib64/libcudnn* /usr/local/cuda-10.1/lib64/但是在cuda11.1中&#xff0c;文件路径…

【宝藏系列】一文带你梳理 Linux 的五种 IO 模型

【宝藏系列】一文带你梳理 Linux 的五种 IO 模型 文章目录 【宝藏系列】一文带你梳理 Linux 的五种 IO 模型&#x1f468;‍&#x1f3eb;前言1️⃣用户态和核心态1️⃣1️⃣用户态和核心态的切换 2️⃣进程切换3️⃣进程阻塞4️⃣文件描述符(fd, File Descriptor)5️⃣缓存I/O…

【笔记】MySQL行转列函数

GROUP_CONCAT()函数 创建表person_info&#xff0c;并插入数据 CREATE TABLE person_info (id bigint(20) NOT NULL AUTO_INCREMENT,name varchar(100) DEFAULT NULL,family varchar(100) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT8 DEFAULT CHARSETutf8;…

以太坊硬分叉后的可重入漏洞攻击

以太坊硬分叉后的可重入漏洞攻击 以太坊君士坦丁堡升级将降低部分 SSTORE 指令的 gas 费用。然而&#xff0c;这次升级也有一个副作用&#xff0c;在 Solidity 语言编写的智能合约中调用 address.transfer()函数或 address.send()函数时存在可重入漏洞。在目前版本的以太坊网络…