【React】Memo
组件重新渲染时缓存计算的结果。
实例：count1计算斐波那契数列，count2和count1可以触发数值变化。使用memo可以使只有在count1变化时触发斐波那契数列计算函数，而count2变化时不触发斐波那契数列计算函数。
import { useMemo } from "react";
import { useState } from "react";
function fib(n) {
console.log('计算函数执行')
if (n < 3) {
return 1
}
return fib(n - 1) + fib(n - 2)
}
function App() {
const [count1, setCount1] = useState(0)
const [count2, setCount2] = useState(0)
console.log('组件重新渲染')
const result = useMemo(() => {
return fib(count1)
}, [count1])
return (
<div className="App">
<button onClick={() => { setCount1(count1 + 1) }}>change count1: {count1}</button>
<button onClick={() => { setCount2(count2 + 1) }}>change count2: {count2}</button>
result: {result}
</div>
)
}
export default App
