React useMemo函数

第一个参数是回调函数，返回计算的结果，第二个参数是依赖项，该函数只监听count1变量的变化

import { useReducer, useState } from 'react';
import './App.css';// 定义一个Reducer函数 根据不同的action进行不同的状态修改 function reducer(state,action){switch(action.type){case `INC`:return state+1case `DEC`:return state-1 case `SET`:return action.payloaddefault:return state}
}// 调用useReducer函数将reducer函数作为参数并设定初始状态// 斐波那契数列
function fiber(n){console.log(`正在进行斐波那契计算`)if(n < 3){return 1}else return fiber(n-1)+fiber(n-2)
}
function App() {const [state,dispatch] = useReducer(reducer,0)const [count1,setCount1] = useState(0)const [count2,setCount2] = useState(0)const result = fiber(count1)return (<div className="App">{result}<button onClick={()=>{dispatch({type:`INC`})}}>+</button><button onClick={()=>{dispatch({type:`DEC`})}}>-</button><button onClick={()=>{dispatch({type:`SET`,payload:9527})}}>更新</button><button onClick={()=>{setCount1(count1+1)}}>更新count1</button><button onClick={()=>{setCount2(count2+1)}}>更新count2</button></div>);
}export default App;

不使用useMemo函数时,在其他State发生变化时UI也会被重新渲染

作用：缓存计算的结果