Reactjs 测量react路由器v4的性能

我使用的是react路由器v4

---

我如何有效地测量（通过导航计时

性能。标记
和
性能。测量
）用户从链接上的单击事件到导航到更新/呈现的路线所需的时间？
您如何准确地定义路线

如果您正在使用
组件，则可以在
onClick
处理程序中注册您的性能标记作为副作用。例如，如下所示：

<Link
    to="some/great/component"
    onClick={() => performance.mark('initialize_page_change')}
/>

最后，要衡量你的分数：

performance.measure('reactRouterPerf',
                    'initialize_page_change',
                    'target_page_mounted'
                   );

酷！我很好奇为什么您建议在
组件willmount
中做第二个标记，而不是在
setTimeout中的
return
语句之前的
render
方法中，0
所以它更接近真实渲染时间？我假设您想要测量RR的性能，而不是您自己的组件。以延迟呈现的组件为例，例如在等待api调用时。如果您的组件在渲染之前进行了一些设置，那么性能测试将合并RR的性能和低效组件的性能。如果要在渲染后测量，请将调用放在
componentDidMount
中。在渲染中使用标记是有问题的，因为每次组件更新时都可以调用渲染，从而导致许多不必要的调用。此外，不需要设置超时。哦，如果你接受我的回答，我将不胜感激！是的，我正在调用一个API，并在API返回后处理初始状态和渲染。。我不知道如何在
componentDidMount
中正确地执行它，并且只在API返回后运行，所以它确实感谢您提供了这个代码段。那么
componentDidMount
将仅在第一次渲染后调用，此时将处理您的API请求。在第13行的
this.setState
之后，您可以将其放入api请求的承诺链中（只需将setState回调的主体复制到那里）。这将确保只有在呈现组件并返回数据后，才会删除性能标记
performance.measure('reactRouterPerf',
                    'initialize_page_change',
                    'target_page_mounted'
                   );