小编典典

使用React钩子实现一个自增计数器[重复]

reactjs

代码在这里: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)不断增加,因此这看起来不错,但是与其他钩子结合使用时可能冻结。

正确的方法是什么?在类组件中,使用持有间隔的实例变量很简单。


阅读 819

收藏
2020-07-22

共1个答案

小编典典

您想给一个空数组作为第二个参数,useEffect以便该函数在初始渲染后仅运行一次。

由于闭包的工作方式,这将使counter变量始终引用初始值。您可以改用函数版本setCounter来始终获取正确的值。

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>
2020-07-22