react Hook 之 memo，useCallback，useMemo 性能优化

2023-11-01 04:10
文章标签 javascript react 优化 性能 frontend hook memo usememo usecallback

本文主要是介绍react Hook 之 memo，useCallback，useMemo 性能优化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

本文示例

基础示例

需求： 编写个父子组件

父组件

import React, { useState } from 'react'
import Child from './child'
export default function Parent(props: any) {const [num, setNum] = useState(0)const handleClick = () => {setNum(num + 1)}return (<div><h2>{num}</h2><button onClick={handleClick}>更改num</button>{/* 引用子组件 */}<Child /></div>)
}

子组件

export default function Child(props: any) {console.info('子组件渲染了')return <div>我是子组件</div>
}

现象：

每次点击"更改num"按钮，控制台都会弹出"子组件渲染了"
子组件渲染

React.memo

上面子组件里并没有依赖父组件任何属性，却在每次父组件更改时，都会被重新渲染，此时可以用 React.memo 优化。

定义

const MyComponent = React.memo(function MyComponent(props) {/* 使用 props 渲染 */
});

React.memo 相当于 PureComponent，是个高阶组件，默认对 props 做一次浅比较，如果 props
没有更改，则子组件不会重新执行。

如果想要自定义对比过程，可以通过第二个参数来实现：

function MyComponent(props) {/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {/*如果把 nextProps 传入 render 方法的返回结果与将 prevProps 传入 render 方法的返回结果一致则返回 true，否则返回 false*/
}
export default React.memo(MyComponent, areEqual);

优化

import React, { useState } from 'react'
import Child from './child'
const MemoChild = React.memo(Child) // 新增代码
export default function Parent(props: any) {const [num, setNum] = useState(0)const handleClick = () => {setNum(num + 1)}return (<div><h2>{num}</h2><button onClick={handleClick}>更改num</button>{/* 引用子组件 */}{/* <Child />   */}{/* 新增代码 */}<MemoChild /> </div>)
}

现象：
每次点击"更改num"按钮，控制台都不再弹出"子组件渲染了"
memo
那么这个示例是否完美了呢？如果说父子组件之间不通讯，那么这样就可行了。但父组件要传数据跟事件给子组件时，就仍然会有问题。

父组件传递事件给子组件示例

更改父组件代码为：

import React, { useState } from 'react'
import Child from './child'
const MemoChild = React.memo(Child)
export default function Parent(props: any) {const [num, setNum] = useState<number>(0)const handleClick = () => {setNum(num + 1)}const handleChange = () => {console.info(2323)}return (<div><h2>{num}</h2><button onClick={handleClick}>更改num</button>{/* 引用子组件 */}{/* 新增代码 */}{/* 父组件传递 handleChange 事件给子组件 */}<MemoChild handleChange={handleChange}/> </div>)
}

现象：

每次点击"更改num"按钮，控制台都会弹出"子组件渲染了"
父子通讯
当传递事件给子组件时，点击更改 num ，控制台会再次打印出"子组件渲染了"，说明子组件又重新渲染了。

分析原因：

首先一个组件重新渲染，一般是三种情况导致的：

  1. 组件自己的状态改变了
  2. 父组件重新渲染，但父组件的 props 没有改变
  3. 父组件重新渲染，父组件传递的 props 改变

很明显，第一种不是，因为子组件并没有任何状态。

第二种，已经用 React.memo 优化掉了，所以也不是。

那说明就是第三种， 传递的 props 改了。

那为什么传递的 handleChange 函数会发生改变呢？

因为在函数式组件里每次重新渲染，都会重新从头开始执行函数调用，那么这两次创建的 handleChange 函数肯定发生了改变，所以导致子组件重新渲染。

流程：

  1. 用户点击"更改num"按钮
  2. 父组件修改 num 的状态值
  3. 状态值改变导致父组件重新渲染
  4. handleChange 函数体会重新注册一遍
  5. 传递给 handleChange props 也就变了
  6. 子组件重新渲染

useCallback

找到原因，那么就要想法子，在函数没有改变的情况下，重新渲染的时候保持函数的引用一致

定义

const memoizedCallback = useCallback(() => {doSomething(a, b);},[a, b],
);

返回一个 memoized 回调函数。

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized
版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如
shouldComponentUpdate）的子组件时，它将非常有用。

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

优化

// 新增引入 useCallback
import React, { useState, useCallback } from 'react'
import Child from './child'
const MemoChild = React.memo(Child) 
export default function Parent(props: any) {const [num, setNum] = useState<number>(0)const handleClick = () => {setNum(num + 1)}// 修改代码// 通过 useCallback 进行记忆 handleChange, 并将记忆的 handleChange 传递给 MemoChildconst memoizedCallback = useCallback(() => {console.info(2323)},[])return (<div><h2>{num}</h2><button onClick={handleClick}>更改num</button>{/* 引用子组件 */}<MemoChild handleChange={memoizedCallback} /></div>)
}

现象：

每次点击"更改num"按钮，控制台都不再弹出"子组件渲染了"
useCallback
可以看到子组件并不会重新渲染，那么是不是可以结束了呢？

不，父子组件之间除了传递事件，还会传递状态

父组件传递状态给子组件示例

import React, { useState } from 'react'
import Child from './child'
const MemoChild = React.memo(Child) // 新增代码
export default function Parent(props: any) {const [num, setNum] = useState<number>(0)const [name] = useState<string>()const handleClick = () => {setNum(num + 1)}return (<div><h2>{num}</h2><button onClick={handleClick}>更改num</button>{/* 引用子组件 */}{/* 新增代码 */}{/* 父组件传递 name 状态给子组件 */}<MemoChild name={name} /></div>)
}

现象：

每次点击"更改num"按钮，控制台都不会弹出"子组件渲染了"。
memo
这不是正常的吗？这不是在逗我吗？不是的，请继续看下来
一张散图

上面传递的 name 是基本类型，如果是对象呢？
更改代码如下：

import React, { useState } from 'react'
import Child from './child'
const MemoChild = React.memo(Child) 
export default function Parent(props: any) {const [num, setNum] = useState<number>(0)const handleClick = () => {setNum(num + 1)}return (<div><h2>{num}</h2><button onClick={handleClick}>更改num</button>{/* 引用子组件 */}{/* 修改代码 */}{/* 父组件传递 name 状态给子组件 */}{/* <MemoChild name={name} /> */}<MemoChild person={{name:"张三"}} /></div>)
}

现象：

每次点击"更改num"按钮，控制台都会弹出"子组件渲染了"。
传递对象
实际业务中，传递的对象肯定更复杂，我这里只是为了说明只要是个对象，就会导致子组件重新渲染。

原因跟上面传递事件是一样的，传递对象，每次重新渲染都指向新的引用，子组件 react.memo 进行浅比较，会得出传递的 props 不等了，所以重新渲染。

useCallback 是用来处理父子传递事件的优化，至于传递状态就要用到 useMemo。

useMemo

定义

 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲> 染时都进行高开销的计算。

优化

import React, { useState,useMemo } from 'react'
import Child from './child'
const MemoChild = React.memo(Child)
export default function Parent(props: any) {const [num, setNum] = useState<number>(0)const handleClick = () => {setNum(num + 1)}return (<div><h2>{num}</h2><button onClick={handleClick}>更改num</button>{/* 采用 useMemo */}<MemoChild person={useMemo(()=>({name:"张三"}),[])} /></div>)
}

现象：

每次点击"更改num"按钮，控制台都不会弹出"子组件渲染了"。
memo

这下可以放心传递状态跟事件了。

总结

React hook 比起类组件有了更大的灵活度和自由，但同时对开发者要求也更高了。因为 Hooks 使用不恰当很容易出现性能问题。
memo，useMemo，useCallback 都是用来提升性能的。

  1. memo 相当于 shouldComponentUpdate
  2. useCallback 让 shouldComponentUpdate 可以正常发挥作用
  3. useMemo 避免频繁的昂贵计算，当然也可以用在像本文 props 状态上

那什么时候用这几个 api 呢？

实际上在简单的应用中，尽量少用，因为对于简单应用，就算重新渲染也不会消费多少资源，而采用这几个 api 时，每次都会对第二个参数进行比较，反而消耗了资源。

当然对于开销比较大的组件就尽量用 memo。

这篇关于react Hook 之 memo，useCallback，useMemo 性能优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/320381。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
HDFS—存储优化（纠删码）

HDFS—存储优化（纠删码）

纠删码原理 HDFS 默认情况下，一个文件有3个副本，这样提高了数据的可靠性，但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码，采用计算的方式，可以节省约50％左右的存储空间。 此种方式节约了空间，但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件，都会执行此策略。 默认只开启对 RS-6-3-1024k
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
MySQL高性能优化规范

MySQL高性能优化规范

前言：      笔者最近上班途中突然想丰富下自己的数据库优化技能。于是在查阅了多篇文章后，总结出了这篇！ 数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来） 数据库对象的命名要能做到见名识意，并且最后不要超过32个字符 临时库表必须以tmp_为前缀并以日期为后缀，备份
阅读更多...
黑神话，XSKY 星飞全闪单卷性能突破310万

黑神话，XSKY 星飞全闪单卷性能突破310万

当下，云计算仍然是企业主要的基础架构，随着关键业务的逐步虚拟化和云化，对于块存储的性能要求也日益提高。企业对于低延迟、高稳定性的存储解决方案的需求日益迫切。为了满足这些日益增长的 IO 密集型应用场景，众多云服务提供商正在不断推陈出新，推出具有更低时延和更高 IOPS 性能的云硬盘产品。 8 月 22 日 2024 DTCC 大会上（第十五届中国数据库技术大会），XSKY星辰天合正式公布了基于星
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2