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。

相关文章

前端bug调试的方法技巧及常见错误

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》：本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...
mysql线上查询之前要性能调优的技巧及示例

mysql线上查询之前要性能调优的技巧及示例

《mysql线上查询之前要性能调优的技巧及示例》文章介绍了查询优化的几种方法,包括使用索引、避免不必要的列和行、有效的JOIN策略、子查询和派生表的优化、查询提示和优化器提示等,这些方法可以帮助提高数... 目录避免不必要的列和行使用有效的JOIN策略使用子查询和派生表时要小心使用查询提示和优化器提示其他常
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2