📅  最后修改于: 2022-03-11 15:02:28.411000             🧑  作者: Mango
const Clock = ({ dispatch, inProgress, ticksElapsed }) => {
React.useEffect(() => {
const progressTimer = setInterval(function () {
inProgress && dispatch({ type: 'CLOCK_RUN' });
}, 500);
return () =>
//inprogress is stale so when it WAS true
// it must now be false for the cleanup to
// be called
inProgress && clearInterval(progressTimer);
}, [dispatch, inProgress]);
return {ticksElapsed}
;
};
const App = () => {
const [inProgress, setInProgress] = React.useState(false);
const [ticksElapsed, setTicksElapsed] = React.useState(0);
const dispatch = React.useCallback(
() => setTicksElapsed((t) => t + 1),
[]
);
return (
);
};
ReactDOM.render( , document.getElementById('root'));