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

Question

我一直在使用 Chrome 开发工具分析 React 应用程序，我发现 Listener 数量呈线性增长。看看下面的截图。 Listeners 为橙色。

我将其缩小为在 p 标签内呈现一个简单的倒计时值。剩余时间每 1000 毫秒使用 setInterval 函数生成一次，然后在 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 是什么？

• 增加的 Listener 是否表示内存泄漏？

• 如果是，如果必须显示倒计时或 每秒或更快更新时间/剩余时间的计时器？

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

干杯

Answer 1

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

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

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

关于您的问题:

What are these so called Listeners to begin with?

这些是事件监听器。如果您在 DOM 树中选择 html 元素，然后检查 Event Listeners 选项卡，您可以看到页面上已定义的所有监听器。确保启用 Ancestors 复选框以在 html 元素的子元素上显示监听器。在这种情况下，我希望看到越来越多的听众，但我没有，所以我怀疑这可能是 create-react-app 中的错误。

Is the increasing Listener could indicative of a memory leak?

是的，这是可能的。