性能优化-react阻止子组件重渲染

因为父组件的状态变更会触发子组件的渲染,可以用shouldComponentUpdate或memo来阻止。下面就来介绍这两种方法。

类组件-shouldComponentUpdate

注:变化需要在render中打印,在component中检测不到
核心代码: 子组件中用shouldComponentUpdate防止子组件重渲染

// 性能优化
shouldComponentUpdate(nextProps, nextState) {if (nextProps.num === this.props.num) return false;return true;
}

完整例子
父组件

export default class Index extends Component {state = {num1: 111,num2: 222,};render() {return (<div><button onClick={() => this.setState({ num1: this.state.num1 + 1 })}>修改num1</button><button onClick={() => this.setState({ num2: this.state.num2 + 1 })}>修改num2</button>// 子组件<Schild num={this.state.num1} /></div>);}
}

子组件

import { Component } from "react";
export default class Index extends Component {constructor(props) {super(props);}// 性能优化shouldComponentUpdate(nextProps, nextState) {if (nextProps.num === this.props.num) return false;return true;}render() {// 父组件的状态变更会触发子组件的渲染console.log("渲染子组件");return (<div><h3>s子组件</h3><div>来自父组件的num1:{this.props.num}</div></div>);}
}

函数组件-memo

可阻止子组件页面重渲染
核心代码:export default memo(Child);
详细代码
子组件

import { useEffect, memo } from "react";const Child = ({ num }) => {useEffect(() => {console.log("渲染子组件");});return (<div><h1>我是子组件</h1><div>来自父组件的参数:{num}</div></div>);
};
export default memo(Child);

父组件

import { useEffect, useState, useMemo } from "react";import Child from "./child";
const Home = () => {const [num1, setNum1] = useState(111);const [num2, setNum2] = useState(222);return (<div><h1>性能优化-usemome</h1><div>num1: {num1};num2: {num2};</div><button onClick={() => setNum1(num1 + 1)}>修改num1</button><button onClick={() => setNum2(num2 + 1)}>修改num2</button><Child num={num1} /></div>);
};
export default Home;

好了,以上就是优化的两种方案。
在这里插入图片描述

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

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

相关文章

图像的缩放之c++实现(qt + 不调包)

1.基本原理 图像的缩放一般使用插值算法&#xff0c;而本章将介绍两种常用插值算法&#xff1a;最临近插值法和双线性插值法 1.最临近插值法 将浮点数的位置坐标&#xff0c;进行四舍五入找到原图像的整型坐标即可&#xff0c;具体操作可见下面的公式&#xff0c;其中原图像坐标…

Vue.js2+Cesium1.103.0 八、动态光墙效果

Vue.js2Cesium1.103.0 八、动态光墙效果 Demo <template><divid"cesium-container"style"width: 100%; height: 100%;"/> </template><script> /* eslint-disable no-undef */ import /utils/dynamicWallMaterialProperty.js exp…

简单程度与自负是否相关?探索STM32的学习价值

事实上&#xff0c;无论STM32是否简单并不重要&#xff0c;更重要的是我们能通过学习STM32获得什么。通过STM32&#xff0c;我们可以学习到许多知识&#xff1a;如果我们制作一个键盘或鼠标&#xff0c;我们可以学习USB协议。如果我们制作一个联网设备&#xff0c;我们需要学习…

Go http.Handle和http.HandleFunc的路由问题

Golang的net/http包提供了原生的http服务&#xff0c;其中http.Handle和http.HandleFunc是两个重要的路由函数。 1. 函数介绍 http.HandleFunc和http.Handle的函数原型如下&#xff0c;其中DefaultServeMux是http包提供的一个默认的路由选择器。 func HandleFunc(pattern st…

Docker启动一个Centos镜像

搜索可用的centos的docker镜像 docker search <image>&#xff1a;在docker index中搜索imagedocker search centos 下载centos镜像&#xff08;拉取镜像&#xff09; docker pull centos:latest查看镜像docker images&#xff1a;列出imagesdocker images -a&#xff…

激光与光电子学进展, 2023 | 非视域成像技术研究进展

注1&#xff1a;本文系“计算成像最新论文速览”系列之一&#xff0c;致力于简洁清晰地介绍、解读非视距成像领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; CVPR, ICCV, ECCV, SIGGRAPH, TPAMI; Light‑Science & Applications, Optica 等)。 本次介绍的论…

stm32 cubemx can通讯(1)回环模式

文章目录 前言一、cubemx配置二、代码1.过滤器的配置&#xff08;后续会介绍&#xff09;2.main.c3.主循环 总结 前言 介绍使用stm32cubemx来配置can&#xff0c;本节讲解一个简答&#xff0c;不需要stm32的can和外部连接&#xff0c;直接可以用于验证的回环模式。 所谓回环模…

Mysql按小时进行分组统计数据

目录 前言 按1小时分组统计 按2小时分组统计 按X小时分组统计 前言 统计数据时这种是最常见的需求场景&#xff0c;今天写需求时发现按2小时进行分组统计也特别简单&#xff0c;特此记录下。 按1小时分组统计 sql&#xff1a; select hour(pass_time) …

灵眸:2023年上半年中国主要消费领域宏观数据概览报告(附下载)

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 2023年上半年中国社会消费品零售总额22.8万化元。2023年上半年中国电商实体商品消费总额达6.1万亿元&#xff0c;同比增长10.8%。2023年上半年中国餐饮、汽车消费均超2万化元&#xff0c;餐饮、金银珠…

如何预防ssl中间人攻击?

当我们连上公共WiFi打开网页或邮箱时&#xff0c;殊不知此时可能有人正在监视着我们的各种网络活动。打开账户网页那一瞬间&#xff0c;不法分子可能已经盗取了我们的银行凭证、家庭住址、电子邮件和联系人信息&#xff0c;而这一切我们却毫不知情。这是一种网络上常见的“中间…

Mysql整理

一、基础概念 1. 索引 之前的文章已经写过了&#xff0c;比较细 数据库索引含义,类别,用法,创建方式_表结构加树形id和索引是为什么_马丁•路德•王的博客-CSDN博客 简单概括就是在表的某个列或者多个列或者联合表的时候加个索引&#xff0c;类似图书馆书本的索引编号&…

PK Nounique CASCADE DROP INDEX keep index

Explicit Control Over Indexes when Creating, Disabling, or Dropping PK/Unique Constraints (Doc ID 139666.1)​编辑To Bottom PURPOSEIn Oracle 9i, the DBA has an explicit control over how indexes are affectedwhile creating, disabling, or dropping Primary Ke…

AI Deep Reinforcement Learning Autonomous Driving(深度强化学习自动驾驶)

AI Deep Reinforcement Learning Autonomous Driving&#xff08;深度强化学习自动驾驶&#xff09; 背景介绍研究背景研究目的及意义项目设计内容算法介绍马尔可夫链及马尔可夫决策过程强化学习神经网络 仿真平台OpenAI gymTorcs配置GTA5 参数选择行动空间奖励函数 环境及软件…

【雕爷学编程】Arduino动手做(13)---TTP223B电容式触摸模块之通过串口监视器检测电容触摸键的状态与控制继电器

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

C语言学习笔记 使用vscode外部console出现闪退-12

前言 在使用vscode的外部console时&#xff0c;会出现闪退现象&#xff0c;这是因为程序运行结束后&#xff0c;系统自动退出了终端&#xff08;终端机制决定的&#xff09;。我们可以在C程序结束后&#xff0c;使用system函数来暂停DOS终端系统&#xff0c;这样就可以完整地看…

SAP Fiori 问题收集

事务代码篇 启动工作台&#xff1a;/N/UI2/FLP 错误日志&#xff1a; /n/IWFND/ERROR_LOG 服务清单&#xff1a; /n/IWFND/MAINT_SERVICE 创建语义对象&#xff1a;/N/UI2/SEMOBJ 创建目录&#xff1a;/N/UI2/FLPD_CONF&#xff08;cross-client&#xff09;或 /N/UI2…

爬虫018_urllib库_cookie反爬_post请求百度翻译获取百分翻译内容_以及详细翻译内容---python工作笔记037

然后我们来看如何用urllib发送post请求,这里我们 用百度翻译为例 我们翻译一个spider,然后我们看请求,可以看到有很多 找到sug这个 可以看到这里的form data,就是post请求体中的内容 然后我们点击preview其实就是 返回的实际内容 然后请求方式用的post 然后我们把上面的信息…

maven是什么?安装+配置

目录 1.什么是maven&#xff1f; 1.2.maven的核心功能是什么&#xff1f; 2.Maven安装配置 2.1Maven的安装 2.2Maven环境配置 1.配置 MAVEN_HOME &#xff0c;变量值就是你的 maven 安装的路径&#xff08;bin 目录之前一级目录&#xff09; 2.将MAVEN_HOME 添加到Path系…

Groovy语法

工程目录 请点击下面工程名称&#xff0c;跳转到代码的仓库页面&#xff0c;将工程 下载下来 Demo Code 里有详细的注释 代码&#xff1a;LearnGroovy 参考文献 配置Groovy开发环境(Windows)IntelliJ IDEA创建第一个Groovy工程基于IntelliJ IDEA创建第一个Groovy工程

Ubuntu18.04版本安装ROS及出现错误的处理方法

前面的文章是在已安装的ROS基础上做的一些应用&#xff0c;这里我们从零开始安装ROS机器人操作系统。 机器人操作系统(Robot Operating System,ROS)是一个开发机器人软件的框架&#xff0c;里面包含了一系列的工具&#xff0c;库和惯例&#xff0c;目的在于简化在大量不同种类机…