Как я могу измерить рентабельные рендер в React 16?

Я ранее использовал action-addons-perf пакет для измерения различных вещей, таких как потраченные рендеринги через Perf.printWasted(). К сожалению, этот пакет был удален в React 16 в пользу вкладки Chrome Performance, которая не имеет эквивалентных инструментов.

Я знаю why-did-you-update, но это не совсем то же самое.

Есть ли какой-либо способ в React 16 для измерения потерянных рендеров?

Ответ 1

Да, response-addons-perf был удален, и вы не получите их для React 16 и далее (в Fiber), как указано Даном Абрамовым в этом выпуске.

Редактировать 09-2018: недавно был объявлен профилировщик для React DevTools, теперь вы можете использовать этот инструмент для оптимизации и анализа рендеринга. Подробнее об этом инструменте и о том, как его использовать, можно прочитать в этом официальном сообщении в блоге

.Редактировать 09-2019: React Dev Tools получил серьезное обновление, теперь вы можете измерять рендеры, и есть настройка для получения функций "почему вы обновили" -like в настройках RDT.

Другой вариант - использовать почему-вы-обновили, вы упомянули об этом, но разница, которая "не совсем такая" с реакцией-перф-аддоном, заключается в том, что последний инструмент использует анализ внутренней сверки. вместо того, чтобы полагаться на тот факт, что повторный рендеринг инициируется обновлением состояния или родителей, например, почему вы сделали обновление. Для меня нет большой разницы между этими инструментами, когда мы приближаемся к ненужному анализу производительности рендеринга React.

В качестве альтернативы вы можете использовать аддон таблицы производительности, который был связан в этой проблеме. На мой взгляд, принципы анализа производительности, изложенные в статье Бена Шварца, будут наиболее полезными для вас и производительности вашего приложения, поскольку React использует Timing API для внутреннего использования и будет отображаться в Chrome DevTools в разделе "User Timing" на вкладке "Эффективность".

Надеюсь это поможет!