<Profiler>
<Profiler>
дозволяє вам програмно вимірювати продуктивність рендеру React-дерева.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
Опис
<Profiler>
Обгорніть дерево компонентів у <Profiler>
, щоб виміряти продуктивність його рендеру.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
Пропси
id
: Рядковий ідентифікатор тої частини UI, продуктивність якої ви вимірюєте.onRender
: Функція зворотного викликуonRender
, яку React викликає кожного разу, коли компоненти всередині профільованого дерева оновлюються. Вона отримує інформацію про те, що було відрендерено і скільки часу це зайняло.
Застереження
- Профілювання створює додаткове навантаження, тому воно вимкнене в продакшн-збірці за замовчуванням. Щоб увімкнути продакшн-профілювання, потрібно скористатися спеціальною продакшн-збіркою з профілюванням.
Функція зворотного виклику onRender
React викличе вашу функцію зворотного виклику onRender
з інформацією про те, що було відрендерено.
function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
// Зберіть або виведіть дані про тривалість рендеру...
}
Параметри
id
: Рядковийid
проп дерева<Profiler>
, яке щойно було закомічено. Він дозволяє вам визначити, яку частину дерева було закомічено, якщо ви використовуєте кілька профілювачів.phase
:"mount"
,"update"
або"nested-update"
. Дає змогу дізнатися, чи дерево було щойно змонтовано вперше, або ж перерендерено через зміни в стані, пропсах чи хуках.actualDuration
: Кількість мілісекунд, витрачених на рендеринг компонента<Profiler>
і його дочірніх компонентів під час поточного оновлення. Вказуєте на те, наскільки ефективно субдерево використовує мемоїзацію (наприклад,memo
іuseMemo
). В ідеалі, це значення повинно значно зменшитися після першого монтування, оскільки багато з дочірніх компонентів будуть перерендерюватися лише за зміни пропсів.baseDuration
: Кількість мілісекунд, яка відображає, скільки часу займе повторний рендер усього субдерева компонента<Profiler>
без будь-якої оптимізації. Це значення розраховується як сума часу останніх рендерів кожного компонента в дереві. Воно показує найгірший сценарій рендерингу (наприклад, перше монтування або дерево без мемоїзації). ПорівняйтеactualDuration
з ним, щоби перевірити, чи працює мемоїзація.startTime
: Числове значення, яке вказує на момент часу, коли React почав рендеринг поточного оновлення.commitTime
: Числове значення, яке вказує на момент часу, коли React закомітив поточне оновлення. Це значення однакове в усіх профілювачів у коміті, що дає змогу згрупувати їх за потреби.
Використання
Програмне вимірювання продуктивності рендерингу
Обгорніть компонент <Profiler>
навколо React-дерева, щоб визначити продуктивність його рендеру.
<App>
<Profiler id="Sidebar" onRender={onRender}>
<Sidebar />
</Profiler>
<PageContent />
</App>
Він потребує двох пропсів: id
(рядок) і функцію зворотного виклику onRender
(функція), яку React викличе, коли будь-який компонент всередині дерева “закомітить” оновлення.
Вимірювання продуктивності різних частин застосунку
Ви можете використовувати кілька компонентів <Profiler>
, щоб виміряти продуктивність різних частин вашого застосунку:
<App>
<Profiler id="Sidebar" onRender={onRender}>
<Sidebar />
</Profiler>
<Profiler id="Content" onRender={onRender}>
<Content />
</Profiler>
</App>
Ви також можете вкладувати компоненти <Profiler>
:
<App>
<Profiler id="Sidebar" onRender={onRender}>
<Sidebar />
</Profiler>
<Profiler id="Content" onRender={onRender}>
<Content>
<Profiler id="Editor" onRender={onRender}>
<Editor />
</Profiler>
<Preview />
</Content>
</Profiler>
</App>
Хоча <Profiler>
є легким компонентом, його слід використовувати лише за необхідності. Кожне його використання додає певне навантаження на CPU та пам’ять вашого застосунку.