如何在 React 16 中进行性能分析

Posted 2023-03-21

【中文标题】如何在 React 16 中进行性能分析

【英文标题】：How to do perf analysis in React 16

【发布时间】：2018-06-13 16:11:27

【问题描述】：

React 文档声明 react-addons-perf 不适用于 React 16，但 Chrome's built-in tools provide equivalent functionality。我没有发现这种情况。

例如，假设我犯了一个经典错误，即在元素列表 (demo code is on GitHub) 中未包含正确的 key：

  render() 

    const items = this.state.items.map((item, index) => <ListItem key=index name=item.name />)

    return <div>
      <button onClick=this.addItem>Add item</button>
      <ul>items</ul>
    </div>;
  

当我将项目添加到列表时，key=index 问题将导致每个 ListItem 重新渲染。使用 React 15 perf 工具，我可以很容易地发现这一点：

应用修复后，我可以看到问题已经消失：

但是，对于 React 16 和 Chrome 开发工具，我不确定如何获取等效信息。 (Demo code with React 16.) 以下是出现错误时的分析结果：

以下是该错误不存在时的分析结果：

我不知道如何查看这些分析结果并获得 react-addons-perf 提供的相同信息。而且，我的结果看起来一点也不像 React 文档：

我使用的是 Chrome 63.0.3239.108。 React 团队是否使用不同版本的 Chrome，或者您是否需要启用特殊标志才能使其正常工作？

潜在相关：How can I measure wasted renders in React 16?。

tl;博士

如何从 Chrome 分析器中获取有用的信息？ 为什么我的分析器会话看起来与 React 文档不同？

更新

谢谢罗伯。米！原来我在开发工具中查看错误的选项卡。当我打开 User Timing 部分时，我看到了好与坏之间的区别：

糟糕，有很多 ListItem 更新：

很好，有一个ListItem 更新：

【问题讨论】：

我认为它看起来不同，因为您正在查看“主要”，而不是“用户计时” - 尝试扩展该部分

没错！如果您将评论转换为答案，我会将其标记为已接受。

您应用的修复程序是什么。

【参考方案1】：

React 事件记录在“用户计时”标签下 - 如果您展开该标签而不是“主”标签，您应该会找到您正在寻找的组件性能数据。

【讨论】：

截图欣赏。

我有一个名为“Timings”的标签，我使用的是 Google Chrome 80.0.3987.106。