[react] 纯组件优化子

 有组件如下,上面变化秒数, 下面是大量计算的子组件,上面每一秒钟变化一次,这时候子组件会不断重新渲染, 浪费资源

父组件如下

import React, { memo, useEffect, useMemo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import HugeCount from './Te';
interface IProps {children?: ReactNode;
}const template: FC<IProps> = () => {const [time, setTime] = useState(new Date());useEffect(() => {console.log('渲染主体组件');setTimeout(() => {setTime(new Date());}, 1000);}, [time]);return (<div>{time.getSeconds()}<HugeCount  /></div>);
};export default memo(template);

子组件如下

import React, { memo, useEffect, useMemo, useState } from 'react';
import type { ReactNode, FC } from 'react';interface IProps {children?: ReactNode;data: {};bad: any;
}const template: FC<IProps> = (props) => {const [num, setNum] = useState(100);const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {setNum(Number(e.target.value));props.bad();};const hugeCount = () => {console.log('大量计算');return num;};const result = useMemo(hugeCount, [num]);// const result = useMemo(()=>hugeCount(), [num]);useEffect(() => {console.log('渲染大量计算组件');});return (<div><input type='text' onChange={(e) => handleChange(e)} /><div>大量计算结果:{result}</div></div>);
};export default template;

 什么是纯组件?

组件 的核心特性是避免不必要的渲染,它通过浅比较 propsstate 来决定是否更新 UI。纯组件本身不抑制副作用,它只是优化了渲染的过程。

先说state, 大量计算的子组件的state并未变化, 所以理应不变, 这时候先优化自身导出,用memo

这时候可了, 再说props,我在父组件传这个给子组件,然而秒数刷新子组件重新渲染,为什么

  const data = {name:"23"}

因为这个是引用类型,父组件秒数变化时刷新页面, 这个data会重新生成地址,所以props变了,子组件就刷新 ,那怎么办?

用useMemo,或者useState, 这2有缓存功能

 const [data, setData] = useState(33);

同理,你想传函数, 用useCallback,不然父组件重新渲染, 你子组件收到的函数是新的地址!! 然后重新渲染, 浪费性能

  function bad() {console.log('hahah');}const badFun = React.useMemo(() => bad, []);

 



小useMemo细节,2种写法都可, 前者比如是一个无参数, 后者可传参

  const result = useMemo(hugeCount, [num]); const result = useMemo(()=>hugeCount(), [num]); 

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

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

相关文章

CSS进阶和SASS

目录 一、CSS进阶 1.1、CSS变量 1.2、CSS属性值的计算过程 1.3、做杯咖啡 1.4、下划线动画 1.5、CSS中的混合模式(Blending) 二、SASS 2.1、Sass的颜色函数 2.2、Sass的扩展(extend)和占位符(%)、混合(Mixin) 2.3、Sass的数学函数 2.4、Sass的模块化开发 2.5、Sass…

使用 Spring Boot 和 GraalVM 的原生镜像

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;历代文学&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编程&#xff0c;高并发设计&#xf…

清华大学Python包镜像站点

清华大学提供了一个Python包镜像站点&#xff0c;其中包括了许多常用的Python包。使用这个镜像站点可以提高下载Python包时的速度&#xff0c;因为包已经存储在国内的服务器上&#xff0c;从而减少了网络延迟。 要使用清华的pip镜像&#xff0c;你可以在pip命令中指定-i参数来…

【每日学点鸿蒙知识】tensorflowlite编译、音频编码线程、沉浸式状态栏、TextArea最大字节数限制等

1、如何编译Tensorflow lite库&#xff1f; 之前项目基于tflite推理引擎做人脸识别的功能&#xff0c;鸿蒙侧如何复用tflite模型&#xff1f; tflite对Android和iOS本身支配了GPU支持&#xff0c;但是鸿蒙侧目前并没有&#xff0c;鸿蒙提供了自己的推理引擎&#xff0c;而且支…

MySQL 索引优化实战 – 结合 Explain 深度解析慢查询

在实际的开发过程中&#xff0c;随着数据量的不断增大&#xff0c;慢查询成为了不可忽视的性能瓶颈。MySQL 提供了多种工具来帮助我们分析查询性能问题&#xff0c;其中最常用的工具是 EXPLAIN、SHOW PROFILE 和 SHOW STATUS。本文将从慢查询日志入手&#xff0c;结合 EXPLAIN …

【人工智能机器学习基础篇】——深入详解强化学习之常用算法Q-Learning与策略梯度,掌握智能体与环境的交互机制

深入详解强化学习之常用算法&#xff1a;Q-Learning与策略梯度 强化学习&#xff08;Reinforcement Learning, RL&#xff09;作为机器学习的一个重要分支&#xff0c;近年来在多个领域取得了显著成果。从棋类游戏的人机对战到自主驾驶汽车&#xff0c;强化学习技术展示了其强大…

计算机网络-L2TP VPN基础实验配置

一、概述 上次大概了解了L2TP的基本原理和使用场景&#xff0c;今天来模拟一个小实验&#xff0c;使用Ensp的网卡桥接到本地电脑试下L2TP拨号&#xff0c;今天主要使用标准的L2TP&#xff0c;其实在这个基础上可以加上IPSec进行加密&#xff0c;提高安全性。 拓扑说明&#xf…

Linux | 零基础Ubuntu解压RaR等压缩包文件

目录 介绍 案例分析 安装工具 解压实践 介绍 RAR是一种专利文件格式&#xff0c;用于数据压缩与归档打包&#xff0c;开发者为尤金罗谢尔&#xff08;俄语&#xff1a;Евгений Лазаревич Рошал&#xff0c;拉丁转写&#xff1a;Yevgeny Lazarevich R…

Postman接口测试05|实战项目笔记

目录 一、项目接口概况 二、单接口测试-登录接口&#xff1a;POST 1、正例 2、反例 ①姓名未注册 ②密码错误 ③姓名为空 ④多参 ⑤少参 ⑥无参 三、批量运行测试用例 四、生成测试报告 1、Postman界面生成 2、Newman命令行生成 五、token鉴权&#xff08;“…

PyTorch快速入门教程【小土堆】之完整模型训练套路

视频地址完整的模型训练套路&#xff08;一&#xff09;_哔哩哔哩_bilibili import torch import torchvision from model import * from torch import nn from torch.utils.data import DataLoader# 准备数据集 train_data torchvision.datasets.CIFAR10(root"CIFAR10&…

网络分析工具-tcpdump

文章目录 前言一、tcpdump基础官网链接命令选项详解常规过滤规则tcpdump输出 一、tcpdump实践HTTP协议ICMP状态抓包 前言 当遇到网络疑难问题的时候&#xff0c;抓包是最基本的技能&#xff0c;通过抓包才能看到网络底层的问题 一、tcpdump基础 tcpdump是一个常用的网络分析工…

可编辑31页PPT | 大数据湖仓一体解决方案

荐言分享&#xff1a;在当今数字化时代&#xff0c;大数据已成为企业决策和业务优化的关键驱动力。然而&#xff0c;传统的数据处理架构&#xff0c;如数据仓库和数据湖&#xff0c;各自存在局限性&#xff0c;难以满足企业对数据高效存储、灵活处理及实时分析的综合需求。因此…

Python中的sqlite3模块:SQLite数据库接口详解

Python中的sqlite3模块&#xff1a;SQLite数据库接口详解 主要功能sqlite3.connect(database)connection.cursor()cursor.execute(sql)connection.commit()cursor.fetchall()connection.close() 使用示例执行结果总结 在Python中&#xff0c;sqlite3模块提供了一个与SQLite数据…

easyui textbox使用placeholder无效

easyui textbox使用placeholder无效 在easyui 的textbox控件&#xff0c;请使用data-options 设定 示例 <input type text class easyui-textbox data-options "prompt:请输入您的邮箱"/>

[创业之路-232]:《华为闭环战略管理》-5-组织架构、业务架构、产品架构、技术架构、项目架构各自设计的原则是什么?

目录 一、组织架构设计原则 二、业务架构设计原则 三、产品架构设计原则 四、技术架构设计原则 五、项目架构设计原则 一、各自的组成元素 组织架构、业务架构、产品架构、技术架构、项目架构各自的组成元素具体如下&#xff1a; 组织架构 - 组织企业相似资源的方式&…

STM32中断详解

STM32中断详解 NVIC 中断系统中断向量表相关寄存器中断优先级中断配置 外部中断实验EXTI框图外部中断/事件线映射中断步骤初始化代码实现 定时器中断通用定时器相关功能标号1&#xff1a;时钟源标号 2&#xff1a;控制器标号 3&#xff1a;时基单元 代码实现 NVIC 中断系统 STM…

【LeetCode】200、岛屿数量

【LeetCode】200、岛屿数量 文章目录 一、并查集1.1 并查集1.2 多语言解法 二、洪水填充 DFS2.1 洪水填充 DFS 一、并查集 1.1 并查集 // go var sets int var father [90000]intfunc numIslands(grid [][]byte) int {n, m : len(grid), len(grid[0])build(grid, n, m)for i …

Github 2024-12-28 Rust开源项目日报 Top10

根据Github Trendings的统计,今日(2024-12-28统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10TypeScript项目1Python项目1egui: 一个简单、快速且高度可移植的 Rust GUI 库 创建周期:1903 天开发语言:Rust协议类型:Apache Li…

SOME/IP 协议详解——序列化

文章目录 0. 概述1.基本数据序列化2.字符串序列化2.1 字符串通用规则2.2 固定长度字符串规则2.3 动态长度字符串规则 3.结构体序列化4. 带有标识符和可选成员的结构化数据类型5. 数组5.1 固定长度数组5.2 动态长度数组5.3 Enumeration&#xff08;枚举&#xff09;5.4 Bitfield…

心力衰竭相关临床记录数据分析开发技术概述

心力衰竭相关临床记录数据分析开发技术概述 心力衰竭临床记录数据分析的开发涉及多种技术&#xff0c;包括数据采集、处理、建模和可视化等方面。以下是从技术角度对整个开发流程的概述&#xff1a; 数据采集技术 1.1 数据来源 公开数据集&#xff1a;如 UCI 数据存储库、Clin…