调试反应组件重新渲染答案

【问题标题】：Debug react component rerender调试反应组件重新渲染
【发布时间】：2020-04-23 22:23:34
【问题描述】：

我正在尝试调试很少重现的错误（每几十次尝试一次）。

我在render 通话中，想从那里找到尽可能多的信息：

是什么导致了重新渲染：forceUpdate、setState 或 props 发生了变化？
如果是props更改，哪个组件启动了重新渲染链：我的意思不是父级渲染的事实，而是父级链中使用setState或forceUpdate的顶级组件，因此导致重新渲染它本身和下面的整个树（包括我当前所在的组件）。

保证所有组件都是类组件（非功能性），并且我使用的是 react 16.4.2，包括已弃用的生命周期方法（如果它很重要）。上下文也有一些用法。

我怎样才能做到？请注意，我问的是调试技术，而不是修复我的具体错误。

【问题讨论】：

出现什么错误？您想向我们展示一下它的外观或将什么放入控制台？
@kinduser，这是我代码中的错误。我正在访问处于无效状态的业务对象。在正确的情况下，我不应该在这样的时刻访问它。我正在使用 RxJS 并认为订阅、去抖动或其他异步操作存在一些错误。如果我可以举一个这种情况的例子，我早就解决了。但我做不到，所以我在这里只问调试技术，而不是修复具体的错误。

标签： javascript reactjs google-chrome debugging

【解决方案1】：

如果您的组件是纯组件 - extends React.PureComponent { ... }，您不必真正关心整个重新渲染链，因为它只会在道具发生变化时重新渲染（来自链或来自redux 商店）。

如果父状态改变或父基本已经重新渲染，它不会重新渲染。

然而，它仍然会重新渲染 - 正如我上面提到的 - 如果道具已更改或状态内部该组件已更新或forceUpdate 函数被调用。

如果你没有在你的组件中调用forceUpdate或者你没有更新状态，问题可能与props有关。

你可以使用例如componentDidUpdate 并简单地将 prevProps 与 this.props 进行比较，然后检查哪一个道具发生了变化。

不过，您也可以查看https://www.npmjs.com/package/@welldone-software/why-did-you-render 包，它可能对您有所帮助。

【讨论】：

我认为，如果 render 抛出，则不会调用 componentDidUpdate。无论如何，在我更新所有组件以具有此陷阱之前，它不会帮助我找到谁发起了更改。如果我要更新它们，在setState 和forceUpdate 等发起程序中设置陷阱会更有用，不是吗？我实际上希望对有助于找到原因的内部结构或调用堆栈做出反应。不，大多数组件不是PureComponents。无论如何，赞成。
@Qwertiy 你的意思是“componentDidUpdate 在render 抛出之前没有被调用”？是的，不是。如果您更喜欢在渲染之前查看之前的道具，可以使用componentWillReceiveProps。回到主题——我会怎么做？我会将正在使用的每个组件都更改为纯组件，因此我会确保它们仅在道具发生更改时才会重新渲染。然后，我会在途中的每个组件中的componentWillReceiveProps 中添加一个简单的nextProps === this.props 条件。抛出false 的最深（离您的组件最远）的是您要查找的组件。
另外我已经发现创建新实例后会出现错误。
我认为这是一个不好的迹象——通常将组件更改为纯组件不应该影响应用程序，除了提高它的性能。您在问题中提到了forceUpdate - 我猜您在您的应用程序中经常使用它？它被告知避免使用它，因为它违反了重新渲染的主要流程。也许这是主要问题？
一些 observable 启动数据的渲染。我想找到哪一个，在什么级别，因为一些要渲染的数据还没有更新。在订阅 observables 中有一些 forceUpdate 或 setState 的用法。我肯定会渲染无效数据，这不是反应的问题，而是错误订阅的问题。我的问题是我找不到哪个订阅和哪个组件无效。