React：当组件停止渲染时，函数会发生什么

Question

我在一个组件中定义了一个函数，它在安装组件时启动并保持运行。 当组件停止渲染或卸载时，该函数会发生什么？

class MyComponent extends React.Component<> {
  _count = () => {
    console.log('a second passed');
    setTimeout(1000, this._count);
  }

  componentDidMount() {
    _count();
  }
}

Answer 1

除非它被清除，否则计时器将继续运行，因此您需要在componentWillUnmount中清除它，该componentWillUnmount用于“执行任何必要的清理......例如使计时器无效”：

class MyComponent extends React.Component {
  _count = () => {
    console.log('a second passed');
    this.countTimer = setTimeout(this._count, 1000);
  }

  componentDidMount() {
    _count();
  }

  componentWillUnmount() {
    clearTimeout(this.countTimer);
  }
}