React PureComponent 和 React.memo()区别

1 注意

● PureComponent和memo仅作为性能优化的方式存在
● 不要依赖它来阻止渲染,会产生BUG
● PureComponnet 和memo 都是通过对 props 值的浅比较来决定该组件是否需要更新的。

2 PureComponent 和React.memo() 区别

PureComponent 和React.memo()都是React优化组件性能的方式。

  1. PureComponent是一个类组件,它通过比较当前和之前的props和state值来检查是否需要重新渲染。如果state 和 props 没有发生变化,则组件不会重新渲染。在PureComponent内部,它实现了一个shouldComponentUpdate方法,用于判断组件是否需要更新。这个方法默认会对组件的state和props进行浅比较,如果没有变化,那么就会返回false,阻止重新渲染。
  2. React.memo()是一个高阶函数,它接受一个组件并且返回一个新的组件,它通过浅比较当前和之前的props值来判断是否应该重新渲染组件。它提供第二个参数来自定义比较逻辑,可以用在深层次比较上。如果props没有变化,则组件不会重新渲染。

3 用法

3.1 PureComponent

import React from './react';
import ReactDOM from './react-dom';
class Counter extends React.PureComponent{
}
ReactDOM.render(<Counter />, document.getElementById('root'));

3.2 React.memo()

import React from 'react';
import ReactDOM from 'react-dom';
function SubCounter(props){return <div>{props.count}</div>
}
let MemoSubCounter = React.memo(SubCounter);
console.log(MemoSubCounter);
class Counter extends React.Component{state = {number:0}inputRef = React.createRef();handleClick = (event)=>{let amount = Number(this.inputRef.current.value);this.setState({number:this.state.number+amount});}render(){console.log('Counter render');return (<div><p>{this.state.number}</p><input ref={this.inputRef}/><button onClick={this.handleClick}>+</button><MemoSubCounter count={this.state.number}/></div>)}
}
ReactDOM.render(
<Counter />
, document.getElementById('root'));

打印的memo
在这里插入图片描述

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

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

相关文章

如何使用 OpenAI Sora?

Sora - 探索AI视频模型的无限可能 OpenAI 的最新项目名为 Sora&#xff0c;这是一个强大的文本到视频模型&#xff0c;可以根据简单的文本提示生成令人兴奋的视频。这个尖端的人工智能模型允许用户描述一个场景&#xff0c;例如“卡通袋鼠跳迪斯科舞”&#xff0c;Sora将生成与…

【C语言基础】:操作符详解(二)

文章目录 操作符详解一、上期扩展二、单目操作符三、逗号表达式四、下标访问[]、 函数调用()五、结构成员访问操作符六、操作符的属性&#xff1a;优先级、结合性1. 优先级2. 结合性 操作符详解 上期回顾&#xff1a;【C语言基础】&#xff1a;操作符详解(一) 一、上期扩展 …

Spring Security源码学习

Spring Security本质是一个过滤器链 过滤器链本质是责任链设计模型 1. HttpSecurity 【第五篇】深入理解HttpSecurity的设计-腾讯云开发者社区-腾讯云 在以前spring security也是采用xml配置的方式&#xff0c;在<http>标签中配置http请求相关的配置&#xff0c;如用户…

unity Android包安装运行后提示:此要用与最新版Android不兼容。

问题 unity 打包apk&#xff0c;安装运行后提示**“此要用与最新版Android不兼容。…” 解决办法 参考文献 https://blog.csdn.net/liweidecsdn/article/details/135997780

【软件测试】--功能测试2--常用设计测试用例方法

一、解决穷举场景 重点&#xff1a;使用等价类划分法 1.1 等价类划分法 重点&#xff1a;有效等价和单个无效等价各取1个即可。 步骤&#xff1a;1、明确需求2、确定有效和无效等价3、根据有效和无效造数据编写用例 1.2 案例&#xff08;qq合法验证&#xff09; 需求&#xff…

【MySQL】学习和总结联合查询

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-OPj5g6evbkm5ol0U {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

番外篇 | YOLOv5+DeepSort实现行人目标跟踪检测

前言:Hello大家好,我是小哥谈。DeepSort是一种用于目标跟踪的深度学习算法。它结合了目标检测和目标跟踪的技术,能够在视频中准确地跟踪多个目标,并为每个目标分配一个唯一的ID。DeepSort的核心思想是将目标检测和目标跟踪两个任务进行联合训练,以提高跟踪的准确性和稳定性…

ChatGPT 国内快速上手指南

ChatGPT简介 ChatGPT是由OpenAI团队研发的自然语言处理模型&#xff0c;该模型在大量的互联网文本数据上进行了预训练&#xff0c;使其具备了深刻的语言理解和生成能力。 GPT拥有上亿个参数&#xff0c;这使得ChatGPT在处理各种语言任务时表现卓越。它的训练使得模型能够理解上…

2024水科技大会暨技术装备成果展览会——高品质供水和饮用水水源安全保障论坛

供水与饮水安全直接关系到人民群众的生活与健康&#xff0c;切实做好城市供水与饮水安全保障工作&#xff0c;是把以人为本真正落到实处的一项紧迫任务。近年来&#xff0c;中央和地方加大了城乡供水与饮水安全保障工作的力度&#xff0c;对标最优质供水城市建设要求&#xff0…

相机的常见参数分析

1. 像元尺寸&#xff1a; 是指数字成像系统中&#xff0c;每个像素的物理大小&#xff0c;上图中相机单个像素的物理尺寸时2.4um 2、图像的像素&#xff1a; 图像是由像素所组成的&#xff0c;像素的多少表明摄像机所含有的感光元件的多少。像素是指一张图像中所有的像素数之…

【pytorch】常用代码

文章目录 条件与概率torch.tensor()torch.rand()torch.randn()torch.randint()torch.multinominal() 逻辑运算torch.argmax()torch.max()torch.sum()torch.tanh()torch.pow() 功能性操作 torch.nn.functionalF.normalize()F.elu()F.relu()F.softmax() 张量计算torch.zeros()tor…

python Matplotlib Tkinter-->tab切换1

环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pillow 10.1.0 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk import tkinter as tk import tkinter.messagebox as messagebox import …

实验室储样瓶耐强酸强碱PFA材质试剂瓶适用新材料半导体

PFA&#xff0c;全名可溶性聚四氟乙烯&#xff0c;试剂瓶又叫取样瓶、样品瓶、广口瓶、储样瓶等。主要用于痕量分析、同位素分析等实验室&#xff0c;广泛应用于新兴的半导体、新材料、多晶硅、硅材、微电子等行业。 规格参考&#xff1a;30ml、60ml、100ml、125ml、250ml、30…

MATLAB环境下一种改进的瞬时频率(IF)估计方法

相对于频率成分单一、周期性强的平稳信号来说&#xff0c;具有非平稳、非周期、非可积特性的非平稳信号更普遍地存在于自然界中。调频信号作为非平稳信号的一种&#xff0c;由于其频率时变、距离分辨率高、截获率低等特性&#xff0c;被广泛应用于雷达、地震勘测等领域。调频信…

三、系统知识笔记-计算机系统基础知识

一、计算机系统概述 计算机系统是指用于数据管理的计算机硬件、软件及网络组成的系统。 它是按人的要求接收和存储信息&#xff0c;自动进行数据处理和计算&#xff0c;并输出结果信息的机器系统。 冯诺依曼体系计算机结构&#xff1a; 1.1计算机硬件组成 冯诺依曼计算机结…

pclpy 最小二乘法拟合平面

pclpy 最小二乘法拟合平面 一、算法原理二、代码三、结果1.左边原点云、右边最小二乘法拟合平面后点云投影 四、相关数据 一、算法原理 平面方程的一般表达式为&#xff1a; A x B y C z D 0 ( C ≠ 0 ) Ax By Cz D 0 \quad (C\neq0) AxByCzD0(C0) 即&#xff1a; …

Elasticsearch:了解人工智能搜索算法

作者&#xff1a;来自 Elastic Jessica Taylor, Aditya Tripathi 人工智能工具无处不在&#xff0c;其原因并不神秘。 他们可以执行各种各样的任务并找到许多日常问题的解决方案。 但这些应用程序的好坏取决于它们的人工智能搜索算法。 简单来说&#xff0c;人工智能搜索算法是…

QT信号槽实现分析

1.宏定义 qt中引入了MOC来反射&#xff0c;编译阶段变成 MOC–>预处理–>编译–>汇编–>链接 1-1、Q_OBJECT 这个宏定义了一系列代码&#xff0c;包括元对象和处理的函数 #define Q_OBJECT \public: \QT_WARNING_PUSH \Q_OBJECT_NO_OVERRIDE_WARNING \static c…

位运算03 不用加号的加法[C++]

图源&#xff1a;文心一言 上机题目练习整理&#xff0c;位运算&#xff0c;供小伙伴们参考~&#x1f95d;&#x1f95d; 网页版目录在页面的右上角↗~&#x1f95d;&#x1f95d; 第1版&#xff1a;在力扣新手村刷题的记录~&#x1f9e9;&#x1f9e9; 编辑&#xff1a;梅…

二叉树与堆

目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示 1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1概念 2.2现实中的二叉树&#xff1a; 2.3 特殊的二叉树&#xff1a; 2.4 二叉树的性质 2.5 二叉树的…