网站建设技术清单,注册工商企业,做培训体系的网站,中小企业微信网站建设组件重新渲染时缓存计算的结果。
实例#xff1a;count1计算斐波那契数列#xff0c;count2和count1可以触发数值变化。使用memo可以使只有在count1变化时触发斐波那契数列计算函数#xff0c;而count2变化时不触发斐波那契数列计算函数。 import { useMemo } from r…组件重新渲染时缓存计算的结果。
实例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 classNameAppbutton onClick{() { setCount1(count1 1) }}change count1: {count1}/buttonbutton onClick{() { setCount2(count2 1) }}change count2: {count2}/buttonresult: {result}/div)
}export default App
