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

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

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

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

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

введите здесь описание изображения

3. Используйте инструмент разработки React

введите здесь описание изображения

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

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

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

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


reactjs javascript rerender virtual-dom react-devtools
person Deepak Kumar Padhy    schedule 25.02.2020    source источник
comment
вы уверены, что в вашей консоли песочницы печатается журнал ...   -  person pavan kumar    schedule 25.02.2020
comment
@pavankumar, для первого рендера он обязательно напечатает, но если компонент обернут React.memo, он не будет печатать console.log для последующих рендеров при нажатии кнопки Добавить.   -  person Deepak Kumar Padhy    schedule 25.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

Причина

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

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

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

Результат

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

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

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

Перед введите здесь описание изображения

После введите здесь описание изображения

Заключение

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

person keikai    schedule 25.02.2020
comment
you need to use it from parent down to all the child till the end. была самой важной концепцией, которую я упустил. Большое спасибо за подробное объяснение. Действительно, это помогло мне получить четкое представление о том, как использовать памятку. - person Deepak Kumar Padhy; 25.02.2020