代码在这里:https : //codesandbox.io/s/nw4jym4n0
export default ({ name }: Props) => { const [counter, setCounter] = useState(0); useEffect(() => { const interval = setInterval(() => { setCounter(counter + 1); }, 1000); return () => { clearInterval(interval); }; }); return <h1>{counter}</h1>; };
问题在于每个setCounter触发器都会重新渲染,因此间隔会重置并重新创建。由于state(counter)不断增加,因此这看起来不错,但是与其他钩子结合使用时可能冻结。
setCounter
正确的方法是什么?在类组件中,使用持有间隔的实例变量很简单。
您想给一个空数组作为第二个参数,useEffect以便该函数在初始渲染后仅运行一次。
useEffect
由于闭包的工作方式,这将使counter变量始终引用初始值。您可以改用函数版本setCounter来始终获取正确的值。
counter
例
const { useState, useEffect } = React; function App() { const [counter, setCounter] = useState(0); useEffect(() => { const interval = setInterval(() => { setCounter(counter => counter + 1); }, 1000); return () => { clearInterval(interval); }; }, []); return <h1>{counter}</h1>; }; ReactDOM.render( <App />, document.getElementById('root') ); <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> <div id="root"></div>