{setInterval(() => {setcount((pre) => pre + 1);}, 1000);}, []);return ( {counter} );} useEffect第二个。react|React hook useEffect 与 计时器 setInterval。" />

锐客网

  1. 首页 > it技术 > >

react|React hook useEffect 与 计时器 setInterval

前端react.jsjavascriptreact

import React, { useEffect, useState } from "react"; export default function App() { const [counter, setcount] = useState(0); useEffect(() => { setInterval(() => { setcount((pre) => pre + 1); }, 1000); }, []); return (
{counter}
); }

useEffect第二个参数的数组置为空，否则会出现多个计时器，导致 x = 2 * x + 1
【react|React hook useEffect 与 计时器 setInterval】又去看了一下其他人的博客，这种问题和过时状态有关：
如果在计时器中包裹set方法，传参为变量本身+1，很可能多个计时器取到的变量值是最开始的，并不能保证是最新值
如果采用传入一个函数的方法，则react可以保证每次取到的值是最新的。

    推荐阅读


    上一篇：c语言|VScode运行C语言代码的方法

    下一篇：计网|WebSocket JS