react hooks--useMemo

概述

相当于计算属性!!!

useMemo实际的目的也是为了进行性能的优化。

◼ 如何进行性能的优化呢?

 useMemo返回的也是一个 memoized(记忆的) 值;

 在依赖不变的情况下,多次定义的时候,返回的值是相同的;

在类组件中计算属性实现方式如下:

复制代码
class App extends React.Component {
    
    get computedName() {
        return this.state.name + '计算属性'
    }
    
    render() {
        return <div></div>
    }
}

基本用法

语法:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  • 第一个参数是一个函数,在函数内部需要返回一个结果;该回调函数会被调用,并通过返回值指定需要被记住的数据
  • 第二个参数是一个数组(用于指定回调函数中依赖(用到)的数据),即需要监听的属性,一旦监听属性改变后,那么结果就会重新计算,如果没有数组,那么每次组件更新时都会重新计算,比较耗性能,因此在没有依赖项时,建议传入空数组([])
  • 返回值:useMemo 记住的数据
  • useMemo 记住的数据会一直生效(或者说会一直返回同一个数据),直到依赖项发生改变

useCallback:只能记忆函数。而 useMemo可以记忆任何数据

使用场景:类似于 useCallback,可以在组件更新期间保持任意数据引用相等,一般用来处理对象类型的数据useCallback 只能记忆函数,而 useMemo 作用:记忆任意数据,这个被记住的数据会一直生效,直到依赖项发生改变1

如何选择使用哪一个?

  • 如果处理的是函数,推荐使用 useCallback 函数
  • 如果处理的是其他数据(比如,对象),推荐使用 useMemo 函数。

示例:

复制代码
import React from "react";
import { useMemo, useState } from "react";

export default function UseMemo() {
  let [firstName, setFirstName] = useState("张");
  let [lastName, setLastName] = useState("三");

  let fullName = useMemo(() => {
    return firstName + lastName;
  }, [firstName, lastName]);

  return (
    <div>
      <p> 姓名:{fullName}</p>
    </div>
  );
}

场景:

  • 进行大量的计算操作,是否有必须要每次渲染时都重新计算
  • 对子组件传递相同内容的对象时,使用useMemo进行性能的优化

模拟useCallback

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

复制代码
const help = useCallback(() => {
  setCount(count - 1)
}, [count])

// 模拟 useCallback
const help = useMemo(() => {
    return () => {
        setCount(count - 1)
    }
}, [count])

总结

相较于 useCallback 而言,useMemo 的收益是显而易见的。

useMemo 建议适当使用

如果没有使用 useMemo,computeExpensiveValue 会在每一次渲染的时候执行。如果使用了 useMemo,只有在 ab 变化时,才会执行一次 computeExpensiveValue这笔账大家应该都会算,所以我建议 useMemo 可以使用。

当然也不是无节制的使用,在很简单的基础类型计算时,可能 useMemo 并不划算。

相关推荐
rzl029 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang11 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景12 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼13 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿15 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再17 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55522 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录27 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000028 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl28 分钟前
深度剖析Kafka读写机制
前端