一文讲透useMemo和useCallback

在React项目中是经常会使用到useMemo,useCallBack的,这是两个优化性能的方法,那么useMemo,useCallBack到底是什么呢?什么时候用呢? 下面将给打击分享相关知识,希望对大家有所帮助同时欢迎讨论指出问题!

1.useMemo
  • useMemo:会在在组件首次加载和重渲染期间执行,执行的函数需要和渲染相关的。

使用示例如下:

import React, {useMemo, useState} from "react";

function Memo (){

   const [count, setCount] = useState(0)

   const [bool, setBool] = useState(true)

useMemo(() => { console.log('useMemo') }, [count])

return ( <div>

        <div>{count}</div>

        <div>{bool ? '正面' : '反面'}</div>

       <button onClick={() => setCount(count + 1)}>+1哟!</button>        <button onClick={() => setBool(!bool)}>点击取反操作</button> </div> ) } export default Memo;

useMemo 类似于Vue的计算属性computed,监听某个值的变化,根据变化的值重新计算新值;通过点击触发改变count的值,组件会重新渲染且useMemo会监听count值的变化进行重新计算,但是当我触发改变bool的值,组件只进行了重新渲染但是useMemo没有重新计算并执行,因为当前useMomo监听的时count的变化,其他变化则不会去管;

2.useCallback
  • useCallback:会在渲染期间执行,返回一个函数,useCallback是用来帮忙缓存函数的,当依赖项没有发生变化时,返回缓存的指针,当在依赖项变化的时候会更新,返回一个新的函数

使用示例:

import React, { useState, useCallback } from 'react'; export default function App() { const [count1, setCount1] = useState(0); const [count2, setCount2] = useState(0); const handleClickButton1 = () => {setCount1(count1 + 1)}; const handleClickButton2 = useCallback(() => { console.log('useCallback') setCount2(count2 + 1); }, [count2]); return ( <div> <div> <Button onClick={handleClickButton1}>点击Button1</Button> </div> <div> <Button onClick={handleClickButton2}>点击Button2</Button> </div> </div> ); }

详细讲解:经过useCallback优化后,当Button2 是点击触发时自身时才会更新,Button1只要父组件更新后才会变更。

为什么使用 useMemo 和 useCallback

使用 memo 通常有三个原因:

  1. ✅ 防止不必要的 effect。
  2. ❗️防止不必要的 re-render。
  3. ❗️防止不必要的重复计算。

后两种优化往往被误用,导致出现大量的无效优化或冗余优化。下面详细介绍这三个优化方式。

防止不必要的 effect

如果一个值被 useEffect 依赖,那它可能需要被缓存,这样可以避免重复执行 effect。

const Component = () => { // 在 re-renders 之间缓存 a 的引用 const a = useMemo(() => ({ test: 1 }), []); useEffect(() => { // 只有当 a 的值变化时,这里才会被触发 doSomething(); }, [a]); // the rest of the code };

useCallback 同理:

const Component = () => { // 在 re-renders 之间缓存 fetch 函数 const fetch = useCallback(() => { console.log('fetch some data here'); }, []); useEffect(() => { // 仅fetch函数的值被改变时,这里才会被触发 fetch(); }, [fetch]); // the rest of the code };

当变量直接或者通过依赖链成为 useEffect 的依赖项时,那它可能需要被缓存。这是 useMemo 和 useCallback 最基本的用法。

防止不必要的 re-render

进入重点环节了🔔。正确的阻止 re-render 需要我们明确三个问题:

  1. 组件什么时候会 re-render。
  2. 如何防止子组件 re-render。
  3. 如何判断子组件需要缓存。
1. 组件什么时候会 re-render

三种情况:

  1. 当本身的 props 或 state 改变时。
  2. Context value 改变时,使用该值的组件会 re-render。
  3. 当父组件重新渲染时,它所有的子组件都会 re-render,形成一条 re-render 链。

第三个 re-render 时机经常被开发者忽视,导致代码中存在大量的无效缓存

例如:

const App = () => { const [state, setState] = useState(1); const onClick = useCallback(() => { console.log('Do something on click'); }, []); return ( // 无论 onClick 是否被缓存,Page 都会 re-render <Page onClick={onClick} /> ); };

当使用 setState 改变 state 时,App 会 re-render,作为子组件的 Page 也会跟着 re-render。这里 useCallback 是完全无效的,它并不能阻止 Page 的 re-render。

2. 如何防止子组件 re-render

必须同时缓存 onClick 和组件本身,才能实现 Page 不触发 re-render。

const PageMemoized = React.memo(Page); const App = () => { const [state, setState] = useState(1); const onClick = useCallback(() => { console.log('Do something on click'); }, []); return ( // Page 和 onClick 同时 memorize <PageMemoized onClick={onClick} /> ); };

由于使用了React.memo,PageMemoized 会浅比较 props 的变化后再决定是否 re-render。onClick 被缓存后不会再变化,所以 PageMemoized 不再 re-render。

然而,如果 PageMemoized 再添加一个未被缓存的 props,一切就前功尽弃 🤯 :

const PageMemoized = React.memo(Page); const App = () => { const [state, setState] = useState(1); const onClick = useCallback(() => { console.log('Do something on click'); }, []); return ( // page WILL re-render because value is not memoized <PageMemoized onClick={onClick} value={[1, 2, 3]} /> ); };

由于 value 会随着 App 的 re-render 重新定义,引用值发生变化,导致 PageMemoized 仍然会触发 re-render。

现在可以得出结论了,必须同时满足以下两个条件,子组件才不会 re-render:

  1. 子组件自身被缓存。
  2. 子组件所有的 prop 都被缓存。
3. 如何判断子组件需要缓存

我们已经了解,为了防止子组件 re-render,需要以下成本:

  1. 开发者工作量的增加: 一旦使用缓存,就必须保证组件本身以及所有 props 都缓存,后续添加的所有 props 都要缓存。
  2. 代码复杂度和可读性的变化:代码中出现大量缓存函数,这会增加代码复杂度,并降低易读性。

除此之外还有另外一个成本:性能成本。 组件的缓存是在初始化时进行,虽然每个组件缓存的性能耗费很低,通常不足1ms,但大型程序里成百上千的组件如果同时初始化缓存,成本可能会变得很可观。

所以局部使用 memo,比全局使用显的更优雅、性能更好,坏处是需要开发者主动去判断是否需要缓存该子组件。

🤨 那应该什么时候缓存组件,怎么判断一个组件的渲染是昂贵的?

很遗憾,似乎没有一个简单&无侵入&自动的衡量方式。通常来说有两个方式:

人肉判断,开发或者测试人员在研发过程中感知到渲染性能问题,并进行判断。通过工具,目前有一些工具协助开发者在查看组件性能:如 React Dev Tools Profiler,这篇文章介绍了使用方式如这个 hooks:useRenderTimes另外,React 在 16.5版本后提供了 Profiler API:_它可以识别出应用中渲染较慢的部分,或是可以使用类似 memoization 优化的部分_。所以可以通过 puppeteer 或 cypress 在自动化集成中测试组件性能,这很适合核心组件的性能测试。

防止不必要的重复计算

如 React 文档所说,useMemo 的基本作用是,避免在每次渲染时都进行高开销的计算。

🤨 那什么是“高开销的计算”?

高开销的计算其实极少出现,如下示例,对包含 250 个 item 的数组 countries 进行排序、渲染,并计算耗时。

const List = ({ countries }) => { const before = performance.now(); const sortedCountries = orderBy(countries, 'name', sort); // this is the number we're after const after = performance.now() - before; return ( // same ) };

结果如图所示,排序耗时仅用了 4 毫秒,而渲染图中的 List 组件(仅仅只是 button + 文字)却用了 20 毫秒,5倍的差距,代码详见 codesandbox.。 大部分情况下,我们的计算量要比这个 250 个 item 的数组少,而组件渲染要比这个 List 组件复杂的多,所以真实程序中,计算和渲染的性能差距会更大。

可见,组件渲染才是性能的瓶颈,应该把 useMemo 用在程序里渲染昂贵的组件上,而不是数值计算上。当然,除非这个计算真的很昂贵,比如阶乘计算。

至于为什么不给所有的组件都使用 useMemo,上文已经解释了。useMemo 是有成本的,它会增加整体程序初始化的耗时,并不适合全局全面使用,它更适合做局部的优化。

为什么 React 没有把缓存组件作为默认配置?

关于这点 Dan Abramov 在推文上也给出了解释(虽然是个类比 😅):评论区里 react 的另一位核心开发者 Christopher Chedeau 也参与了讨论。 简而言之,他们认为:

  1. 缓存是有成本的,小的成本可能会累加过高。
  2. 默认缓存无法保证足够的正确性。

原因 2 的原文:correctness is not guaranteed for everything because people can mutate things. Christopher Chedeau 未给出进一步解释。或许他是指可能会导致跟 PureComponent相同的问题,即浅比较 mutate things 时,由于浅比较相等,导致组件未能 update 的问题。

结论

讲到这里我们可以总结出 useMemo/useCallback 使用准则了:

  1. 大部分的 useMemo 和 useCallback 都应该移除,他们可能没有带来任何性能上的优化,反而增加了程序首次渲染的负担,并增加程序的复杂性。
  2. 使用 useMemo 和 useCallback 优化子组件 re-render 时,必须同时满足以下条件才有效
    1. 子组件已通过 React.memo 或 useMemo 被缓存
    2. 子组件所有的 prop 都被缓存
  3. 不推荐默认给所有组件都使用缓存,大量组件初始化时被缓存,可能导致过多的内存消耗,并影响程序初始化渲染的速度。

关于第三点有相反观点,详见:Why We Memo All the Things,作者推荐默认给全部组件都加上 React.memo,并给所有 props 都套上 useMemo。他认为这样可以降低工程师心智负担,让工程师不必再自己判断什么时候使用 memorize。

总结

相同点:

useCallback 和 useMemo 都是性能优化的手段,类似于类组件中的 shouldComponentUpdate,在子组件中使用 shouldComponentUpdate, 判定该组件的 props 和 state 是否有变化,从而避免每次父组件render时都去重新渲染子组件。

不同点:

useCallback 和 useMemo 的区别是useCallback返回一个函数,当把它返回的这个函数作为子组件使用时,可以避免每次父组件更新时都重新渲染这个子组件。

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

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

相关文章

【java基础】spring中使用到的设计模式

Spring框架在其设计和实现中使用了多种设计模式&#xff0c;这些模式帮助Spring框架保持灵活性、可扩展性和易于集成的特点。以下是一些在Spring框架中常见和重要的设计模式&#xff1a; 工厂模式&#xff08;Factory Pattern&#xff09; Spring的核心容器使用了工厂模式&…

Redis在SpringBoot中配置

lettuce redis的使用方法有两种&#xff0c;jedis和lecttuce&#xff0c;jedis用的不是很多&#xff0c;下面讲解用lettuce的使用方法。 首先导包&#xff1a; <!--redis依赖--> <dependency><groupId>org.springframework.boot</groupId><artif…

机器视觉系列之【硬件知识】-工业相机(四)

目录 几个高频面试题目 工业彩色相机如何调节白平衡解决偏色问题 算法原理 多光谱成像技术和相机选型 多光谱相机技术 选择多光谱成像相机技术时的主要考虑因素 智慧工厂机器视觉感知与控制 1 智慧工厂与机器视觉检测控制技术 2 智慧工厂机器视觉感知与控制 基于机器视…

conda常用命令整理

Anaconda是一个流行的Python和R编程语言的开源发行版&#xff0c;用于科学计算和数据分析。它包含了许多常用的开源软件包和工具&#xff0c;适用于数据科学、机器学习、大数据处理和科学计算等领域。Anaconda的核心是conda。conda是一个包管理器和环境管理器&#xff0c;可以轻…

详解yolov5和yolov8以及目标检测相关面试

一、与yoloV4相比&#xff0c;yoloV5的改进 输入端&#xff1a;在模型训练阶段&#xff0c;使用了Mosaic数据增强、自适应锚框计算、自适应图片缩放基准网络&#xff1a;使用了FOCUS结构和CSP结构Neck网络&#xff1a;在Backbone和最后的Head输出层之间插入FPN_PAN结构Head输出…

[NOIP2009 提高组] 最优贸易(含代码题解)

[NOIP2009 提高组] 最优贸易 题目描述 C C C 国有 n n n 个大城市和 m m m 条道路&#xff0c;每条道路连接这 n n n 个城市中的某两个城市。任意两个城市之间最多只有一条道路直接相连。这 m m m 条道路中有一部分为单向通行的道路&#xff0c;一部分为双向通行的道路&am…

NLP-使用Word2vec实现文本分类

Word2Vec模型通过学习大量文本数据&#xff0c;将每个单词表示为一个连续的向量&#xff0c;这些向量可以捕捉单词之间的语义和句法关系。本文做文本分类是结合Word2Vec文本内容text&#xff0c;预测其文本标签label。以下使用mock商品数据的代码实现过程过下&#xff1a; 1、…

router-link-active和router-link-exact-active

router-link-active 用途&#xff1a;在Vue Router中&#xff0c;router-link-active是一个动态类名&#xff0c;用于表示当前激活的路由链接。当路由匹配到某个<router-link>组件的to属性所指定的路径时&#xff0c;Vue会自动给这个<router-link>组件添加router-l…

数字IC后端流程简述

1. 设计输入 目标:接收前端设计(如RTL代码和约束文件)的输出。 工具:前端设计工具(如Synopsys Design Compiler或Cadence Genus)。 步骤: 确保前端设计的RTL代码经过综合并生成了门级网表(Netlist)。 收集约束文件(Constraints),如时序约束(SDC文件)、功率约束等…

JMeter的使用方法

软件安装&#xff1a; 参考链接&#xff1a;JMeter 下载安装及环境配置&#xff08;包含jdk1.8安装及配置&#xff09;_jmeter5.2.1需要什么版本的jdk-CSDN博客 前置知识储备&#xff1a; JMeter的第一个案例 增加线程数 线程&#xff08;thread&#xff09;是操作系统能够进…

ROS2入门到精通—— 2-8 ROS2实战:机器人安全通过狭窄区域的方案

0 前言 室内机器人需要具备适应性和灵活性&#xff0c;以便在狭窄的空间中进行安全、高效的导航。本文提供一些让机器人在狭窄区域安全通过的思路&#xff0c;希望帮助读者根据实际开发适当调整和扩展 1 Voronoi图 Voronoi图&#xff1a;根据给定的一组“种子点”&#xff0…

【数据挖掘】词云分析

目录 1. 词云分析 2. Python 中的 WordCloud 库 1. 词云分析 词云&#xff08;Word Cloud&#xff09;是数据可视化的一种形式&#xff0c;主要用于展示文本数据中单词的频率和重要性。它具有以下几种主要用途和意义&#xff1a; 1. 文本分析 • 识别关键主题&#xff1a;通…

微信小程序 async-validator 表单验证 第三方包

async-validator 是一个基于 JavaScript 的表单验证库&#xff0c;支持异步验证规则和自定义验证规则 主流的 UI 组件库 Ant-design 和 Element 中的表单验证都是基于 async-validator 使用 async-validator 可以方便地 构建表单中逻辑&#xff0c;使得错误提示信息更加友好和灵…

2、程序设计语言基础知识

这一章节的内容在我们的软件设计师考试当中&#xff0c;考的题型比较固定&#xff0c;基本都是选择题&#xff0c;分值大概在2~4分左右。 而且考的还多是程序设计语言的一些基本语法&#xff0c;特别是这两年比较火的Python。 所以对于有一定要编程基础的即使本章的内容不学习&…

独孤思维:即便副业卷,也能继续赚钱

01 前段时间独孤倒腾了一下午&#xff0c;终于整出了第一个关于独孤ip的短视频内容。 之所以搞这么久&#xff0c;独孤一直在调整封面&#xff0c;视频尺寸&#xff0c;内容抽帧&#xff0c;背景音乐和文案。 独孤是处女座。 所有的环节&#xff0c;都必须让自己看着舒服满…

AI学习记录 - 图像识别的基础入门

代码实现&#xff0c;图像识别入门其实非常简单&#xff0c;这里使用的是js&#xff0c;其实就是把二维数组进行公式化处理&#xff0c;处理方式如上图&#xff0c;不同的公式代表的不同的意义&#xff0c;这些意义网上其实非常多&#xff0c;这里就不细讲了。 const getSpecif…

JavaScript构造函数小挑战

// 编码挑战 #1 /* 使用构造函数实现一辆汽车。一辆汽车有一个品牌和一个速度属性。speed 属性是汽车当前的速度&#xff0c;单位为 km/h&#xff1b; a. 执行一个 “accelerate ”方法&#xff0c;将汽车的速度提高 10&#xff0c;并将新速度记录到控制台&#xff1b; 3. a.…

VSCode python autopep8 格式化 长度设置

ctrl, 打开设置 > 搜索autopep8 > 找到Autopep8:Args > 添加项--max-line-length150

等保测评练习卷17

等级保护初级测评师试题17 姓名: 成绩: 判断题(101=10分)1. 关于安全区域边界的安全审计,三级系统的要求包括应对审计进程进行保护,防止未经授权的中断。( F ) 是安全计算环境的安全审计 2.…

前端循环依赖

前端中循环依赖 什么是循环依赖: 两个以上模块之间互相引用&#xff0c;构成闭环依赖。 保持依赖引入的单向流通性&#xff01; 示例&#xff1a; 不要觉得自己不会写出这样的代码&#xff0c;当项目庞大后一旦出现这样的问题将会造成无法排查的问题。 // 在a.js 引用 b.js …