useMemo的主要作用就是缓存值的,某些时候,组件中某些值需要根据状态进行一个二次计算(类似于 Vue 中的计算属性),由于函数组件一旦重新渲染,就会重新执行整个函数,这就导致之前的二次计算也会重新执行一次
import { useMemo, useState } from 'react'
export default function UseMemoOptimize() {
// 维护两个状态
const [counter, setCounter] = useState(1);
const [val, setVal] = useState("");
/**
* 每次改变其它值的时候,都会重新调用该函数
*/
function getCount() {
console.log("getCount函数调用了")
return counter + 100;
}
return (
<div>
<h1>总数:{getCount()}</h1>
<button onClick={() => setCounter(counter + 1)}>+1</button>
<input value={val} type="text" onChange={e=>setVal(e.target.value)} />
</div>
);
}
useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值。应用场景如:需要进行二次计算的状态
import { useMemo, useState } from 'react'
export default function UseMemoOptimize() {
// 维护两个状态
const [counter, setCounter] = useState(1);
const [val, setVal] = useState("");
/**
* 在之前的状态的基础上做一个二次计算
* @returns 返回一个缓存值
*/
const countNum = useMemo(function getCount() {
console.log("getCount函数调用了")
return counter + 100;
},[counter])
return (
<div>
<h1>总数:{ countNum }</h1>
<button onClick={() => setCounter(counter + 1)}>+1</button>
<input value={val} type="text" onChange={e=>setVal(e.target.value)} />
</div>
);
}