componentDidMount 函数中的 setinterval 是否每次运行都会创建一个新线程？

Question

我正在创建一个简单的 Web 应用程序，其中每毫秒显示和更新时间。我的代码如下：

class Time extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      time: ""
    }
    this.updateTime = this.updateTime.bind(this);
  }

  componentDidMount() {
    this.interval = setInterval(this.updateTime, 1);
  }

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

  updateTime() {
    let dateObject = new Date();
    let date = dateObject.toDateString();
    let hour = dateObject.getHours().toString();
    let minute = dateObject.getMinutes().toString();
    let second = dateObject.getSeconds().toString();
    let millisecond = dateObject.getMilliseconds().toString();
    let time = hour + " : " + minute + " : " + second + " : " + millisecond;
    this.setState({
      date: date,
      time: time
    });
  }

  render() {
    return (
      <div>
        <TitleBar/>
        <div className="time-div">
          <p className="date-txt" value={this.state.date}> {this.state.date} </p>
          <p className="time-txt" value={this.state.time}> {this.state.time} </p>
        </div>
      </div>
    );
  }
}

export default Time;

考虑到安装Time组件时componentDidMount函数运行，我的问题如下：

componentDidMount 函数中的 setInterval 函数是否在每个间隔运行时都记得自己？还是说componentDidMount函数再次运行，里面的setInterval函数创建了一个新线程？

基本上，我要问的是，程序是否运行如下：

1. 组件是否已挂载？ CHECK --> setInterval 每毫秒运行一次 updateTime 函数 --> 组件是否挂载？ CHECK --> "returning to same" setInterval 函数继续更新时间函数的下一个间隔 --> ... 等等。 或
2. 组件是否已挂载？ CHECK --> setInterval 每毫秒运行一次 updateTime 函数 --> 组件是否挂载？ CHECK --> “不记得”初始 setInterval 函数并开始一个新的间隔同时继续初始 setInterval 函数 --> ... 等等。

Answer 1

componentDidMount() 仅在初始渲染时运行，而不在状态更新时运行。 所以当你用过。

  componentDidMount() {
    this.interval = setInterval(this.updateTime, 1);
  }

setInterval 将首先启动，此进程将继续在后台运行。

直到你Unmount你的组件在这种情况下Clean up将发生在setInterval。

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