useMemo这个hooks在react中具有缓存的作用,其表现形式与vue中的计算属性有点类似,可以使用这个hooks 来优化前端性能
使用方法为
js
import { FC, useMemo, useState } from 'react';
const UseMemo: FC = () => {
const [num1, setNum1] = useState(10)
const [num2, setNum2] = useState(20)
const [text, setText] = useState('hello')
console.log(' add text')
const sum = useMemo(() => {
console.log('add sum')
return num1 + num2
},[num1, num2])
return <div>
<p>{sum}</p>
<p>
{num1} <button onClick={() => setNum1(num1 + 1)}> add num1 </button>
</p>
<p>
{num2} <button onClick={() => setNum2(num2 + 1)}> add num2 </button>
</p>
<div>
<input onChange={ e => setText(e.target.value)} value={text} type="text" />
</div>
</div>
}
export default UseMemo;
当我点击add num1 的时候 console.log(' add text') 和 console.log('add sun') 均会执行,其表现的形式就是 sum 依赖于num1 和 num2 这两个值 如果发生变化,则sum 方法就会执行console.log('add sum') 就会打印,而state 的变化会导致组件发生更新所以 console.log(' add text') 也会执行。 那么当我在输入框中输入值的时候,这个时候也就是text 发生变化console.log('add sum') 不会执行,就是text 不被sum依赖。