react组件性能优化React.memo和useMemo

已于 2024-04-26 00:35:39 修改
阅读量812 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 深入浅出react 文章标签： react.js
于 2021-11-22 23:18:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuelian3015/article/details/121439802
本文探讨了React组件的性能优化，重点介绍了React.memo和useMemo的使用。React.memo作为高阶组件，通过props的浅比较避免不必要的组件渲染。然而，它不考虑组件自身的state变化。另一方面，useMemo用于控制是否重复执行特定逻辑片段，适用于优化组件内部的部分计算过程。通过实例展示了这两个工具在防止无谓渲染方面的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前有一篇记录了，如何设计合理的react组件

设计高性能react组件的思路

React.memo

本质上是高阶组件，对传入的组件进行封装，调用方法如下：
首先我们声明一个组件D，

function ComD(props) {
   
   
    console.log("D组件")
    return
了解本专栏 订阅专栏 解锁全文 超级会员免费看
react：memo、useMemo、useCallback的区别
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
05-15 931
当我们谈论React性能优化时，有三个关键函数不容忽视：React.memo、useMemo和useCallback。今天，我们就来深入解析一下这些函数的使用场景，帮助大家更好地理解它们的用途和效果。此外，关于技术选择和个人偏好，我想分享一下我的观点。我个人偏爱Vue的简洁与直观，能够让我们更专注于业务开发而无需过度关注性能优化。而 React 的性能优化技术我并不喜欢。就像手动挡和自动挡汽车的选择，两者确实都有其独特之处。手动挡汽车提供了更多的操作自由度，但对于很多驾驶者来说，汽车就是要易用。
【React的useMemo钩子详解】
最新发布
Emnational的博客
05-09 661
是 React 提供的一个性能优化 Hook，用于缓存计算结果，避免在每次渲染时都进行重复计算。 第一个参数：计算函数，返回需要缓存的值 第二个参数：依赖项数组，当依赖项变化时才会重新计算 核心机制 缓存触发条件：缓存存储方式： 2. 稳定引用类型 3. 避免子组件不必要渲染 与相关 Hook 的区别 特性 执行时机 渲染阶段同步执行 浏览器绘制后异步执行 渲染阶段同步执行 主要用途 缓存计算结果 处理副作用 缓存函数引用 返回值 返回缓存值 无返回值 返回缓存函数
React中的useMemo和memo
qq_53742640的博客
07-07 1210
React是一个声明式的JavaScript库，用于构建用户界面。在开发过程中，性能优化是一个重要的方面。useMemo和memo是React提供的工具，用于帮助开发者避免不必要的渲染和计算，从而提升应用性能。
【React系列】React.memo() vs useMemo()
、蹄码笑春风的博客
06-17 598
React.memo()和useMemo()的必要性 从上述所见，不难看出每当父组件被重新渲染时，子组件的渲染方法也被调用。这将触发子组件的虚拟DOM与之前的虚拟DOM状态做差异检查。 但是，真实的DOM不会改变，因为子组件没有变化。虽然真实的DOM没有变化，但与虚拟的DOM进行比较需要一些时间才能看到相同的内容。因此，这种行为会导致严重的性能问题，并增加大规模应用的加载时间。这就是为什么我们需要使用React.memo()和useMemo()来优化React组件的渲染过程。React.memo
react 性能提升（三） react.memo
北芒的博客
07-13 513
介绍 所谓的提升性能就是在某些场景下优化react的render渲染次数 普通组件的话+shouldComponentUpdate ---------- 点击跳转介绍 true 执行 render false 不去执行 render 纯组件PureComponent 内部采用浅比较实现的（只能比较基本数据类型，遇到数组对象就虚了） ---------- 点击跳转介绍 16.6版本后推出react.memo方法，可以配合函数式组件一起来去提升react性能。⬅⬅⬅⬅⬅ 本文介绍 前景提要（可.
React性能优化之React.memo、useMemo和useCallback
weixin_51958960的博客
02-24 254
React.memo 减少子组件不必要的刷新 只用传递的值变化后，子组件才会刷新。[ count ] 仅更新count时变化做更新，为 [ ] 时只做一次更新，缓存一个值，当count变化时，值做更新，用于控制子组件的刷新。* 缺点：值为引用类似 函数、对象、数组 memo则会失效。针对复杂的运算做处理。
React 开发（十四）：性能优化 - 使用 React.memo 和 useMemo
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-06 1095
React.memo是 React 提供的一个高阶组件（HOC），它可以帮助我们优化函数组件的性能。它通过对组件的 props 进行浅比较，决定是否需要重新渲染组件。如果组件的 props 没有变化，则 React 会跳过渲染过程，避免不必要的性能消耗。简而言之，React.memo能够缓存上一次渲染的结果，只有在组件的 props 发生变化时，才会重新渲染。这样可以提高组件的性能，尤其是对于频繁渲染的组件。useMemo是 React 提供的一个 Hook，允许我们缓存计算结果。
React性能优化的深度解析：React.memo和useMemo的真相与误区
weixin_42429220的博客
03-19 999
本文将深入剖析这两个API的工作原理、适用场景，并通过实际案例分析它们的优缺点，帮助开发者做出明智的性能优化决策。性能优化是一门平衡的艺术，需要开发者理解底层原理，并结合实际场景做出明智的决策。React.memo和useMemo是强大的性能优化工具，但它们需要在正确的场景下使用才能发挥作用。：React DevTools和性能分析工具将提供更精确的优化建议，帮助开发者做出正确的优化决策。：未来版本的React可能会内置更智能的优化机制，自动识别适合使用memo和缓存的场景。
React.memo()和 useMemo()的用法是什么，有哪些区别
qq_44062823的博客
04-01 924
使用 React.memo()来优化组件的渲染性能，尤其是当组件的 props 没有变化时，避免不必要的重新渲染。使用 React.useMemo()来优化组件内的计算逻辑，避免重复计算，尤其是在计算复杂或耗时的场景中。根据具体的性能优化需求，选择合适的工具来提升应用的性能。
在React中，如何利用React.memo函数对函数组件进行优化？
极客前端探索者的博客
06-21 528
React.memo是 React 的一个高阶组件，用于对函数组件进行性能优化。它通过记忆化（memoization）来避免不必要的重新渲染。当组件的 props 没有变化时，React.memo可以防止组件重新渲染，从而提高应用的性能。
React.memo 和 useMemo
edwardwzw的博客
04-25 603
React 中，通常父组件的某个state发生改变，会引起父组件的重新渲染（和其他state的重新计算），从而会导致子组件的重新渲染（和其他非相关属性的重新计算）问题一：如何避免因为某个state变化，导致父组件的中其他属性(state)的重新计算？useMemo如何避免因为父组件的重新渲染，导致子组件中非相关属性的重新计算？React.memo。
react hook useMemo组件渲染性能优化
打码键盘侠
12-28 494
useMemo其实是根useEffie的效果是一样的，都是靠第二个参数来确定要不要重新渲染 import React, { useState } from 'react'; import { Row, Col, Button } from 'antd'; import RowList from '../components/RowList'; const IndexPage: React.FC = () => { const [dataList, setDataList] = useSt.
【React】React.memo与useMemo的区别和联系
double_sweet1的博客
04-09 8342
概述 React.memo和useMemo都是React进行性能优化的手段，它们允许我们缓存需要进行高性能计算的结果，以便下次渲染页面时，返回缓存的值而不必重新计算函数，从而确保我们的应用程序运行的更快，避免不必要的开销。 React.memo 详解 为什么memo(memoization的简写)在React中这么重要呢？ 在React的组件中，如果子组件没有被React.memo包裹，或者没有使用useMemo来处理props传递参数，那么当父组件的任何值更新时，整个组件都将会进行重新渲染，包括父组件下面
React.memo； react.memo 与useMemo区别
xbczrz的博客
06-24 991
react性能优化之react.memo
使用useCallback React.mome useMemo优化
baidu_41677887的博客
01-12 425
为什么要使用useCallback React.mome useMemo？ 首页我们需要明确一点：函数式组件为什么会更新？ 1、父组件传入的props更新了。 2、父组件更新渲染了，引起了子组件更新。 3、由于组件内部有setState触发组件更新。 由于组件更新重新render会导致重新渲染，这样的话如果一个页面内子组件过多那么就会导致浏览器多次渲染组件浪费性能，所以为了避免浏览器的无用渲染，可以推荐使用useCallback React.mome useMemo来优化，不过一般的情况下浏览器重绘dom是
优化 React 组件性能：深入了解 useMemo
m0_61607678的博客
09-22 615
useMemo。
React中memo()，useMemo()，useCallback()的使用(区别，解决了什么问题)
你是我修复不了的bug，但我会用一生去维护
05-09 1110
React中memo()，useMemo()，useCallback()的使用 前言：React框架中，当组件的props或state发生变化时，会重新渲染组件，实际开发中会遇到不必要的重新渲染场景。这里的memo()，useMemo()，useCallback()都是应用在函数组件中。调理不够清楚，希望你能够一步一步看。 React.memo() React.memo()和类组件中React.PureComponent()很相似，它可以帮助我们控制什么时候重新渲染组件，它适用于函数组件，但不适用于 cla
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
见贤思齐焉，见不贤内自省
12-09 1514
昨天学习了useMemo的使用，我们知道useMemo起到了缓存变量的作用。 而useCallback的作用起到了缓存函数的作用。下面我们来看一下怎么使用以及注意事项。
react usememo_明智地使用usememo和usecallback挂钩来优化您的React应用性能
weixin_26717681的博客
08-25 476
react usememoLearn how to optimise your React app performance by using the useMemo() and useCallback() hooks correctly and also learn when to use the React.memo function. 了解如何通过正确使用 useMemo() 和 useCal...
优化React函数组件性能：详解React.memo与避免无用渲染
本文将深入探讨如何通过shouldComponentUpdate生命周期函数和PureComponent来避免不必要的类组件渲染，然后重点转向React 16.6及后续版本引入的React.memo() API，专门针对函数组件性能提升。 首先，让我们回顾一下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

读心悦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值