调试反应组件重新渲染

Question

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

我在render call 里面，想从那里找到尽可能多的信息：

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

保证所有组件都是 class 组件（不起作用），并且我正在使用 react 16.4.2 包括已弃用的生命周期方法（如果它很重要）。 上下文也有一些用法。

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

Answer 1

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

如果父级 state 更改或父级基本上已重新渲染，则不会重新渲染。

但是，它仍然会重新渲染 - 正如我上面提到的 - 如果道具已更改或该组件内的 state 已更新或forceUpdate function 被调用。

如果您没有在组件内调用forceUpdate或者您没有更新 state，则问题可能与道具有关。

您可以使用例如componentDidUpdate并简单地将prevProps与this.props进行比较，并检查哪一个道具已更改。

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