React useTimeout Hook
index.html
et script.js
ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js
et style.css
.
Pour implémenter setTimeout()
de manière déclarative, créez un hook personnalisé qui prend une callback
et un delay
. Utilisez le hook useRef()
pour créer une ref
pour la fonction de rappel, et utilisez le hook useEffect()
pour retenir la dernière fonction de rappel. Ensuite, utilisez le hook useEffect()
pour configurer le délai d'attente et le nettoyer.
Voici un extrait de code d'exemple qui illustre cette approche :
const useTimeout = (callback, delay) => {
const savedCallback = React.useRef();
React.useEffect(() => {
savedCallback.current = callback;
}, [callback]);
React.useEffect(() => {
const tick = () => {
savedCallback.current();
};
if (delay !== null) {
let id = setTimeout(tick, delay);
return () => clearTimeout(id);
}
}, [delay]);
};
const OneSecondTimer = (props) => {
const [seconds, setSeconds] = React.useState(0);
useTimeout(() => {
setSeconds(seconds + 1);
}, 1000);
return <p>{seconds}</p>;
};
ReactDOM.createRoot(document.getElementById("root")).render(<OneSecondTimer />);
Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.