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

Question

React文档指出，react-addons-perf不适用于React 16，但是Chrome的内置工具提供了等效的功能。我还没有发现这种情况。

例如，假设我犯了一个经典错误，即key在元素列表中不包含适当的字符（演示代码在GitHub上）：

  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性能工具，我可以轻松地发现这一点：

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

但是，使用React 16和Chrome开发工具，我不确定如何获取等效信息。（React 16的演示代码。）这是存在此错误时的概要分析结果：

以下是缺少该错误时的性能分析结果：

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

我使用的是Chrome 63.0.3239.108。React团队使用的是其他版本的Chrome，还是需要启用特殊标志才能使其正常工作？

潜在相关：如何在React 16中测量浪费的渲染？。

tl; dr

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

更新资料

谢谢罗伯。M！原来我在开发工具中看错了标签。当我打开“用户计时”部分时，我看到了好与坏之间的区别：

不好，有很多ListItem更新：

好，ListItem更新一次：

Answer 1

React 事件记录在“User Timing”标签下 - 如果展开该标签而不是“Main”，您应该找到您正在寻找的组件性能数据。