Как правильно определить рендеринг в React JS?

Question

Допустим, у нас есть родительский компонент и несколько функциональных дочерних компонентов. Я хочу четко знать, перерисовывает ли родитель, перерисовывает ли ребенок или нет.

Пройдя несколько статей, я узнал, что есть 3 способа обнаружения повторных передач. (Дайте мне знать, если есть еще способы.)

1. Поместите console.log в дочерний компонент.

2. Используйте в настройках Chrome мигающую опцию.

3. Используйте React dev tool

Правильно ли все эти способы узнать, действительно ли компонент перерисовывается? Потому что, похоже, с React.memo он работает неправильно.

Когда я оборачиваю дочерний компонент в React.memo, он не печатает console.log, когда родительский компонент перерисовывается, что правильно. Но все еще с chrome и инструментами реагирования dev подсвечивает дочерний компонент, как будто он перерисовывается.

CodeSandbox: https://codesandbox.io/s/bold-cloud-iv0rv (Если мы добавим новую машину, компонент stati c будет выделен зеленым, но в соответствии с Memo, он не должен перерисовываться.)

Теперь я сомневаюсь, мигание краски работает неправильно или React.memo имеет проблемы?

Answer 1

Причина

Если вы используете React.memo , вам нужно использовать его от родителя до всего потомка до конца.

Поскольку React.PureComponent имеет ту же функцию с React.memo, вы можете найти эти объяснения в документе, как показано ниже.

Более того, React.PureComponent's shouldComponentUpdate () пропускает обновления реквизитов для всего поддерева компонента. Убедитесь, что все дочерние компоненты также являются «чистыми» .

Результат

Изменив родительский компонент Cars на памятку

// Before
export default Cars;
// After
export default React.memo(Cars);

Вы можете найти, что react-dev-tools в chrome покажет только родительский компонент, повторно обработанный на этот раз, а не дочерний console.log, что правильно. (Сравните с предыдущим, все дети также были выделены)

До

После

Заключение

Оба console.log и react-dev-tools работали хорошо, возможно, вам просто нужно будет реализовать их должным образом, следуя вашему требованию.