浅谈useMemo函数

什么是 useMemo？

useMemo 是 React 中的一个 Hook，它可以用来缓存计算结果，并在后续的渲染中重复利用这些计算结果。useMemo 接收两个参数：一个函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，useMemo 会重新执行传入的函数，并返回新的计算结果。

为什么需要 useMemo？

在 React 应用中，渲染组件是一个非常消耗资源的操作。如果在每次渲染时都进行一些昂贵的计算，就会导致应用的性能下降。为了避免这种情况，我们可以使用 useMemo 来缓存计算结果。这样，在后续的渲染中，只要依赖数组不发生变化，就可以直接使用缓存的计算结果，从而提高了组件的渲染性能。

语法

使用 useMemo 非常简单。首先，我们需要编写一个计算函数，然后将其作为第一个参数传递给 useMemo。例如：

import React, { useMemo } from 'react';function MyComponent() {const result = useMemo(() => {// 计算过程return value;}, [dep1, dep2]);// 渲染组件return (<div>{result}</div>);
}

在上面的代码中，我们编写了一个计算函数，并将其作为第一个参数传递给 useMemo。useMemo 还接收一个依赖数组作为第二个参数，其中包含了需要监视变化的变量。

当 dep1 或 dep2 发生变化时，useMemo 会重新执行计算函数，返回新的计算结果。如果 dep1 和 dep2 没有发生变化，则直接使用缓存的计算结果。

如何使用 useMemo？

使用前：

import React, { useMemo, useState } from "react";export const EgOfUseMemo: React.FC = () => {const [userInfo , setUserInfo] = useState({name: 'nobody',gender: 'male'})const formatGender = (gender) => {console.log('调用了翻译性别的方法')return gender === 'male' ? '男' : '女'}const handleClick = () => {setUserInfo({...userInfo,name: 'lvxiaobu'})}// 优化前，不使用useMemo的情况下，修改其他属性，也会重新调用formatGender方法，浪费计算资源// 每次点击按钮，都会调用一次formatGender方法const gender = formatGender(userInfo.gender)return (<div>姓名： {userInfo.name} -- 性别:  { gender } <br/><button onClick={handleClick}> 点击修改名字</button></div>)
}

不使用useMemo的情况下，修改其他属性，也会重新调用formatGender方法，浪费计算资源
使用后：

import React, { useMemo, useState } from "react";export const EgOfUseMemo: React.FC = () => {const [userInfo , setUserInfo] = useState({name: 'nobody',gender: 'male'})const formatGender = (gender) => {console.log('调用了翻译性别的方法')return gender === 'male' ? '男' : '女'}const handleClick = () => {setUserInfo({...userInfo,name: 'lvxiaobu'})}// 优化后，修改其他属性，不会重新调用formatGender方法，性能提升// // 每次点击按钮，都不会调用formatGender方法const gender = useMemo(() => {return formatGender(userInfo.gender)}, [userInfo.gender])return (<div>姓名： {userInfo.name} -- 性别:  { gender } <br/><button onClick={handleClick}> 点击修改名字</button></div>)
}

总结

本文我们浅谈了 useMemo 函数，了解到它可以帮助我们缓存计算结果，提高了组件的渲染性能。要使用 useMemo，我们需要提供一个计算函数，并指定需要监视变化的依赖数组。这样，只要依赖数组不发生变化，就可以直接使用缓存的计算结果，从而避免了重复进行昂贵的计算操作。

useMemo和useCallback的区别及使用场景

• useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
• useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。