React 在 mixins 上花费了 100 毫秒,即使我的应用程序没有任何

React spending 100ms on mixins, even though my app doesn't have any

我的 React 应用程序变得非常迟钝,我正试图找到(并消除)瓶颈。该应用程序每 10 秒更新一次。而现在,该更新花费的时间超过 100 毫秒,这太长了。

当我使用 Chrome 开发工具记录时间线时,我发现名为 "Mixin.perform" 的东西花费了 107 毫秒。附上截图。

这部分让我很困惑。通常,我的目标是修复任何看起来花费时间最长的问题。但是我的应用程序没有任何混合,至少我知道。全部用 ES6 编写,所以 mixin 是不可能的。

我确实使用了一些第三方组件,所以它可能来自其中之一 - 有什么方法可以告诉我哪些 mixin 正在减慢速度吗?或者有不同的解释?

Mixin 对象是 React 源代码的一部分:https://github.com/facebook/react/blob/master/src/shared/utils/Transaction.js#L77

那里有一些关于它的用途的描述。我理解它的意思是它在协调期间帮助保持状态,React 使用该技术来使渲染 React 应用程序的性能足以用于生产用途,而不仅仅是理论上讲。

您可以在此处阅读有关对帐的信息: https://facebook.github.io/react/docs/reconciliation.html

很可能您的许多组件正在接收道具更改,导致重新渲染,这将向下传递给它们的子组件。在此周期结束时,React 将执行其操作并调用 Mixin 函数来帮助协调。

您可以尝试在componentWillReceivePropsshouldComponentUpdate 中添加一些日志信息以比较nextPropsthis.props。有时你可能想要 return false in shouldComponentUpdate,这将减少 React 核心必须做的工作量。您可能还会发现组件收到新道具的次数比您预期的要多得多。

这篇文章有助于理解为什么组件在您认为不应该更新时会更新:

https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html

祝你好运!