调试反应组件重新渲染

Question

我正在尝试调试一个极少出现的bug（几十次尝试才出现一次）。

我在 render 电话，并想从那里了解尽可能多的信息。

• 是什么原因导致了Rerender: forceUpdate, setState 或 props 变了？
• 如果是一个 props 变动，哪个组件启动了重新渲染链。我的意思不是指父级渲染的事实，而是指父级链中最上面的组件，它使用了 setState 或 forceUpdate 所以造成了自身和整个树的reerender（包括我现在所在的组件）。

保证所有的组件都是类组件（不是功能组件），我使用的是react 16.4.2，包括废弃的生命周期方法（如果重要的话）。还有一些上下文的用法。

我怎样才能使它？注意，我问的是调试技术，而不是修复我的具体bug。

Answer 1

如果你的组件是一个纯粹的组件 - extends React.PureComponent { ... }你其实不必在意整个重渲染链，因为只有当道具发生变化时，它才会重渲染（从链或从redux商店）。

如果父级状态发生了变化，或者父级基本上已经重新渲染了，它就不会重新渲染。

但是如果道具发生了变化，它仍然会重新渲染--就像我上面提到的那样。或 状况 里面 该组件被更新或 forceUpdate 函数被调用。

如果你没有调用 forceUpdate 或者您没有更新状态，那么您的组件中的 发出 可能与道具有关。

您可以使用e.g. componentDidUpdate 和简单的比较 prevProps 与 this.props 并检查哪一个道具发生了变化。

不过，您也可以查看 https:/www.npmjs.compackage@welldon-softwarewhy-did-you-render。 包，也许对你有帮助。