在React Component中使用setInterval

Question

I was reading the tutorial on the official react website. In the example about life cycle methods, under the componentDidMount method, a timerID is set to the setInterval function.

My question is even though the timerID was initialized, it was never called throughout the application, how does the application work without explicitly calling timerID anywhere in the application. Here is the code below.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')

);

Answer 1

this.timerID is a numeric, non-zero value which identifies the timer created by the call to setInterval() ; this value can be passed to clearInterval to clear the timer.

So when calling the setInterval in componentDidMount like

componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

you want to execute the tick() function every 1 sec a fter the component has mounted. Now when you navigate to another component and your current component has unmounted, if you do not clear the interval call to tick() function, it will continue to be executed.

Hence in the componentWillUnmount function you timer is cleared which is identified by the numeric value returned by setInterval which is stored in this.timerID

componentWillUnmount() {
    clearInterval(this.timerID);
  }

so the complete code as provided in the React docs is

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Answer 2

It's Simple. As soon as it React executes componentDidMount() life cycle method, the timer starts running.

this.timerID = setInterval(
      () => this.tick(),
      1000
    );

The above timer will run until the component gets unmounted (according to your code). It's not a surprise that your code works that way.

Answer 3

In this react document it's written that

We will tear down the timer in the componentWillUnmount() lifecycle method

So, this.timerID will be used in componentWillUnmount() lifecycle method to stop timer.