Reactjs 铬的反应性能曲线

我在使用ag grid React的SPA React 15.6应用程序上使用Chrome developer工具进行性能评测，在将评测器的输出与现实相协调时遇到了一些麻烦。例如，在下面的屏幕截图中，看起来ConnectedDrawer组件的ConnectDrawer，orange bar componentWillReceiveProps方法需要2秒，但下面什么都没有。在查看代码后，我怀疑该方法本身可能需要那么长的时间，因此我在函数和low中的所有代码周围添加了一些“console.time”语句：

抽屉组件将接收道具：0.02001953125ms

以下是我的组件WillReceiveProps的外观，以供参考：

componentWillReceiveProps(nextProps) {
        console.time('Drawer componentWillReceiveProps');
        if (nextProps.changes.length !== this.props.changes.length &&
            nextProps.changes.length === 0 &&
            this.state.isDiscarding) {
            this.setState({isDiscarding: false});
        }
        console.timeEnd('Drawer componentWillReceiveProps');
    }

那么我在这里错过了什么？我有点理解，用户计时api只是显示标记的东西，我今天刚刚了解了这一点，所以我对该api的理解至少限于…，所以是不是只是React实际上没有对组件WillReceiveProps内部发生的事情进行计时？如果有用的话，我会使用re-select和Redux，但我会假设我的选择器在componentWillReceiveProps被调用之前已经运行过了，但也许我错了

无论如何，我认为对于Chrome flame图表，有一些基本的东西我不了解，但我读了一大堆文章，对我来说，这些都不符合逻辑

更新：新增组件WillReceiveProps实现

更新2：向Chrome配置文件添加链接

如果有人对查看实际配置文件感兴趣，这里有一个链接，您可以打开Chrome dev tools，进入“性能”选项卡，然后单击“加载配置文件”：

更新3：组件将收到道具说明

好的，看来componentWillReceiveProps最终确实调用了MapStateTops，这就解释了为什么在配置文件中花费这么长时间。我猜componentWillReceiveProps调用会被ReduxConnect方法或类似的方法所取代，以完成它的任务，但我还没有验证是否看到了接受的答案。无论如何，您可以在以下屏幕截图中看到这方面的证据：

---

如果仔细查看flame图表，需要花费很长时间的是ConnectDrawer.componentWillReceiveProps调用，而不是Drawer组件本身，这解释了为什么我在Drawer组件中的计时代码显示的计时与flame图表完全不同。ConnectDrawer组件是一个高阶组件，其全部用途是调用mapStateToProps和mapDispatchToProps，将状态和动作创建者映射到组件上的道具。在本例中，我的mapStateToProps调用非常慢，这解释了图形中的结果

作为补充说明，如果react redux添加了用户计时API，这样mapStateToProps调用等就会显示在flame图中，那就太好了

---

TL；DR请密切注意火焰图中的实际组件名称。

抽屉收到的道具是什么？查看堆-在ComponentWillReceiveProps期间，您会看到内存使用发生了很大变化，先增加了250MB，然后又减少了350MB。但是，我不能肯定这与性能问题之间是否存在任何关联。在屏幕截图顶部的堆中，在函数调用期间，堆方面的情况似乎没有发生剧烈变化，我读错了吗？嗯，我无法悬停在图表上查看确切的值，但看起来它几乎翻了一番。我并不是说内存使用量的300MB变化会导致性能问题，但对我来说，它表明正在发生一些事情，导致内存使用量的增加。此外，您是否考虑过在componentWillReceiveProps之前和之后向生命周期添加performance console.log检查？啊，对不起，我刚才看到的是componentWillReceiveProps之前，但我明白您的意思，在componentWillReceiveProps完成之后，堆确实会上升很多。这很奇怪，因为componentWillReceiveProps中的代码非常简单，我根本看不出它是如何分配内存的。它所做的只是检查其中一个props的长度是否已更改，并设置一个简单的状态属性。。。。无论如何，我想我会继续挖掘。是的，如果没有看到组件内部的代码，我将收到道具，我想我不能提供任何其他建议。我假设您熟悉有关此生命周期挂钩的警告，但如果您不熟悉，您应该通读此处的文档，并可能将其从代码中重构出来，看看这是否解决了您的问题。