React基础之useMeno
作用：在组件每次重新渲染的时候缓存计算的结果
import { useReducer, useState } from "react";
function fib(n){
console.log('开始计算');
if(n<3){
return 1
}
return fib(n-2)+fib(n-3)
}
function App() {
const [count1,setCount1]=useState(0)
const [count2,setCount2]=useState(0)
const result=fib(count1)
return (
<div className="App">
this is app,
<button onClick={()=>{setCount1(count1+1)}}>change count1:{count1}</button>
<button onClick={()=>{setCount2(count2+1)}}>change count2:{count2}</button>
{result}
</div>
);
}
export default App;
此时我们点击count1或是count2都会重新计算fib
import { useMemo, useReducer, useState } from "react";
function fib(n){
console.log('开始计算');
if(n<3){
return 1
}
return fib(n-2)+fib(n-3)
}
function App() {
const [count1,setCount1]=useState(0)
const [count2,setCount2]=useState(0)
const result=useMemo(()=>{
//返回计算得到的结果
return fib(count1)
},[count1])
return (
<div className="App">
this is app,
<button onClick={()=>{setCount1(count1+1)}}>change count1:{count1}</button>
<button onClick={()=>{setCount2(count2+1)}}>change count2:{count2}</button>
{result}
</div>
);
}
export default App;
此时，只有count发生变化，result才会发生变化
