React.memo 和 useMemo 的使用问题小结

更新时间：2022年11月04日 15:10:28 作者：前端小二哥

随着代码的增加，每次的状态改变，页面进行一次 reRender ，这将产生很多不必要的 reRender 不仅浪费性能，从而导致页面卡顿，这篇文章主要介绍了React.memo 和 useMemo 的使用问题小结,需要的朋友可以参考下

问题背景

大家在使用 React 框架进行开发时一定遇到过以下问题：

当函数式组件中的某一状态改变，整个组件刷新，重新渲染
在类组件中 setState() 时，整个组件也会重新渲染
以上问题若不进行优化，导致的结果是：
随着代码的增加，每次的状态改变，页面进行一次 reRender ，这将产生很多不必要的 reRender 不仅浪费性能，从而导致页面卡顿；

useMemo 进行优化

以下面 App 组件进行分析

import './App.css';
import ProfileTest from './components';
import { Profiler, useEffect, useMemo, useState, useRef } from 'react'
function App () {
  const [name, setName] = useState('')
  const [num, setNum] = useState(0)
  useEffect(() => {
    setTimeout(() => {
      console.log('111')
      setName('xxx')
    }, 2000)
  }, [])
  const memoVal = useMemo(() => {
    console.log('运行了useMemo num值为：', num);
    return num + 1
  }, [num])
  console.log('memoVal值为：', memoVal)
  console.log('父组件运行分割线----------------------------------------------------')
  const changeNum = () => {
    setNum(2)
  }
  return (
    <Profiler id='profile-test'>
      <div className="App">
        {/* <ProfileTest /> */}
        <button style={{ marginTop: 100 }} onClick={changeNum}>改变num</button>
      </div>
    </Profiler>
  );
}
export default App;

以上组件在首次渲染、以及 2秒后的执行结构如下图所示：

很显然首次渲染执行了，useMemo，而2秒后有状态变化后没有执行useMemo。
点击按钮改变 useMemo 的依赖项后可以发现，如下图所示 useMemo 又执行了。

因此在使用函数式组件时，可以使用 useMemo 减少不必要的reRender 提高组件的性能；

React.memo 进行优化

在以上组件的基础上，给App 增加一个子组件，代码如下所示：

import React from 'react'

export default function Children(props) {
  console.log('子组件运行了，接收的props是', props)
  console.log('子组件渲染分割线------------------------------------------')
  return <div>子组件</div>
}

首次render 以及 2s后组件的 reRender 控制台打印结果如下图所示：

由上图可以看出，reRender 时Children 组件的props并未变化，因此，此次Children 组件的reRender 是不必要的，需要进行优化；

props的值是基本类型

如果 Children 的 props 是基本类型，则可以做一下优化：

import React, { memo } from 'react'

function Children(props) {
  console.log('子组件运行了，接收的props是', props)
  console.log('子组件渲染分割线------------------------------------------')
  return <div>子组件</div>
}
export default memo(Children)

优化后控制台打印如下信息，一下信息可以看出 Children 组件没有进行 reRender

props的值是引用类型

若子组件的 props 是引用类型，则需要进行深度比较，此时React.memo()要传入第二个参数进行深度比较，改变后 Children 组件的代码如下所示：

import React, { memo } from 'react'

function Children(props) {
  console.log('子组件运行了，接收的props是', props)
  console.log('子组件渲染分割线------------------------------------------')
  return <div>子组件</div>
}
export default memo(Children, (preProps, nextProps) => {
  return JSON.stringify(preProps) === JSON.stringify(nextProps)
})

以上 memo 第二个参数，通过比较 preProps 和 nextProps 返回一个布尔值，使得props 进行深度比较；
注意：React.memo的第二个参数进行深度比较时有一定开销，其产生的开销存在大于子组件reRender的可能

写在最后

useMemo() 和 React.memo() 都是进行组件性能优化的方式，其区别是

useMemo 可以进行更加细粒度的优化(有依赖项)
React.memo() 可以控制props的浅比较和深度比较
React.memo在没有第二个参数的时候相当于class中的PureComponent，当增加了第二个参数的时候相当于生命周期中的shouldComponentUpdate；

到此这篇关于React.memo 和 useMemo 的使用问题小结的文章就介绍到这了,更多相关React.memo 和 useMemo内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

原生+React实现懒加载(无限滚动)列表方式
这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
React函数组件和类组件的区别及说明
这篇文章主要介绍了React函数组件和类组件的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React纯前端模拟实现登录鉴权
这篇文章主要为大家详细介绍了React纯前端模拟实现登录鉴权的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04
react实现阻止父容器滚动
这篇文章主要介绍了react实现阻止父容器滚动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
关于react-router中的Prompt组件使用心得
这篇文章主要介绍了关于react-router中的Prompt组件学习心得,Prompt组件作用是,在用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面，本文结合示例代码介绍的非常详细，需要的朋友可以参考下
2023-01-01
React 在非组件环境切换路由的方法
这篇文章主要介绍了React 在非组件环境切换路由的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
React-Native 桥接iOS原生开发详解
本篇文章主要介绍了React-Native 桥接iOS原生开发详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
react配置webpack-bundle-analyzer项目优化踩坑记录
这篇文章主要介绍了react配置webpack-bundle-analyzer项目优化踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
模块化react-router配置方法详解
这篇文章主要介绍了模块化react-router配置方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
React里的Fragment标签的具体使用
本文主要介绍了React里的Fragment标签的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01