React类组件componentDidMount中定时器的正确清除方式咨询

首先需要明确一个核心结论：你目前使用的「直接将this.fetchData(stock)传入clearInterval的无变量写法是完全错误的，没有任何实际优势。

错误原因说明 #

JS 定时器的设计逻辑是：

• 调用setInterval后会返回一个唯一的数字类型的定时器ID，只有将这个ID传入clearInterval才能正确清除对应的定时器
• 你的fetchData是async异步函数，返回值是Promise对象，不属于合法的定时器ID，clearInterval接收到无效参数后会静默失败，你的定时器完全没有被清除。
• 这种错误写法会导致组件卸载后定时器仍在后台运行，不仅会产生无用的网络请求，还会因为卸载后的组件调用setState触发React内存泄漏警告。

标准存储定时器ID写法的优势 #

多数开发者使用的写法需要你调整下代码（你给出的示例代码里没有存储ID的逻辑，是不完整的），正确的实现如下：

componentDidMount() {
  const { stock } = this.props;
  // 进入页面先请求一次
  this.fetchData(stock);
  // 将定时器返回的ID存储到组件实例属性上
  this.refreshIntervalId = setInterval(() => {
    this.fetchData(stock);
    console.log('setInterval ran');
  }, 3600000);
}

componentWillUnmount() {
  // 传入存储的ID清除定时器
  clearInterval(this.refreshIntervalId);
  console.log('setInterval cleared');
}

// 你的fetchData逻辑保持不变
async fetchData(stock) {
  const data = await getAvgPriceHistory(stock);
  if (data && data[stock].length) {
    const dataArray = data[stock].map((arr) => {
      return arr[1];
    }).reverse();
    this.setState({
      data: dataArray,
      isLoaded: true
    });
  } else {
    // 无数据时返回直线
    this.setState({
      data: [1, 1],
      isLoaded: true
    });
  }
  console.log('Data fetched!');
}

这种标准写法的优势非常明显：

• 完全符合JS定时器API规范，可以100%正确清除对应定时器，从根源上避免内存泄漏和无用资源消耗
• 可维护性高：如果组件存在多个定时器，只需要给不同ID分配不同的实例属性即可，不会出现定时器混淆的问题
• 扩展性强：后续如果需要实现暂停、重启定时器的需求，直接操作存储的ID即可，不需要重构现有逻辑

内容的提问来源于stack exchange，提问作者Kenny Quach