
第一个参数是回调函数,返回计算的结果,第二个参数是依赖项,该函数只监听count1变量的变化
cpp
import { useReducer, useState } from 'react';
import './App.css';
// 定义一个Reducer函数 根据不同的action进行不同的状态修改
function reducer(state,action){
switch(action.type){
case `INC`:
return state+1
case `DEC`:
return state-1
case `SET`:
return action.payload
default:
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也会被重新渲染