Отладка реагирует компонент перерисовки

Question

Я пытаюсь отладить ошибку, которая воспроизводится очень редко (один раз за несколько десятков попыток).

Я нахожусь внутри render звонка и хочу узнать как можно больше информации от там:

• Что вызвало повторное рендеринг: forceUpdate, setState или props изменилось?
• Если это было изменение props, какой компонент инициировал цепочку рендеринга: Я имею в виду не факт родительского рендера, а верхний компонент из родительской цепочки, который использовал setState или forceUpdate и, таким образом, вызвал повторное рендеринг себя и всего дерева ниже (включая компонент, в котором я сейчас нахожусь).

Гарантируется, что все компоненты являются компонентами класса (не функциональными), и я использую реакцию 16.4.2, включая устаревшие методы жизненного цикла (если это важно). Существует также несколько контекстов.

Как мне это сделать? Обратите внимание, я спрашиваю о методах отладки, а не об исправлении моей конкретной ошибки.

Answer 1

Если ваш компонент является чистым компонентом - extends React.PureComponent { ... }, вам на самом деле не нужно заботиться обо всей цепочке повторных визуализаций, так как он будет выполнять визуализацию повторно только в случае изменения реквизита (из цепочки или из приёмник).

Он не будет повторно отображаться, если родительское состояние изменилось или если родительский объект в основном повторно отображал.

Однако , он все равно будет повторно отображаться - как я упоминал выше - если реквизиты изменились или состояние внутри , то компонент был обновлен или была вызвана forceUpdate функция.

Если вы не вызываете forceUpdate внутри вашего компонента или вы не обновляете состояние, проблема может быть связана с реквизитом.

Вы можете использовать, например, componentDidUpdate и просто сравнить prevProps с this.props и проверьте, какой из реквизитов изменился.

Тем не менее, вы также можете проверить пакет https://www.npmjs.com/package/@welldone-software / Why-did-You-Render , это может быть полезно для вас.