調試反應組件重新渲染

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，它可能對您有所幫助。