【React系列】React.memo() vs useMemo()
React.memo()与useMemo()之间有什么主要区别?
性能优化是一只web开发中的一个重要讨论点。对于react团队同样如此,为了实现加速组件的渲染速度,采用“备忘录”的方式。
所以这个时候就React.memo()和 useMemo 钩子 就为了解决这个问题产生了。
本文将比较和对比React.memo和useMemo(),同时讨论它们的用例。
- 1
- 2
- 3
- 4
React.memo()和useMemo()的必要性
理解我们为什么需要React.memo()和useMemo()的最好方法是看看React是如何在没有记忆化的情况下重新呈现组件的。
为此,让我们考虑一个有两个React组件的简单例子。第一个组件是父组件。它有一个按钮,可以增加计数变量的值。
- 1
- 2
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>
)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
第二个组件是子组件,它显示从父组件传来的名字。
- 1
import React, { Component } from 'react'
export default function Child(props) {
console.log('Child Render')
return (
<div>
<h2>{props.name}</h2>
</div>
)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
一旦用户点击 "增加计数 "按钮,计数就会增加,这将导致父组件的重新渲染.
在这里,count变量的值变化并不影响props传递到子变量,子组件也不应该重新渲染。
在这里如果你业务代码逐渐开始多了,然后里面刚刚好采用了这种方式去开发对应的业务代码,页面的性能可想而知,会根据代码的增量而成反比。
- 1
- 2
- 3
从上述所见,不难看出每当父组件被重新渲染时,子组件的渲染方法也被调用。这将触发子组件的虚拟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)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
当我们点击增加计数按钮,子组件不会重现的,应用程序将重用前面呈现输出。
重要的是要记住,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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
什么是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>
)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
这表明在父组件中,我们正在使用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)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
由于memoizedValue被更新,子组件只有在你点击Force Child Render按钮时才会被重新渲染。
什么时候使用useMemo?
在使用useMemo()钩子之前,你需要确保几点:
- 你已经分析了这个组件,并验证了它是否在每次渲染时都会计算一个昂贵的值。
- 因为它是在渲染时执行的,你的useMemo()钩子没有副作用,所有的副作用都在useEffect()钩子里。
- 你不会违反任何React Hooks规则和标准。
使用useMemo()的理想情况是当你有计算密集型的函数时。useMemo()函数可以记忆你的函数返回的值,并在不同的渲染中保持它的内存。在大多数情况下,它返回一个你不能在你的React组件之外运行的结果。
这类似于将一个函数的响应保存到一个变量中,然后从变量中引用响应值,而不必每次都执行该函数。
你应该使用React.memo()还是useMemo()?
在React.memo()和useMemo()之间做出选择应该是很简单的。现在你对它们都有了充分的了解。
1.使用React.memo来记忆整个组件。
2.使用useMemo在一个功能组件中对一个值进行备忘。