react组件渲染性能优化之函数组件-memo使用

函数组件赋值相同的值视图不会渲染,类组件会,因为函数组件默认就阻止了
import {useState} from 'react'
export default function App() {const [counter, setCounter] = useState(1)console.log('App组件渲染了');return(<div><h1>{counter}</h1><button onClick={() => setCounter(1)}>+1</button></div>)
}
使用memo:memo避免父组件更新时,子组件跟着更新

示例:在 App 组件内部修改 counter,然后 counter2 作为 porps 传递给子组件,此时我们修改 counter 的状态时,子组件也会跟着更新,原因很简单,因为父组件更新了,那你子组件当然要重新更新。

App.jsx

import ChildCom from './components/ChildCom'
import {uesState} from 'react'
export default function App() {const [counter, setCounter] = useState(1)const [counter2, setCounter2] = useState(1)console.log("App 渲染了")return (<div><div>{counter}</div><button onClick={() => setCounter1(counter + 1)}>+1</button><ChildCom1 counter={counter2} setCounter={setCounter2} /></div>);
}

ChildCom.jsx

import React from "react"
function ChildCom(props) {console.log("ChildCom渲染了")return (<div><div>ChildCom1</div><div>{props.counter}</div></div>);
}export default ChildCom;

子组件的更新是没有必要的,因为传递给子组件的 props 并没有发生变化,我们就可以使用 React.memo,之后我们再更新 counter 时,由于传递给子组件的 counter2 这个 props 属性并没有变化,因此子组件不会更新。

import React from "react"
function ChildCom(props) {console.log("ChildCom渲染了")return (<div><div>ChildCom</div><div>{props.counter}</div></div>);
}export default React.memo(ChildCom);

React.memo只做浅比较,比如修改数组的话,子组件不会更新

import React, { useState } from 'react';
import ChildCom1 from "./components/ChildCom1"function App() {const [counter1, setCounter1] = useState(2);const [stu, setStu] = useState(["张三","李四"]);console.log("App 渲染了");function clickHandle(){setCounter1(counter1 + 1);stu.push("王武");setStu(stu)}return (<div><div>{counter1}</div><button onClick={clickHandle}>+1</button><ChildCom1 stu={stu} setStu={setStu} /></div>);
}export default App;
import React, {memo} from "react"
function ChildCom1(props) {console.log("ChildCom1 渲染了")const lis = props.stu.map((it,index)=>(<li key={index}>{it}</li>))return (<div><div>ChildCom1</div><ul>{lis}</ul></div>);
}export default memo(ChildCom1);

你需要对原数组进行深拷贝,然后再赋值给原数组

function clickHandle(){setCounter1(counter1 + 1);const arr = [...stu];arr.push("王五");setStu(arr)
}

默认情况下React.memo只会对对象做浅比较,如果你想要控制这个过程,请在第二个参数里面写上你自己的控制流程

function MyComponent(props) {/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {/*如果把 nextProps 传入 render 方法的返回结果与将 prevProps 传入 render 方法的返回结果一致则返回 true,否则返回 false*/
}
export default React.memo(MyComponent, areEqual);

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

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

相关文章

已解决java.lang.AbstractMethodError: 抽象方法错误的正确解决方法,亲测有效!!!

已解决java.lang.AbstractMethodError: 抽象方法错误的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 更新和重新编译依赖 确认类和接口的版本一致性 类加载器配置检查 总结 问题分析 java.lang.…

防城港知识付费系统,教学活动在设计中需要注意什么?如何进行教学设计?

老师们的教学能否让学生学到知识&#xff0c;让学生懂得书本上的道理&#xff0c;那么教学活动很重要&#xff0c;因此在设计的时候&#xff0c;一定要根据教学的目的以及孩子的特点来进行设计。 假设老师为学生进行美术绘画的教学活动设计&#xff0c;那么需要注意以下三个方面…

实现字符串复制(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int i 0;char a[100], b[100];//获取字符串&#xff1b;printf("请为数组a输入字符串…

使用模拟SPI接口驱动串行接口的LCD( STM32F4)

目录 概述 1. 硬件介绍 1.1 ST7796-LCD 1.2 MCU IO与LCD PIN对应关系 2 代码实现 2.1 STM32CubeMX 6.11生成工程 2.2 IO模拟SPI接口 2.3 实现LCD的驱动 3 测试 测试代码下载地址&#xff1a; stm32-f407-lcd-ft6336-proj资源-CSDN文库 gitee下载地址&#xff1a; h…

「PHP系列」PHP AJAX运用之数据库实例/XML实例

文章目录 一、AJAX 数据库实例1. 创建数据库和表2. HTML页面 (index.html)3. PHP脚本 (search.php)4. 配置和运行 二、AJAX XML实例1. PHP 脚本 (get_data.php)2. HTML 页面 (index.html)3. 配置和运行 三、相关链接 一、AJAX 数据库实例 一个PHP和AJAX结合使用来从数据库获取…

【Spring】验证 @ServerEndpoint 的类成员变量线程安全

文章目录 前言猜想来源验证方法Controller 的情况ServerEndpoint 的情况 后记 前言 最近有 websocket 的需求。探索 ServerEndpoint 的类成员变量特点。 这里类比 Controller 讨论 ServerEndpoint 类成员变量是否线程安全。 猜想来源 网上的教程大多数都这么展示程序&#…

祝融传火(试水)

一段时间没写代码了&#xff0c;今天试水一道直接寄了 #include <bits/stdc.h> using namespace std; typedef long long ll; ll n, m, h, w; ll a[1010][1010]; int main() {cin >> n >> m;for (int i 1; i < n; i){for (int j 1; j < m; j){cin &…

HR4988内置转换器和过流保护的微特步进电机驱动芯片

描述 HR4988是一款内部集成了译码器的微特步进电机驱动器&#xff0c;能使双极步进电机以全、半、1/4、1/8、1/16步进模式工作。步进模式由逻辑输入管脚MSx选择。其输出驱动能力达到32V和2A。 译码器是HR4988易于使用的关键。通过STEP管脚输入一个脉冲就可以使电机完成一次步进…

C语言——文件缓冲区

一、用户缓冲区和系统缓冲区 缓冲区的概念确实可以分为多个层次&#xff0c;其中最常见的两个层次是用户缓冲区和系统缓冲区。 这里的用户缓冲区和系统缓冲区都包括输入输出缓冲区。 1、用户缓冲区&#xff08;User-space Buffer&#xff09; 用户缓冲区是指由用户程序&…

202112青少年软件编程(Python)等级考试试卷(二级)

第 1 题 【单选题】 执行以下程序 a=[33,55,22,77]a.sort()for i in a:print(i)运行结果是?( ) A :33 55 22 77 B :22 33 55 77 C :55 33 22 77 D :77 55 33

群辉虚拟机安装openWRT作旁路由

最近在整活旁路由&#xff0c;基本就是要实现adguard和出国留学。openwrt这个的安装比较简单&#xff0c;就是先去找个镜像&#xff0c;然后导入即可。 我这里最后是去github上找了个大佬每天编译的地址链接。我用的是这个版本 1.下载解压得到img 下载完之后解压会得到一个…

paintevent讲解

Qt框架中的paintEvent是Qt中处理绘图的核心机制之一。每个使用Qt绘图的窗口部件&#xff08;QWidget或者从QWidget派生的类&#xff09;都会有一个paintEvent函数。这个函数是在部件需要重绘时被Qt框架自动调用的。 以下是paintEvent的工作原理及其在Qt中绘制过程中的作用&…

GDPU unity游戏开发 角色控制器与射线检测

在你的生活中&#xff0c;你一直扮演着你的角色&#xff0c;别被谁控制了。 小试 1. 创建一个角色控制器&#xff0c;通过键盘控制角色控制器的移动&#xff0c;角色控制器与家具发生碰撞后&#xff0c;通过Debug语句打印出被碰撞物体的信息(搜索OnControllerColliderHit的使用…

Hotcoin Research | 市场洞察:2024年5月6日-5月12日

加密货幣市场表现 加密货幣总市值为1.24万亿&#xff0c;BTC占比53.35%。 本周行情呈现先涨后跌的一种態势&#xff0c;5月6日-9日大盘持续下跌&#xff0c;周末为震荡行情。本周的比特幣现货ETF凈流入&#xff1a;1.1262亿美元&#xff0c;其中&#xff1a;美国ETF流入&…

1分钟快速上手枚举类

在Java中&#xff0c;枚举&#xff08;Enum&#xff09;是一种特殊的类&#xff0c;它包含了一组固定的常量。枚举类型在Java 5及以后的版本中引入&#xff0c;用于表示固定数量的常量集。下面是一个简单的枚举类的示例&#xff1a; public enum DayOfWeek {SUNDAY, MONDAY, …

keras机器学习三种模型典型案例

1, MLP模型预测 使用Keras进行数据预测的详细代码案例&#xff0c;包括模型构建、训练和预测的步骤&#xff0c;以及参数的解释。我们将使用一个简单的全连接神经网络&#xff08;也称为多层感知器&#xff0c;MLP&#xff09;来进行回归任务。这个案例将使用Keras&#xff0c…

数据结构===红黑树

文章目录 概要满足的条件基本思想操作红黑树的插入红黑树的删除遍历操作 代码C小结 概要 这篇说下红黑树 其实&#xff0c;红黑树&#xff0c;对于我来说&#xff0c;比较重要的几点。 满足几个条件基本思想插入删除 这些是很重要的。 满足的条件 红黑树需要满足什么条件呢&…

DE2-115开发板基于verilog和nioⅡ的流水灯实现

目录 一、 内容概要二、 实现2.1 基于Nios II软核的流水灯2.1.1 准备工作2.1.2 工程搭建2.1.3 硬件代码设计Ⅰ 连接IP核Ⅱ 编写代码Ⅲ 各种配置 2.1.4 软件代码设计Ⅰ 环境构建Ⅱ 编写代码 2.1.5 代码下载Ⅰ 硬件下载Ⅱ 软件下载 2.1.6 运行结果 2.2 Verilog流水灯 三、 心得体…

带你探索CA和SSL证书

目录 一、什么是CA&#xff1f; 二、什么是SSL证书&#xff1f; 三、SSL证书分类和文件种类&#xff1f; 3.1 证书的分类&#xff1a; 3.2证书格式&#xff1a; 四、SSL和TSL 五、PSK介绍 六、nginx配置介绍 一、什么是CA&#xff1f; CA是证书的签发机构&#xff0c;它是…

sumif的求和区域是文本格式怎么办?

sumif函数的求和区域是文本型数字&#xff0c;不更改源数据的情况下怎么求和呢&#xff1f; 一、不能使用SUMIF、SUMIFS函数 这两个函数的求和区域只能是引用&#xff0c;不能是公式运算的内存数组&#xff0c;因此不能用公式或运算符将求和区转换成数值。当引用来的数据是文本…