useMemo
useMemo 缓存的结果是回调函数中return回来的值,主要用于缓存计算结果的值,应用场景如需要计算的状态
import React, { useState, useMemo } from 'react';
function Info(props) {
let [personalInfo , setPersonalInfo] = useState({
name: 'kevin kang',
gender: 'male'
})
function formatGender(gender) {
console.log('---调用了翻译性别的方法---')
return gender === 'male' ? '男' : '女'
}
// BAD
// 不使用useMemo的情况下,修改其他属性,也会重新调用formatGender方法,浪费计算资源
// let gender = formatGender(personalInfo.gender)
// GOOD
let gender = useMemo(()=>{
return formatGender(personalInfo.gender)
},
[personalInfo.gender])
return (
<>
<div>
姓名: {personalInfo.name} -- 性别: { gender } <br/>
<button onClick={
()=> {
setPersonalInfo({
...personalInfo,
name: 'Will Kang'
})
}
}> 点击修改名字</button>
</div>
</>
)
}
export default Info
useMemo和useCallback都是reactHook提供的两个API,用于缓存数据,优化性能;两者接收的参数都是一样的,第一个参数表示一个回调函数,第二个表示依赖的数据。
共同作用
在依赖数据发生变化的时候,才会调用传进去的回调函数去重新计算结果,起到一个缓存的作用
两者的区别
useMemo 缓存的结果是回调函数中return回来的值,主要用于缓存计算结果的值,应用场景如需要计算的状态
useCallback 缓存的结果是函数,主要用于缓存函数,应用场景如需要缓存的函数,因为函数式组件每次任何一个state发生变化,会触发整个组件更新,一些函数式没有必要更新的,此时就应该缓存起来,提高性能,减少对资源的浪费
原文链接:https://blog.csdn.net/qq_35770417/article/details/110000491