介绍
本篇文章主要是讲解以下 useMemo
的正确用法。你们没有看错,useMemo
的出现使得react
也有了 ‘计算属性’。
为什么要使用计算属性
其实主要优势就是性能好,通过下面例子可以看出。
比较计算属性与普通函数
使用函数完成计算功能
import {useState} from "react"
export default ()=>{
const [a,seta]=useState(0)
const [b,setb]=useState(1)
const [c,setc]=useState(2)
const sum_ab=()=>{
console.log('re-compute') // 通过打印可以看到计算是否重新执行
return a+b
} // 只要组件重新渲染,无论何时重新计算
const add_a=()=>{
seta(a+1)
}
const add_b=()=>{
setb(b+1)
}
const add_c=()=>{
setc(c+1)
}
return (
<div>
<p>computed a+b:{sum_ab()}</p>
<button onClick={add_a}>a++</button>
<button onClick={add_b}>b++</button>
<button onClick={add_c}>c++</button>
</div>
)
}
使用计算属性实现计算功能
import {useMemo,useState} from "react"
export default ()=>{
const [a,seta]=useState(0)
const [b,setb]=useState(1)
const [c,setc]=useState(2)
const sum=useMemo(()=>{
console.log('re-compute') // 通过打印可以看到计算是否重新执行
return a+b
},
[a,b]) // 只有当数组中包含的状态发生变化时,才会重新计算值
const add_a=()=>{
seta(a+1)
}
const add_b=()=>{
setb(b+1)
}
const add_c=()=>{
setc(c+1)
}
return (
<div>
<p>computed a+b:{sum_ab}</p>
<button onClick={add_a}>a++</button>
<button onClick={add_b}>b++</button>
<button onClick={add_c}>c++</button>
</div>
)
}
通过按钮调试,再观察两处的打印时机,就会发现计算属性的性能更好。
结尾
感谢各位的观看,如果有疑惑,欢迎提出和分享,希望这篇文章能给你带来帮助。