第一個參數是回調函數，返回計算的結果，第二個參數是依賴項，該函數只監聽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也會被重新渲染
