Как проверить, перерисовывается ли компонент или нет?
Я работаю с реакцией почти 3 года, но иногда сталкиваюсь с трудностями в значении «рендеринга».
Практически, чтобы проверить «рендеринг», я просто помещаю «console.info('render')» в компонент прямо перед «return <>...</>». Это правильная проверка? Или я не могу знать, перерисовано оно или нет?
Ответы 4
Лучше использовать крючок useEffect и проверить его внутри
Проверьте инструменты разработчика React и профайлер. При включении повторно визуализированные компоненты будут мигать на вашем экране.
Не могли бы вы подробно описать его работу? Я привык использовать его, но никогда не видел, чтобы компонент перерисовывался.
Получите инструменты разработки в Chrome, откройте свою страницу, откройте инструменты разработки Chrome, и вы должны увидеть компоненты и профилировщик, добавленные на ваши вкладки. В компонентах -> общие есть опция «Выделять обновления при рендеринге компонентов». Все компоненты, которые повторно визуализируются, должны мигать. Существует довольно много других опций, но этот может быть весьма полезен, чтобы увидеть повторные рендеры с первого взгляда.
Спасибо. Я не использовал это до сих пор.
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.
Да, вы правы, всякий раз, когда вы видите «рендеринг» в своих журналах, это означает, что компонент рендерится.
Раньше я объявлял переменную вне компонента и инициализировал ее значением 0, а затем увеличивал ее внутри компонента, чтобы я мог знать, сколько раз он отображался.
let count = 0;
const Component = () => {
count++;
console.info("component render number: ",count);
//...
}
Я пока не могу комментировать, но опираюсь на ответ об инструментах разработчика React:
- Откройте «Профилировщик».
- Нажмите на значок настроек (вверху справа — «просмотреть настройки»)
- На вкладке «Общие» установите флажок «Выделять обновления при рендеринге компонентов».
Удачи!
Ну да, или просто визуально посмотреть, отображаются ли ожидаемые элементы?