学了网站建设的心得体会,企业站,广西住房和建设厅官网,wordpress 页脚广告什么是 useMemo#xff1f;
useMemo 是 React 中的一个 Hook#xff0c;它可以用来缓存计算结果#xff0c;并在后续的渲染中重复利用这些计算结果。useMemo 接收两个参数#xff1a;一个函数和一个依赖数组。当依赖数组中的任何一个值发生变化时#xff0c;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配套使用缺了一个都可能导致性能不升反而下降。
