React 应用程序中的 setInterval

IT技术 javascript reactjs settimeout state
2021-02-25 04:41:20

我在 React 方面还是个新手，但我一直在慢慢磨合，我遇到了一些我一直在坚持的事情。

我正在尝试在 React 中构建一个“计时器”组件，老实说我不知道​​我这样做是否正确（或有效）。在下面我的代码，我设置状态来返回一个对象{ currentCount: 10 }，并已与玩弄componentDidMount，componentWillUnmount和render我只能得到状态，以“倒计时”，从10到9。

由两部分组成的问题：我做错了什么？并且，是否有更有效的方法来使用 setTimeout （而不是使用componentDidMount& componentWillUnmount）？

先感谢您。

import React from 'react';

var Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  componentDidMount: function() {
    this.countdown = setInterval(this.timer, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.countdown);
  },

  timer: function() {
    this.setState({ currentCount: 10 });
  },

  render: function() {
    var displayCount = this.state.currentCount--;
    return (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;
6个回答

我看到您的代码有 4 个问题：

  • 在您的计时器方法中，您始终将当前计数设置为 10
  • 您尝试更新渲染方法中的状态
  • 您不使用setState方法来实际更改状态
  • 您没有将您的 intervalId 存储在状态中

让我们尝试解决这个问题：

componentDidMount: function() {
   var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
},

componentWillUnmount: function() {
   // use intervalId from the state to clear the interval
   clearInterval(this.state.intervalId);
},

timer: function() {
   // setState method is used to update the state
   this.setState({ currentCount: this.state.currentCount -1 });
},

render: function() {
    // You do not need to decrease the value here
    return (
      <section>
       {this.state.currentCount}
      </section>
    );
}

这将导致计时器从 10 减少到 -N。如果您希望计时器减少到 0，您可以使用稍微修改的版本：

timer: function() {
   var newCount = this.state.currentCount - 1;
   if(newCount >= 0) { 
       this.setState({ currentCount: newCount });
   } else {
       clearInterval(this.state.intervalId);
   }
},
在 ES6 中，不要忘记绑定类来访问 this :this.timer.bind(this)和timer() { ... }
2021-04-22 04:41:20
没有真正需要将 setInterval 值存储为状态的一部分，因为它不会影响渲染
2021-04-25 04:41:20
不过，我想知道是否有必要使用 componentDidMount 和 componentWillUnmount 来实际设置间隔？编辑：刚刚看到您最近的编辑。:)
2021-05-07 04:41:20
谢谢你。这很有意义。我仍然是一个初学者，我正在尝试了解状态的工作原理以及“块”中的内容，例如渲染。
2021-05-12 04:41:20
@Jose 我认为componentDidMount是触发客户端事件的正确位置，所以我会用它来启动倒计时。您还考虑什么其他方法进行初始化？
2021-05-13 04:41:20

更新 10 秒倒计时使用 class Clock extends Component

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props){
    super(props);
    this.state = {currentCount: 10}
  }
  timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    })
    if(this.state.currentCount < 1) { 
      clearInterval(this.intervalId);
    }
  }
  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  render() {
    return(
      <div>{this.state.currentCount}</div>
    );
  }
}

module.exports = Clock;

使用Hooks更新了 10 秒倒计时（一项新功能提案，让您无需编写类即可使用状态和其他 React 功能。它们目前在 React v16.7.0-alpha 中）。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Clock = () => {
    const [currentCount, setCount] = useState(10);
    const timer = () => setCount(currentCount - 1);

    useEffect(
        () => {
            if (currentCount <= 0) {
                return;
            }
            const id = setInterval(timer, 1000);
            return () => clearInterval(id);
        },
        [currentCount]
    );

    return <div>{currentCount}</div>;
};

const App = () => <Clock />;

ReactDOM.render(<App />, document.getElementById('root'));
“setInterval”旨在每隔“间隔”时间运行一些周期性操作。在这里它用作 setTimeout，因为它是在每个滴答声中创建的。对于时钟，最好在开始时调用 setInterval 一次。
2021-04-16 04:41:20
在 React 16.8 中，React Hooks 在稳定版本中可用。
2021-05-14 04:41:20

如果有人正在寻找实现 setInterval 的 React Hook 方法。Dan Abramov 在他的博客上谈到了这件事。如果您想深入了解该主题，包括 Class 方法，请查看它。基本上，代码是一个自定义 Hook，它将 setInterval 变为声明性的。

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

为方便起见，还发布了 CodeSandbox 链接：https ://codesandbox.io/s/105x531vkq

这个例子很适合用 React 实现 setInterval，谢谢。
2021-05-08 04:41:20

使用 React Hooks 管理 setInterval：

  const [seconds, setSeconds] = useState(0)

  const interval = useRef(null)

  useEffect(() => { if (seconds === 60) stopCounter() }, [seconds])

  const startCounter = () => interval.current = setInterval(() => {
    setSeconds(prevState => prevState + 1)
  }, 1000)

  const stopCounter = () => clearInterval(interval.current)
其它你可能感兴趣的问题
上一篇来自地址数组的多个标记 Google Map API v3 并在 pageLoad 上进行地理编码时避免 OVER_QUERY_LIMIT 下一篇使用 react-hooks 更新状态时执行异步代码