React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
文章目录
- 前言
- 未优化之前的代码
- 问题
- 解决方案一,通过children prop
- 解决方案二,通过React.memo
- 后言
前言
hello world欢迎来到前端的新世界
😜当前文章系列专栏:react.js
🐱👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力
未优化之前的代码
- 这里准备了两个组件,
第一个是模拟son子组件 - 第二个是View是父组件里面渲染的组件P
- 问题是,当我们父组件中的数据发生修改的时候,会导致重新渲染结构,但是子组件中的数据没有发生变化 也会跟着渲染,这会导致我们的性能会有点浪费
import {useState} from "react";// 设置模拟子组件
const Son = ()=>{console.log("son render")return <div> I'm a subcomponent </div>
}const Parent = ()=>{// 设置一个空的useState,类型定义为我们传输的值的类型const [,forceUpdate] = useState<number>()return (<>{/* 修改父组件的数据 */}<button onClick={()=>forceUpdate(Math.random())}>更新父组件</button><Son></Son></>)
}
const View:React.FC = ()=>{return (<div className="drag"><Parent></Parent></div>)
}export default View;
问题
写完了之后,我们会发现当我们修改父组件中的useState的内容的时候,子组件也会重新触发打印

解决方案一,通过children prop
可以把我们子组件当成标签,写到父组件中的jsx中,子组件抽象为children
import {useState} from "react";// 设置模拟子组件
const Son = ()=>{console.log("son render")return <div> I'm a subcomponent </div>
}const Parent = ({children}:{children:JSX.Element})=>{// 设置一个空的useState,类型定义为我们传输的值的类型const [,forceUpdate] = useState<number>()return (<>{/* 修改父组件的数据 */}<button onClick={()=>forceUpdate(Math.random())}>更新父组件</button>{children}</>)
}
const View:React.FC = ()=>{return (<div className="drag"><Parent><Son></Son></Parent></div>)
}export default View;

当我们点击后就可以看到,除了第一次渲染出来的,后续父组件更新后,子组件并没有发生更新
解决方案二,通过React.memo
import React, {useState} from "react";// 设置模拟子组件
const Myson = React.memo(function Son(){console.log("son render")return <div> I'm a subcomponent </div>
})const View:React.FC = ()=>{const [,forceUpdate] = useState<number>()return (<div className="drag"><button onClick={()=>forceUpdate(Math.random())}>更新父组件</button><Myson></Myson></div>)
}export default View;
后言
创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力
相关文章:
React中通过children prop或者React.memo来优化子组件渲染【react性能优化】
文章目录 前言未优化之前的代码问题解决方案一,通过children prop解决方案二,通过React.memo后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:react.js 🐱👓博主在前端领域还有很多知识和…...
「Verilog学习笔记」含有无关项的序列检测
专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点,刷题网站用的是牛客网 timescale 1ns/1ns module sequence_detect(input clk,input rst_n,input a,output reg match);reg [8:0] a_tem ; always (posedge clk or negedge rst_n) begin if (~rs…...
k8s部署的java服务查看连接nacos缓存的配置文件
一、问题描述 k8s部署的java服务,使用nacos中的配置文件,需要在缓存中查看该服务具体是使用到了哪些配置文件 二、解决 参考文档: https://nacos.io/zh-cn/docs/system-configurations.html 文档描述如下: 进入java服务容器进入用户目录下的nacos&a…...
【matlab程序】matlab给风速添加图例大小
【matlab程序】matlab给风速添加图例大小 clear;clc;close all; % load 加载风速数据。 load(matlab.mat) % 加载颜色包信息 gray load(D:\matlab_work\函数名为colormore的颜色索引表制作\R_color_txt\R_color_single\gray89.txt); brown load(D:\matlab_work\函数名为color…...
微服务学习|初识MQ、RabbitMQ快速入门、SpringAMQP
初识MQ 同步通讯和异步通讯 同步通讯是实时性质的,就好像你用手机与朋友打视频电话,但是,别人再想与你视频就不行了,异步通讯不要求实时性,就好像你用手机发短信,好多人都能同时给你发短信,你…...
【开源】基于Vue.js的固始鹅块销售系统
项目编号: S 060 ,文末获取源码。 \color{red}{项目编号:S060,文末获取源码。} 项目编号:S060,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固…...
SpringCloud微服务网关Gateway:gateway基本实现、断言工厂、过滤器工厂、浏览器同源策略、跨域问题解决方案
Gateway网关 Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0和Project Reactor 等响应式编程和事件流技术开发的网关,它旨在为微服务架构提供一种简单有效的统一的 API路由管理方式 为什么…...
ArcGIS中如何建立土地利用规划数据库
一、建库步骤 - 收集土地利用规划资料,包括图件资料、数据资料和文本资料。 - 将收集到的数据进行整理和格式转换,使其符合ArcGIS 的数据格式要求。 - 在ArcGIS 中创建新的土地利用规划数据库,并定义相应的数据结构和字段。 - 将转换后的数据导入到新的土地利用规划数据库中…...
微信小程序 服务端返回富文本,图片无法显示
场景: 微信小程序开发中,需要从服务端拿取数据渲染到页面上,后台返回的富文本里,图片路径有时是没有带域名前缀的,导致图片无法正常显示。 解决方案: 在富文本返回时,用正则匹配&#…...
谈谈Redis持久化
目录 前言 RDB AOF 总结 前言 我们都知道Redis 是基于内存的数据库,一旦服务器的进程退出,数据库数据就会随之丢失,这不是我们想看到的,为了避免这个问题,Redis 为我们提供了俩种持久化方案,将数据保存…...
CentOS7中升级OpenSSL详细教程
文章目录 一. 引言二. 升级前的准备1.备份现有配置2. 检查系统版本3. 安装依赖 三. OpenSSL安装四. 验证 一. 引言 OpenSSL: 是用于保护数据安全的重要工具。它能提供加密,解密等多项功能。 然而,随着技术的发展和新的安全漏洞的出现,使用最…...
人工智能基础_机器学习050_对比sigmoid函数和softmax函数的区别_两种分类器算法的区别---人工智能工作笔记0090
可以看到最上面是softmax的函数对吧,但是如果当k = 2 那么这个时候softmax的函数就可以退化为sigmoid函数,也就是 逻辑斯蒂回归了对吧 我们来看一下推导过程,可以看到上面是softmax的函数 可以看到k=2 表示,只有两个类别对吧,两个类别的分类不就是sigmoid函数嘛对吧,所以说 …...
第十九章 解读利用pytorch可视化特征图以及卷积核参数(工具)
介绍一种可视化feaature maps以及kernel weights的方法 推荐可视化工具TensorBoard:可以查看整个计算图的数据流向,保存再训练过程中的损失信息,准确率信息等 学习视频: 使用pytorch查看中间层特征矩阵以及卷积核参数_哔哩哔哩…...
【React】Memo
组件重新渲染时缓存计算的结果。 实例:count1计算斐波那契数列,count2和count1可以触发数值变化。使用memo可以使只有在count1变化时触发斐波那契数列计算函数,而count2变化时不触发斐波那契数列计算函数。 import { useMemo } from "r…...
宣传技能培训1——《新闻摄影技巧》光影魔法:理解不同光线、角度、构图的摄影效果,以及相机实战操作 + 新闻摄影实例讲解
新闻摄影技巧 写在最前面摘要 构图与拍摄角度景别人物表情与叙事远景与特写 构图与拍摄角度案例 主体、陪体、前景、背景强调主体利用前景和背景层次感的创造 探索新闻摄影中的构图技巧基本构图技巧构图技巧的应用实例实例分析1. 黄金分割和九宫格2. 三角型构图3. 引导线构图4.…...
3 时间序列预测入门:TCN
0 引言 TCN(全称Temporal Convolutional Network),时序卷积网络,是在2018年提出的一个卷积模型,但是可以用来处理时间序列。 论文:https://arxiv.org/pdf/1803.01271.pdf 一维卷积:在时间步长方…...
Linux学习笔记-芯片性能检测
文章目录 概述Dhrystone(单核性能测试工具)简介:源码下载:源码编译:使用及输出结果 coremark(多核性能测试工具)简介:源码下载:源码编译:使用及输出结果&…...
2023年网络安全比赛--综合渗透测试②(超详细)
一、竞赛时间 180分钟 共计3小时 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 1.通过 PC 中的渗透测试平台 Kali 对服务器场景进行渗透测试,将扫描开放的所有端口当作flag提交(例:21,22,23); 2.通过 PC 中的渗透测试平台 Kali 对服务器场景进行渗透测试,将初…...
关于8位图像buffer显示到picturebox上
最终版本: void showbuffer2pictmod4(byte[] buffer, int ww, int hh, PictureBox destImg) { int mod ww % 4;//解决四位对齐问题20150716 int temproiw ww (4 - mod) % 4;//其实这都是和显示相关,处理图像其实不必…...
cocos游戏引擎制作的滚动框地图防止误点操作的简单方法
本篇文章主要讲解,使用cocos creator 来解决在我们日常滚动框开发中,滚动和触摸存在冲突的情况,导致的误触行为的解决办法。 日期:2023年11月25日 具体事项 说明:在我们滚动滚动框时,会出现误点的情况&…...
芯洲SCT SCT2630ASTER ESOP-8 DC-DC电源芯片
特性宽输入范围:4.5V - 60V高达3.5A的连续输出电流0.8V 1%反馈参考电压集成80mΩ高端MOSFET低静态电流:175uA轻载时采用脉冲跳跃模式(PSM)最小导通时间130ns4ms内部软启动时间可调频率100kHz至1.2MHz外部时钟同步精确使能阈值&…...
5分钟快速上手:用Python高效下载Google卫星地图的终极指南
5分钟快速上手:用Python高效下载Google卫星地图的终极指南 【免费下载链接】google-map-downloader Small tools to download Google maps satellite image for a given extent & zoom level to a TIFF file with geographical coordinates and speeding it up …...
目标分解效率提升300%的关键:动态权重分配算法(已开源v2.1,支持LangChain/AutoGen无缝集成)
第一章:AIAgent架构中的目标分解策略 2026奇点智能技术大会(https://ml-summit.org) 在复杂任务驱动的AI Agent系统中,目标分解是实现自主规划与协同执行的核心前置环节。它并非简单地将顶层目标切分为子任务,而是需结合领域知识、资源约束、…...
伪代码示例:模拟PLC配置
PLC交通灯控制,博途V15,S7-1200 使用比较指令,程序完整,触摸屏调试正常,触摸屏上有倒计时显示功能。 有两份对应实训报告(设计说明书),包括每段程序原理解释,触摸屏设置过程…...
HTML函数运行时触控屏失灵是硬件故障吗_输入层兼容性测试【详解】
触控屏失灵与HTML函数基本无关,主因是事件拦截、被动监听限制或CSS遮挡;preventDefault()误用、pointer-events设置不当及iOS的300ms延迟机制是常见根源。触控屏失灵和 HTML 函数运行有关吗基本无关。HTML 本身没有“运行时函数”概念,onclic…...
RAG文档切割入门到精通:彻底解决语义断裂,看这一篇就够了!
👔面试官:Chunking 的时候语义被切断是个很常见的问题,你有没有遇到过?怎么处理的? 🙋♂️我:遇到过,加个 overlap 重叠就好了,前后重叠个 100 token,基本…...
html标签怎么表示小字号文字_small标签语义说明【操作】
<small>是语义标签,专用于版权、法律条款等副文本,非样式控制;需用CSS实现文字缩放,避免滥用。HTML 里没有 <small> 标签的语义误区很多人以为 <small> 是用来“让文字变小”的样式标签,其实不是。&…...
如何5分钟快速上手MimicMotion:从安装到生成第一个运动视频
如何5分钟快速上手MimicMotion:从安装到生成第一个运动视频 【免费下载链接】MimicMotion High-Quality Human Motion Video Generation with Confidence-aware Pose Guidance 项目地址: https://gitcode.com/gh_mirrors/mi/MimicMotion MimicMotion是一款基…...
AI智能体视觉检测系统(TVA)工作原理系列(四)
TVA核心算法解析(1)——Transformer架构与全局注意力机制作为AI智能体视觉检测系统(TVA)的“核心大脑”,算法是决定其检测精度、速度和智能性的关键,而Transformer架构则是TVA算法的底层基础——与传统机器…...
再次革新 .NET 的构建和发布方式(一)烤
本文能帮你解决什么? 1. 搞懂FastAPI异步(async/await)到底在什么场景下能真正提升性能。 2. 掌握在FastAPI中正确使用多线程处理CPU密集型任务的方法。 3. 避开常见的坑(比如阻塞操作、数据库连接池耗尽、GIL限制)。 …...
