【React系列】React.memo() vs useMemo()

news/2025/10/21 8:17:33/文章来源:https://www.cnblogs.com/Dsir/p/19154052

React.memo()与useMemo()之间有什么主要区别？

性能优化是一只web开发中的一个重要讨论点。对于react团队同样如此，为了实现加速组件的渲染速度，采用“备忘录”的方式。
所以这个时候就React.memo()和 useMemo 钩子 就为了解决这个问题产生了。本文将比较和对比React.memo和useMemo()，同时讨论它们的用例。

React.memo()和useMemo()的必要性

理解我们为什么需要React.memo()和useMemo()的最好方法是看看React是如何在没有记忆化的情况下重新呈现组件的。
为此，让我们考虑一个有两个React组件的简单例子。第一个组件是父组件。它有一个按钮，可以增加计数变量的值。

import Child from './Child'
import React, { useState } from 'react'export default function Parent() {const [count, setCount] = useState<number>(0)const handleClick = () => {setCount(count + 1)}console.log('prent')return (<div><button onClick={handleClick}>Increase Count</button><h2>{count}</h2><Child name={'Child COmponnt'} /></div>)
}

第二个组件是子组件，它显示从父组件传来的名字。

import React, { Component } from 'react'export default function Child(props) {console.log('Child Render')return (<div><h2>{props.name}</h2></div>)
}

一旦用户点击 "增加计数 "按钮，计数就会增加，这将导致父组件的重新渲染.
在这里，count变量的值变化并不影响props传递到子变量，子组件也不应该重新渲染。
在这里如果你业务代码逐渐开始多了，然后里面刚刚好采用了这种方式去开发对应的业务代码，页面的性能可想而知，会根据代码的增量而成反比。

在这里插入图片描述
从上述所见，不难看出每当父组件被重新渲染时，子组件的渲染方法也被调用。这将触发子组件的虚拟DOM与之前的虚拟DOM状态做差异检查。
但是，真实的DOM不会改变，因为子组件没有变化。虽然真实的DOM没有变化，但与虚拟的DOM进行比较需要一些时间才能看到相同的内容。因此，这种行为会导致严重的性能问题，并增加大规模应用的加载时间。

这就是为什么我们需要使用React.memo()和useMemo()来优化React组件的渲染过程。

什么是React.memo()?

React.memo()是在React 16.6中引入的，以避免功能组件中不必要的重新渲染。它是一个高阶组件，接受另一个组件的props。只有当props发生变化时，它才会渲染该组件。
现在让我们再次研究上述例子，了解React.memo()是如何工作的。但是，这一次，我们需要用React.memo()来包装子组件。

import React, { Component, memo } from 'react'function Child(props) {console.log('Child Render')return (<div><h2>{props.name}</h2></div>)
}export default memo(Child)

当我们点击增加计数按钮,子组件不会重现的,应用程序将重用前面呈现输出。
在这里插入图片描述
重要的是要记住，React.memo()将只检查props的改变。
如果功能组件有useState、useReducer或useContext等Hooks,它仍然会在状态或上下文发生变化时强制重新渲染。

此外，React.memo()将浅层地比较props对象中的复杂对象。对于特定业务场景可能需要类似shouldComponentUpdate这样的 API，你也可以传递一个自定义的比较函数作为第二个参数，基本用法在上一案例。高阶用法如下所示:

export function Child(props) { /* render using props */}
function areSame(prevProps, nextProps) { /* return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false */return prevProps === nextProps;}export default React.memo(Child, areSame);

什么是useMemo()?

useMemo()是开发者中最常用的React Hooks之一。它接受一个函数和一个依赖关系数组作为输入，并将该函数返回的值备忘化。
useMemo()的特点是，只有当其中一个依赖关系发生变化时，它才会重新计算备忘的值。这种优化有助于避免在每次渲染时进行昂贵的计算。
现在写一个例子，了解useMemo()是如何工作的：

import Child from './Child'
import React, { useState, useRef, useMemo } from 'react'export default function Parent() {const [count, setCount] = useState<number>(0)const [times, setTimes] = useState<number>(0)const handleClick = () => {setCount(count + 1)}const useMemoRef = useRef(0)const incrementUseMemoRef = () => useMemoRef.current++const memoizedValue = useMemo(() => incrementUseMemoRef(), [times])console.log('prent render')return (<div><button onClick={() => setTimes(times + 1)}>Force Child Render</button><br /><br /><br /><button onClick={handleClick}>Increase Count</button><Child memoizedValue={memoizedValue} /></div>)
}

这表明在父组件中，我们正在使用useRef()Hook来跟踪子组件重新渲染的次数。useMemo()Hook调用了incrementUseMemoRef函数，由useMemo() Hook返回的值然后被存储在memoizedValue变量中。每次依赖关系更新时，它都会将我们的useMemoRef.current的值增加一个。你会看到，如果你点击增加计数按钮，memoizedValue并没有得到更新。

import React, { Component, memo } from 'react'function Child({ memoizedValue }) {console.log('Child Render')return (<div><h2>Child Component</h2><p>I will only re-render when you click <b>Force Child Render.</b></p></div>)
}
export default memo(Child)

在这里插入图片描述