react中如何避免父子组件同时渲染(memo的使用)

1.需求说明

react的渲染机制是父子组件同时渲染,不管子组件是否有变化只要父组件重新渲染了子组件就跟着重新渲染。为了避免不必要的消耗,我们可以使用memo钩子函数

2.使用memo前展示

import { memo,useState } from "react"function Son(){console.log("我是子组件");return (<div>我是子组件</div>)
}function Memo(){const [text,setText] = useState('')function kanno(){setText('欢迎kanno')}return (<div><button onClick={kanno}>我是父组件</button><div>{text}</div><Son/></div>)
}export default Memo

3.使用memo后展示

import { memo,useState } from "react"const MemoSon = memo(function Son(){console.log("我是子组件");return (<div>我是子组件</div>)
})function Memo(){const [text,setText] = useState('')function kanno(){setText('欢迎kanno')}return (<div><button onClick={kanno}>我是父组件</button><div>{text}</div><MemoSon/></div>)
}export default Memo

4.拓展补充

基本数据类型只要传递给子组件的值没有变化就不会触发子组件的重新渲染;

引用数据类型不管传递的值前后是否一样也会触发子组件的重新渲染,因为引用数据类型每次在父组件重新渲染时引用地址都发生了变化,也就导致子组件的重新渲染。可以使用useMemo钩子函数避免,但使用场景较小。

import { memo,useState } from "react"const MemoSon = memo(function Son(){console.log("我是子组件");return (<div>我是子组件</div>)
})function Memo(){const [text,setText] = useState('')// 基本数据类型const [sonData,setSonData] = useState(666)function kanno(){setSonData(666); // 不会触发子组件的重新渲染// setSonData('36除了6还是6'); // 会触发子组件的重新渲染}// 引用数据类型const [sonContent,setSonContent] = useState([])function shower(){setSonContent([]); // 会触发子组件的重新渲染}return (<div><button onClick={kanno}>我是父组件1</button><button onClick={shower}>我是父组件2</button><div>{text}</div><MemoSon data={sonData} content={sonContent}/></div>)
}export default Memo

5.如何避免引用数据没有变化还是渲染了子组件的问题

使用useMemo钩子函数:http://t.csdnimg.cn/l8Xjb

但是这样的写法使用场景较小>_<

import { memo,useState,useMemo } from "react"const MemoSon = memo(function Son(){console.log("我是子组件");return (<div>我是子组件</div>)
})function Memo(){const [text,setText] = useState('')// 基本数据类型const [sonData,setSonData] = useState(666)function kanno(){setSonData(666); // 不会触发子组件的重新渲染// setSonData('36除了6还是6'); // 会触发子组件的重新渲染}// 引用数据类型const content =  useMemo(()=>{return []},[])const [sonContent,setSonContent] = useState(content)function shower(){setSonContent(content); // 会触发子组件的重新渲染}return (<div><button onClick={kanno}>我是父组件1</button><button onClick={shower}>我是父组件2</button><div>{text}</div><MemoSon data={sonData} content={sonContent}/></div>)
}export default Memo

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

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

相关文章

20240728 每日AI必读资讯

Google Gemini 聊天机器人更新 可以免费使用Gemini 1.5 Flash 1. 引入Gemini 1.5 Flash模型&#xff1a; • 提供更快和更高质量的响应。 • 提升推理和图像理解能力。 • 上下文窗口扩大到 32Ktokens&#xff0c;允许进行更长的对话和处理更复杂的问题。 • 即将支持通过 Goo…

【数据结构】常用数据结构的介绍:理解与应用

文章目录 前言一、介绍二、使用场景三、总结 前言 在计算机科学中&#xff0c;数据结构是我们组织和存储数据的方式&#xff0c;它可以帮助我们高效地执行各种操作&#xff0c;如搜索、插入和删除。从数组和链表&#xff0c;到树和图&#xff0c;不同的数据结构有着不同的优点…

深入理解计算机系统 CSAPP 练习题12.4

我们每次都用read_set初始化ready_set是因为我们每次都处理read_set里的描述符,这是我们希望服务器做的事情.每次一有描述符3或描述符0,select函数会更新ready_set ,我们判断更新后ready_set的情况.然后干对应的事. 由此可以看到select函数的神奇之处,它把一个复杂的事情简单化…

Intel电脑CPU的选择

酷睿 i5/i7/i9 系列至强 Xeon 系列应用场景家用消费级电脑企业服务器工作站PCIe通道数 16X 最多识别到2张显卡&#xff0c;且每张降速为8X 64X 最多支持8张显卡同时使用 内存信道2通道8通道内存容量最大128GB最大6TB工作时长不建议长期不间断连续使用专为365*24不断电使用而设…

Kafka使用案例

1、Kafka 生产者&#xff08;Producer&#xff09;示例 #include <iostream> #include <string> #include <librdkafka/rdkafkacpp.h>class ExampleDeliveryReportCb : public RdKafka::DeliveryReportCb { public:void dr_cb (RdKafka::Message &messa…

centos7安装redis数据库步骤

文章目录 前言步骤1、下载redis并解压到指定路径2、make 和 make install3、配置redis.conf4、制作启动脚本5、授权并启动 前言 我安装了很多次redis&#xff0c;包括redis安装、redis安装、或者使用ansible等自动化构建安装&#xff0c;但是直接用安装包安装还是比较少。 今…

软件测试---网络基础、HTTP

一、网络基础 &#xff08;1&#xff09;Web和网络知识 网络基础TCP/IP 使用HTTP协议访问Web WWW万维网的诞生 WWW万维网的构成 &#xff08;2&#xff09;IP协议 &#xff08;3&#xff09;可靠传输的TCP和三次握手策略 &#xff08;4&#xff09;域名解析服务DNS &#xff0…

【51单片机仿真】基于51单片机设计的广告机系统仿真源码原理图设计文档

效果: 摘要 该系统基于51单片机,通过LED点阵显示字符和简单图案,并实现按键控制。系统可以用于广告机,通过两个按键实现暂停/继续显示和显示方向切换功能。系统包含硬件电路设计和软件编程两部分。 目录 第1章 绪论 第2章 系统分析与总体设计 第3章 系统的硬件结构实现 …

Vue3-拉开序幕的setup

Vue3 中的 setup 是一个新的配置项&#xff0c;值是一个函数。 export default {name: App,setup: function () {} } </script> 和 Vue2 中的 data 一样&#xff0c;我也可以将 setup 简写成为 export default {name: App,setup() {} } setup函数的使用 与 Vue2 不一样…

go 语言踏出第一步

1、下载Go语言安装包&#xff1a;在官方网站&#xff08;https://golang.org/dl/&#xff09;上下载适合你操作系统的Go语言安装包。选择一个tar.gz格式的包。 2、解压安装包&#xff1a;打开终端&#xff0c;进入下载目录&#xff0c;并使用以下命令解压安装包&#xff1a; ta…

Git操作指令(已完结)

Git操作指令 一、安装git 1、设置配置信息&#xff1a; # global全局配置 git config --global user.name "Your username" git config --global user.email "Your email"# 显示颜色 git config --global color.ui true# 配置别名&#xff0c;各种指令都…

详细介绍MLP的原理

什么是MLP MLP&#xff08;Multi-Layer Perceptron&#xff09;&#xff0c;即多层感知机&#xff0c;是一种前馈型人工神经网络。它由一个输入层、一个输出层以及至少一个隐藏层&#xff08;输入层和输出层中间的层&#xff09;组成。每个神经元&#xff08;或称为节点&#x…

【Django】 js实现动态赋值、显示show隐藏hide效果

文章目录 需要达到的前端效果预览&#xff1a;实现步骤复制bootstrp代码&#xff08;buttons&#xff09;复制bootstrp代码&#xff08;Alert警告框&#xff09;写js测试效果 需要达到的前端效果预览&#xff1a; {% load static %} <!DOCTYPE html> <html lang"…

十分钟速通 MySQL —— CRUD

表格的结构 在之前的课程中我们已经学习了关系型数据库的表格&#xff0c;我们再来回顾-下表格由哪些元素构成 表由表名、行、列、列名构成表名是表的名称列名表示列的名字&#xff0c;列名不可以重复表格实质上是一个二维数组&#xff0c;行和列都是从0开始数的(数组的特性) …

线程池配置与CPU利用率

线程数设置理论 CPU密集型&#xff1a;核心数 1I/O密集型&#xff1a;核心数 * 2 CPU利用率基础 单个CPU核心在单位时间内只能执行一个线程的指令。 实验验证 死循环测试&#xff1a;单线程可跑满一个核心利用率。多线程测试&#xff1a;增加线程数&#xff0c;核心利用率…

【软考】广义表

目录 1. 说明2. 基本操作3. 特点4. 存储结构5. 例题5.1 例题1 1. 说明 1.广义表是线性表的推广&#xff0c;是由0个或多个单元素或子表组成的有限序列。2.广义表与线性表的区别在于:线性表的元素都是结构上不可分的单元素&#xff0c;而广义表的元素既可以是单元素&#xff0c…

【过滤器 vs 拦截器】SpringBoot中过滤器与拦截器:明智选择的艺术(如何在项目中做出明智选择)

文章目录 SpringBoot 过滤器 vs 拦截器过滤器 (Filter)定义特点使用场景实现步骤创建过滤器类注册过滤器&#xff08;可选&#xff0c;如果不使用 WebFilter 注解&#xff09; 拦截器 (Interceptor)定义特点使用场景实现步骤创建拦截器类注册拦截器 过滤器与拦截器的比较实际项…

Python教程:一文了解Python中的序列化与反序列化

目录 1. 序列化与反序列化概述 1.1 什么是序列化&#xff1f; 1.2 什么是反序列化&#xff1f; 1.3 应用场景 2. Python中的序列化与反序列化模块 2.1 pickle模块 2.1.1 使用示例 2.2 json模块 2.2.1 使用示例 2.3 yaml模块 2.3.1 使用示例 2.4 marshal模块 3. 实…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第六十二章 定时器按键消抖实验

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

linux mysql 添加环境变量

要在Linux上添加MySQL的环境变量&#xff0c;可以按照以下步骤进行操作&#xff1a;打开终端窗口。使用文本编辑器&#xff08;如vi或nano&#xff09;打开~/.bashrc文件&#xff1a;vi ~/.bashrc或nano ~/.bashrc在文件的末尾添加以下内容&#xff1a;export PATH$PATH:/path/…