react hooks--React.memo

基本语法

React.memo 高阶组件的使用场景说明：

React 组件更新机制：只要父组件状态更新，子组件就会无条件的一起更新。

  • 子组件 props 变化时更新过程：组件代码执行 -> JSX Diff（配合虚拟 DOM）-> 渲染（变化后的内容）【 DOM 操作】。
  • 子组件 props 无变化更新过程：组件代码执行 -> JSX Diff（配合虚拟 DOM）【无 DOM 操作】。

注意：此处更新指的是组件代码执行、JSX 进行 Diff 操作（纯 JS 的操作，速度非常快，不会对性能产生太多影响）。

  • 如果组件 props 改变了，那么，该组件就必须要更新，才能接收到最新的 props。
  • 但是，如果组件 props 没有改变时，组件也要进行一次更新。实际上，这一次更新是没有必要的。

如果要避免组件 props 没有变化而进行的不必要更新（Diff），这种情况下，就要使用 React.memo 高阶组件。

注：对于 class 组件来说，可以使用 PureComponent 或 shouldComponentUpdate 钩子函数来实现。

import { useState } from 'react'
import ReactDOM from 'react-dom'const Child2 = ({ count }) => {console.log('Child2 子组件代码执行了')return <div style={{ backgroundColor: '#abc' }}>子组件2：{count}</div>
}const Child1 = () => {console.log('Child1 子组件代码执行了')return <div style={{ backgroundColor: '#def' }}>子组件1</div>
}const App = () => {const [count, setCount] = useState(0)return (<div style={{ backgroundColor: 'pink', padding: 10 }}><h1>计数器：{count}</h1><button onClick={() => setCount(count + 1)}>+1</button><hr />{/* 子组件 */}<Child1 /><br /><Child2 count={count} /></div>)
}export default App

语法：

使用场景：当你想要避免函数组件 props 没有变化而产生的不必要更新时，就要用到 React.memo 了。

作用：记忆组件上一次的渲染结果，在 props 没有变化时复用该结果，避免函数组件不必要的更新。

解释：

  • React.memo 是一个高阶组件，用来记忆（memorize）组件
  • 参数（Child）：需要被记忆的组件，或者说是需要避免不必要更新的组件。
  • 返回值（MemoChild）：React 记住的 Child 组件。

原理：通过对比检查更新前后 props 是否相同，来决定是否复用上一次的渲染结果

  • 如果相同，复用上一次的渲染结果；
  • 如果不同，重新渲染组件。

并不是所有的组件都适合使用memo，比如child2组件，每次都需要重新渲染，使用memo反而会使性能变得更低，逻辑也变得更复杂

基本用法

如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。

默认情况下，React.memo 只会对更新前后的 props 进行浅对比（shallow compare）与 PureComponent 相同。

也就是说，对于对象类型的 prop 来说，只会比较引用

  • 如果更新前后的引用相同，复用上一次的渲染结果（不会重新渲染该组件）。
  • 如果更新前后的引用不同，重新渲染该组件。

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现

如果你要手动控制比较过程，可以使用 React.memo 的第二个参数：

解释：

  • 第二个参数：用来比较更新前后 props 的函数。
  • 返回值：如果返回 true，表示记住（不重新渲染）该组件；如果返回 false，表示重新渲染该组件。

子组件Callback.jsx

export default function Callback() {console.log('callback')return (<div>callback</div>)
}

父组件App.jsx：

import Callback from './components/Callback'
import {useState} from "react";export default function App() {const [age, setAge] = useState(20);function changeAge() {setAge(age + 1)}return (<div>age: {age}<button onClick={changeAge}>修改age</button><Callback /></div>)
}

修改父组件的state值后，函数子组件内部的代码运行了，相对而言有点费性能

优化如下：

使用React.memo包裹子组件，缓存上一次的结果，默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

子组件Callback.jsx

import React from 'react';function Callback() {console.log('callback')return (<div>callback</div>)
}++ export default React.memo(Callback)

优化后，父组件的state数据变更后，没有执行打印结果。

在父组件中定义个fn函数传入到子组件中：

import Callback from './components/Callback'
import { useState} from "react";export default function App() {console.log('app')const [age, setAge] = useState(20);function changeAge() {setAge(age + 1)}function fn() {}return (<div>age: {age}<button onClick={changeAge}>修改age</button><Callback fn={fn} /></div>)
}

此时，父组件的state数据改变后，会引起子组件的内部代码运行。打印了结果，相对而言性能有损耗。

优化如下：

useCallback优化性能

将fn函数通过useCallback缓存起来

import Callback from './components/Callback'
import {useCallback, useState} from "react";export default function App() {console.log('app')const [age, setAge] = useState(20);function changeAge() {setAge(age + 1)}let fn = useCallback(() => {}, [])return (<div>age: {age}<button onClick={changeAge}>修改age</button><Callback fn={fn} /></div>)
}

此时修改父组件的state数据没有引起子组件的内部代码运行

因为fn函数被缓存了，地址没有发生改变，React.memo就认为props数据没有发生改变，所以没有表要重新运行函数。

useCallback如何做的性能优化？

  • 在函数组件中，定义的一般的普通函数在每次组件更新渲染时都会重新生成一个函数，此时函数地址发生改变了，就会引起子组件内部代码运行，损耗性能。
  • 优化：使用useCallback将函数缓存，每次组件更新渲染时，这个函数地址没有发生改变，所以传入到子组件的props数据没有发生发生改变，所以子组件内部代码没有重新执行。
  • React.memo是数据的浅对比，也就是地址的对比，只要传入参数地址发生改变就会重新执行子组件的代码。

总结

useMemo 用于缓存一些耗时的计算结果（返回值），只有当依赖项改变时才重新进行计算。 useCallback(func, [deps]) 等同于 useMemo(() => func, [deps]) useCallback 缓存的是方法的引用，useMemo 缓存的是方法的返回值，适用场景都是避免不必要的子组件渲染。 在类组件中有 React.PureComponent，与之对应的函数组件可以使用 React.memo，它们都会在自身 re-render 时，对每一个 props 项进行浅对比，如果引用没有发生改变，就不会触发渲染。 那么，useMemo 和 React.memo 有什么共同点呢？前者可以在组件内部使用，可以拥有比后者更细粒度的依赖控制。它们两个与 useCallback 的本质一样，都是进行依赖控制。

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

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

相关文章

Knife4j 一款基于Swagger的开源文档管理工具

Knife4j 一款基于Swagger的开源文档管理工具

一、简单介绍 1.1 简介 Knife4j 是一款基于Swagger的开源文档管理工具&#xff0c;主要用于生成和管理 API 文档 二、使用步骤&#xff1a; 2.1 添加依赖&#xff1a; <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spr…
阅读更多...
spark之不同序列化对比

spark之不同序列化对比

一&#xff0c;spark的rdd的序列话不同介绍 下面是使用不同序列化后的占用资源和数据大小 2&#xff0c;sparksql中序列化的区别 sparksql中使用序列化和不使用差别不大&#xff0c;英文sparksql中默认使用了encode自己实现的序列化方法&#xff0c;加上与不加序列化差别不大…
阅读更多...
编译成功！QT/6.7.2/Creator编译Windows64 MySQL驱动(MSVC版)

编译成功！QT/6.7.2/Creator编译Windows64 MySQL驱动(MSVC版)

相邻你找了很多博文&#xff0c;都没有办法。现在终于找到了正宗。 参考 GitHub - thecodemonkey86/qt_mysql_driver: Typical symptom: QMYSQL driver not loaded. Solution: get pre-built Qt SQL driver plug-in required to establish a connection to MySQL / MariaDB u…
阅读更多...
.whl文件下载及pip安装

.whl文件下载及pip安装

以安装torch_sparse库为例 一、找到自己需要的版本&#xff0c;点击下载。 去GitHub的pyg-team主页中找到pytorch-geometric包。网址如下&#xff1a; pyg-team/pytorch_geometric​github.com/pyg-team/pytorch_geometric 然后点击如图中Additional Libraries位置的here&am…
阅读更多...
Leetcode Hot 100刷题记录 -Day18（反转链表）

Leetcode Hot 100刷题记录 -Day18（反转链表）

反转链表&#xff1a; 问题描述&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&a…
阅读更多...
基于阿里云免费部署Qwen1-8B-chat模型并进行lora参数微调从0到1上手操作

基于阿里云免费部署Qwen1-8B-chat模型并进行lora参数微调从0到1上手操作

文章目录 一、申请资源二、创建实例三、克隆微调数据四、部署Qwen1-8B-chat模型1、环境配置2、模型下载3、本地模型部署 五、模型微调1、拉取Qwen仓库源码2、微调配置3、合并微调参数4、本地部署微调模型 一、申请资源 阿里云账号申请PAI资源详细教程我已于部署ChatGLM3时写过…
阅读更多...
双立方（三次）卷积插值

双立方（三次）卷积插值

前言 图像处理中有三种常用的插值算法&#xff1a; 最邻近插值 双线性插值 双立方&#xff08;三次卷积&#xff09;插值 其中效果最好的是双立方&#xff08;三次卷积&#xff09;插值&#xff0c;本文介绍它的原理以及使用 如果想先看效果和源码&#xff0c;可以拉到最底…
阅读更多...
关于若尔当矩阵中过渡矩阵的求法

关于若尔当矩阵中过渡矩阵的求法

关于若尔当矩阵中过渡矩阵的求法 豆瓜爱数学 ​关注 桜井雪子 等 114 人赞同了该文章 本文主要介绍考研中常考的另一类问题&#xff0c;当我们确认一个Jordan标准形时&#xff0c;对于过渡矩阵如何确定&#xff1f;这个常常是我们复习过程中容易忽略的一部分内容&#xff0c;…
阅读更多...
物联网——USART协议

物联网——USART协议

接口 串口通信 硬件电路 电平标准 串口参数、时序 USART USART主要框图 TXE: 判断发送寄存器是否为空 RXNE: 判断接收寄存器是否非空 RTS为输出信号&#xff0c;用于表示MCU串口是否准备好接收数据&#xff0c;若输出信号为低电平&#xff0c;则说明MCU串口可以接收数据&#…
阅读更多...
简单题69.x的平方根 （Java）20240919

简单题69.x的平方根 （Java）20240919

问题描述&#xff1a; java代码&#xff1a; class Solution {public int mySqrt(int x) {if (x < 2) {return x; // 0 和 1 的平方根分别是它们自己}int left 2; // 从2开始&#xff0c;因为0和1已经处理了int right x / 2; // 最大可能的平方根不会超过 x / 2int mid;w…
阅读更多...
列表、数组排序总结：Collections.sort()、list.sort()、list.stream().sorted()、Arrays.sort()

列表、数组排序总结：Collections.sort()、list.sort()、list.stream().sorted()、Arrays.sort()

列表类型 一.Collections.sort() Collections.sort()用于List类型的排序&#xff0c;其提供了两个重载方法&#xff1a; 1.sort(List<T> list) &#xff08;1&#xff09;List指定泛型时只能指定引用数据类型&#xff0c;也就是说无法用于基本数据类型的排序。 &am…
阅读更多...
Matlab R2024B软件安装教程

Matlab R2024B软件安装教程

一、新版本特点 MATLAB R2024B版本带来了众多新特性和改进&#xff0c;旨在提升用户的内容创作体验和工程效率。以下是该版本的一些主要特点&#xff1a; 1. 性能提升和优化&#xff1a;R2024B版本在性能上进行了显著优化&#xff0c;无论是在提问、回答问题、发布新技巧还是…
阅读更多...
el-table 的单元格 + 图表 + 排序

el-table 的单元格 + 图表 + 排序

<el-table border :data"tableDataThree" height"370px" style"width: 100%"><el-table-column :key"activeName 8" width"50" type"index" label"序号" align"center"></el…
阅读更多...
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)

JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)

大家好&#xff0c;今天我要分享的是如何在树形结构的数据中&#xff0c;根据特定条件设置节点及其所有子节点的显示属性。在实际项目中&#xff0c;这种需求非常常见&#xff0c;特别是在需要动态展示和隐藏节点的情况下。下面我将通过一个具体的示例来讲解实现过程。 需求分析…
阅读更多...
【网络安全 | 靶机搭建】解决虚拟机联网问题（NAT模式）

【网络安全 | 靶机搭建】解决虚拟机联网问题（NAT模式）

背景：在电脑上下载并使用VMware虚拟机后，重装VMware时可能会遇到虚拟机无法联网的问题（例如，ping www.baidu.com 无法通畅）。这种情况可能是网络适配器被删除导致的。 本文将通过添加网络、安装网络适配器以及切换网络连接方式等步骤解决虚拟机的联网问题，具体步骤如下：…
阅读更多...
Android Retrofit源码分析（一）：Retrofit是什么？和OkHttp的区别是什么？为什么需要他？

Android Retrofit源码分析（一）：Retrofit是什么？和OkHttp的区别是什么？为什么需要他？

目录 一、Retrofit是什么？ Retrofit是一个基于OKHttp的RESTful网络请求框架，由Square公司开源，专为Android和Java提供类型安全的HTTP客户端。它可以理解为OKHttp的加强版，底层封装了OKHttp，主要负责网络请求接口的封装，使得网络请求工作更加简洁高效。 简单来说，Retro…
阅读更多...
ElementUI 布局——行与列的灵活运用

ElementUI 布局——行与列的灵活运用

ElementUI 布局——行与列的灵活运用 一 . 使用 Layout 组件1.1 注册路由1.2 使用 Layout 组件 二 . 行属性2.1 栅格的间隔2.2 自定义元素标签 三 . 列属性3.1 列的偏移3.2 列的移动 在现代网页设计中&#xff0c;布局是构建用户界面的基石。Element UI 框架通过其强大的 <e…
阅读更多...
0x08 MotionEye 视频监控组件 list 信息泄漏洞 CVE-2022-25568

0x08 MotionEye 视频监控组件 list 信息泄漏洞 CVE-2022-25568

参考&#xff1a; MotionEye 视频监控组件 list 信息泄漏洞 CVE-2022-25568 | PeiQi文库 (wgpsec.org) 一、漏洞描述&#xff1a; motionEye是用Python写的motion的Web前端&#xff0c;它可以监视视频信号并检测运动。它可以与多种类型的摄像机配合使用,也可以与电影文件一起…
阅读更多...
Docker本地部署Chatbot Ollama搭建AI聊天机器人并实现远程交互

Docker本地部署Chatbot Ollama搭建AI聊天机器人并实现远程交互

文章目录 前言1. 拉取相关的Docker镜像2. 运行Ollama 镜像3. 运行Chatbot Ollama镜像4. 本地访问5. 群晖安装Cpolar6. 配置公网地址7. 公网访问8. 固定公网地址 前言 本文主要分享如何在群晖NAS本地部署并运行一个基于大语言模型Llama 2的个人本地聊天机器人并结合内网穿透工具…
阅读更多...
美团图床设置教程

美团图床设置教程

大厂图床&#xff0c;CDN加速 项目地址&#xff1a;https://github.com/woniu336/mt-img 使用方法 在mt.php填上你的token即可&#xff0c;然后打开index.html上传图片 获取token方法 注册https://czz.meituan.com/发布视频&#xff0c;上传封面&#xff0c;注意在上传封面后…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023