Chrome 开发工具中的监听器性能分析结果

Question

我一直在使用 Chrome 开发工具分析 React 应用程序，并且发现了线性增加的

Listener

计数。看看下面的截图。

Listeners

为橙色。

我将其范围缩小到在

p

标签内渲染的简单倒计时值。剩余时间是使用 setInterval 函数每 1000 毫秒生成一次，然后在

p

标签内进行格式化和渲染。

我使用

create-react-app

创建了一个简单的 React 应用程序，并修改了 App.js 的 App 组件内的代码以每秒更新 Date.now() 的值，当我在其上运行探查器时，我得到了相同的结果。

class App extends Component {
  state = {
    text: '',
  };

  loop() {
    this.setState({ text: Date.now() });
  }

  componentWillMount() {
    this.timer = setInterval(this.loop.bind(this), 1000);
  }

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

  render() {
    return (
      <div className="App">
        <p>{this.state.text}</p>
      </div>
    );
  }
}

export default App;

• 这些所谓的

  Listeners

  到底是什么？

• 监听器的增加是否表明

  memory leak

  ？

• 如果是，如果您必须显示倒计时或，如何避免这种情况 每秒或更快更新时间/剩余时间的计时器？

顺便说一句，您是否也看到，尽管进行了所有这些垃圾回收，JS 堆的使用率似乎也在上升？这很奇怪，不是吗？

干杯

Answer 1

这里是 DevTools 技术作家和开发者倡导者。

我能够重现可能的内存泄漏，因此我在 create-react-app 存储库上提交了一个错误：https://github.com/facebook/create-react-app/issues/4037

我将根据该问题的结果更新此答案。

关于您的问题：

这些所谓的监听器到底是什么？

这些是事件监听器。如果您在 DOM 树中选择

html

元素，然后检查“事件监听器”选项卡，您可以看到页面上定义的所有监听器。确保启用 Ancestors 复选框以在

html

元素的子元素上显示侦听器。在这种情况下，我希望看到越来越多的听众，但我没有，所以这就是为什么我怀疑这可能是

create-react-app

中的一个错误。

Listener 的增加是否表明存在内存泄漏？

是的，这是可能的。

Answer 2

尝试使用 React 生产版本运行您的示例，这个问题似乎与 React 开发版本有关。

我刚刚重现了您的问题并尝试了生产版本，发现它没有发生并且监听器图表是平坦的