react之Component存在的2个问题

问题

  • 只要执行setState(),即使不改变状态数据,组件也会重新render()
  • 只当前组件重新render(),就会自动重新render子组件

原因

  • Component中的shouldComponentUpdate()总是返回true

思路

  • 只有当组件的state或props数据发生改变时才重新render()

解决

  • 重写shouldComponentUpdate()方法:比较新旧state或props数据,如果有变化才返回true,如果没有返回false
  • 使用PureComponent:PureComponent重写了shouldComponentUpdate()方法,只有state或props数据有变化才返回true。(只进行state和props数据的浅比较,如果只是数据对象数据变了,返回false)

案例

import React, { PureComponent } from 'react'
import './index.css'export default class Parent extends PureComponent {state = { carName: '奔驰' }changeCar = ()=>{this.setState({carName:'五菱'})}// shouldComponentUpdate(nextProps,nextState){//     console.log('this.state:',this.state,'this.props:',this.props,'nextProps:',nextProps,'nextState:',nextState);//     return !(this.state.carName === nextState.carName)// }render() {console.log('Parent-render');const { carName } = this.statereturn (<div className='parent'><h5>parent组件</h5><span>我的车是:{carName}</span>&nbsp;&nbsp;&nbsp;<button onClick={this.changeCar}>换车</button><Child car='木马'></Child></div>)}
}class Child extends PureComponent {// shouldComponentUpdate(nextProps,nextState){//     console.log('this.state:',this.state,'this.props:',this.props,'nextProps:',nextProps,'nextState:',nextState);//     return !(this.props.car === nextProps.car)// }render() {console.log('Child-render');return (<div className='child'><h5>child组件</h5><div>Child组件从Parent组件拿到的车是:{this.props.car}</div></div>)}
}	

样式文件:

.parent{width: 500px;background-color: aqua;padding: 20px;
}.child{width: 90%;background-color:bisque;padding: 20px;margin-top: 30px;
}

效果实现:
在这里插入图片描述

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

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

相关文章

听GPT 讲Rust源代码--library/core/src

题图来自 The first unofficial game jam for Rust lang![1] File: rust/library/core/src/hint.rs rust/library/core/src/hint.rs文件的作用是提供了一些用于提示编译器进行优化的函数。 在Rust中&#xff0c;编译器通常会根据代码的语义进行自动的优化&#xff0c;以提高程序…

React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass less】(十三)

文件目录 Proxying in Development http-proxy-middleware fetch_get fetch 是否成功 axios 全局处理 antd UI库 更改主题 使用css module的情况下修改第三方库的样式 支持sass & less Proxying in Development 在开发模式下&#xff0c;如果客户端所在服务器跟后…

手写链表C++

目录 一、链表基本概念以及注意事项 1.1 构造函数与析构函数 1.2 插入元素 1.3 重载运算符 二、小结 一、链表基本概念以及注意事项 在工作中&#xff0c;链表是一种常见的数据结构&#xff0c;可以用于解决很多实际问题。在学习中&#xff0c;掌握链表可以提高编程能力和…

Flutter IOS 前后台切换主题自动变化的问题

BUG 触发条件 设备 IOS 15 模拟器GetX 实现换肤GetMaterialApp 里面配置好 theme和darkTheme使用GetView和GetController进行开发 此时如果把App前后台切换&#xff0c;使用Obx包括起来的内容会跟谁异常主题变换&#xff0c;未使用Obx的颜色不会变化。 解决路径 首先在获取 …

华为交换机端口 access、trunk和hybrid收发数据规则

文章目录 1. 三个端口类型处理数据帧的汇总表2. access 端口3. trunk端口4. Hybrid 端口&#xff08;交换机的默认端口类型&#xff09;5.常用命令 1. 三个端口类型处理数据帧的汇总表 端口类型收到不带VLAN标签的帧的处理规则收到带VLAN标签的帧的处理规则发送帧时的处理规则…

大语言模型的关键技术

大语言模型的关键技术&#xff1a; 经过漫长的发展&#xff0c;LLM 进化到了当前的状态——通用且有能力的学习者。在这个过程中&#xff0c;人们提出了许多重要的技术&#xff0c;大大提升了 LLM 的能力。在此&#xff0c;我们简要列举了几种重要的技术&#xff0c;这些技术&a…

平面运动机器人的传感器外参标定

简述 对任意两个传感器进行外参标定可以采用手眼标定算法来完成&#xff0c;但是&#xff0c;传统手眼标定算法对于运动具有一定的要求&#xff0c;可以证明&#xff0c;至少需要两个以上轴角方向不同的旋转运动才可以正确估计出外参旋转&#xff0c;因此&#xff0c;如果使用…

54基于matlab的包络谱分析

基于matlab的包络谱分析&#xff0c;目标信号→希尔伯特变换→得到解析信号→求解析信号的模→得到包络信号→傅里叶变换→得到Hilbert包络谱&#xff0c;包络谱分析能够有效地将这种低频冲击信号进行解调提取。程序已调通&#xff0c;可直接运行。 54matlab包络谱分析信号解调…

​LeetCode解法汇总187. 重复的DNA序列

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; DNA序列 由…

轻量日志管理方案-[EFK]

使用FileBeat进行日志文件的数据收集&#xff0c;并发送到ES进行存储&#xff0c;最后Kibana进行查看展示&#xff1b; 这个应该是最简单&#xff0c;轻量的日志收集方案了。 最总方案为&#xff1a;FileBeatESKibana ; 【Kibana过于强大&#xff0c;感觉可以无限扩展】 文章目…

SpringBoot 全局日期时间格式转化

一、添加注解 在属性上加上注解&#xff0c;对日期进行格式化 import com.fasterxml.jackson.annotation.JsonFormat;JsonFormat(pattern "yyyy-MM-dd HH:mm:ss") private LocalDateTime createTime;二、全局配置 a. 在 WebMvcConfiguration 中扩展 SpringMVC 的消息…

msvcp140_CODECVT_IDS.dll丢失怎么办?msvcp140_CODECVT_IDS.dll丢失5个解决办法详解

首先&#xff0c;我要讲述一下我是如何遇到这个问题的。那时候&#xff0c;我正在打开一个电脑的应用程序&#xff0c;使用软件&#xff08;ps&#xff09;进行编程。在打开软件时候&#xff0c;突然发现程序无法正常启动&#xff0c;弹出了一个错误提示框&#xff0c;显示msvc…

Hive 知识点八股文记录 ——(一)特性

Hive通俗的特性 结构化数据文件变为数据库表sql查询功能sql语句转化为MR运行建立在hadoop的数据仓库基础架构使用hadoop的HDFS存储文件实时性较差&#xff08;应用于海量数据&#xff09;存储、计算能力容易拓展&#xff08;源于Hadoop&#xff09; 支持这些特性的架构 CLI&…

Delphi 12 重返雅典 (RAD Studio 12)

RAD Studio 12 的新功能&#xff1a; 以最新的平台版本为目标&#xff01; RAD Studio 12 提供对 iOS 17&#xff08;仅适用于 Delphi&#xff09;、Android 14 和 macOS Sonoma 的官方支持。RAD Studio 12 还支持 Ubuntu 22 LTS 和 Windows Server 2022。 Delphi 源代码的多…

广州华锐互动:VR互动实训内容编辑器助力教育创新升级

随着科技的飞速发展&#xff0c;教育领域也正在经历一场深刻的变革。其中&#xff0c;虚拟现实(VR)技术为教学活动提供了前所未有的便利和可能性。在诸多的VR应用中&#xff0c;VR互动实训内容编辑器无疑是最具潜力和创新性的一种。广州华锐互动开发的这款编辑器以其独特的功能…

设计模式-解释器模式(Interpreter)

设计模式-解释器模式&#xff08;Interpreter&#xff09; 一、解释器模式概述1.1 什么是解释器模式1.2 简单实现解释器模式1.3 使用解释器模式的注意事项 二、解释器模式的用途三、解释器模式实现方式3.1 基于递归下降实现解释器模式3.2 基于LL(1)文法实现解释器模式3.3 基于A…

Java编写简易rabbitmq生产者与消费者

一、前言 开发时经常与其它系统用rabbitmq对接&#xff0c;当需要自测时&#xff0c;还是自己写rabbitmq生产者、消费者自测方便些。 下面总结下不用框架、使用java编写简易rabbitmq的方法。 二、代码 1.导入jar包 (1)如果是maven&#xff0c;那就用 <dependency>&…

百度智能云正式上线Python SDK版本并全面开源!

文章目录 1. SDK的优势2. 千帆SDK&#xff1a;快速落地LLM应用3. 如何快速上手千帆SDK3.1 SDK快速启动3.2 SDK进阶指引3.3 通过Langchain接入千帆SDK 4. 开源社区 百度智能云千帆大模型平台再次升级&#xff01;在原有API基础上&#xff0c;百度智能云正式上线Python SDK&#…

直播会议一体机安卓主板_5G智能会议一体机双屏异显设计

5G直播会议一体机主板是专门为支持音视频输入输出而设计的&#xff0c;内置有安卓13系统&#xff0c;可兼容多种直播和会议软件。该产品可广泛应用于智能会议一体机、便携式直播设备、录播导播、无人机直播以及视频传输等多个领域。 这款主板采用了国产6纳米旗舰芯片紫光展锐T8…

虚幻C++基础 day4

虚幻中的UI 虚幻中的比较常用的UI&#xff1a;Widget Blueprint又称UMG虚幻中的两种布局&#xff1a; 网格布局锚布局 创建Widget Blueprint 网格布局 有点类似Qt中的网格布局&#xff0c;将UI面板进行行列切分Horizontal Box&#xff1a;水平分布Vertical Box&#xff1a;…