使用useState模拟forceUpdate
function App() {
console.log('render');
const [, setState] = useState(0);
return (
<div>
<button
onClick={() => {
setState((prev) => prev + 1);
}}
>
你好哈哈
</button>
</div>
);
}
使用useReducer模拟
function App() {
console.log('render');
const [, dispatch] = useReducer((x) => x + 1, 0);
return (
<div>
<button
onClick={() => {
dispatch();
}}
>
你好哈哈
</button>
</div>
);
}
将forceupdate抽离出一个单独的hook
function App() {
console.log('render');
const forcUpdate = useForceUpdate();
return (
<div>
<button
onClick={() => {
forcUpdate();
}}
>
你好哈哈
</button>
</div>
);
}
function useForceUpdate() {
const [, forceupdate] = useReducer((x) => x + 1, 0);
const forceUpdateFun = useCallback(() => {
forceupdate();
}, []);
return forceUpdateFun;
}