【React】useMemo

什么是 useMemo?

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

为什么需要 useMemo?

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

语法

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

javascript 复制代码
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?

使用前:

javascript 复制代码
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方法,浪费计算资源

使用后:

javascript 复制代码
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配套使用,缺了一个都可能导致性能不升反而下降。

参考文档

浅谈useMemo
React菜鸟文档

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js