如何在React 16

Question

React docs声明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 docs：

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

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

TL;博士

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

更新

谢谢罗布。中号！事实证明我在开发工具中查找了错误的选项卡。当我打开用户时间部分时，我看到了好与坏之间的区别：

错误，有许多ListItem次更新：

好，有一次ListItem更新：

Answer 1

React事件记录在＆＃34;用户时间＆＃34;标签 - 如果您展开该标签而不是＆＃34; Main＆＃34;你应该找到你正在寻找的组件性能数据。