<Profiler>
<Profiler>
дає вам змогу програмно вимірювати продуктивність рендеру React-дерева.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
Опис
<Profiler>
Обгорніть дерево компонентів у <Profiler>
, щоб виміряти продуктивність його рендеру.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
Пропси
id
: Стрічковий ідентифікатор тієї частини UI, продуктивність якої ви вимірюєте.onRender
: Функція зворотного викликуonRender
, яку React викликає щоразу, коли компоненти всередині профільованого дерева оновлюються. Вона отримує інформацію про те, що було відрендерено і скільки часу це зайняло.
Застереження
- Профілювання створює додаткове навантаження, тому початково воно вимкнене у збірці для впровадження (production). Щоб профілювати у публічному середовищі, потрібно скористатися спеціальною збіркою для впровадження з увімкненим профілюванням.
Функція зворотного виклику onRender
React викличе вашу функцію зворотного виклику onRender
з інформацією про те, що було відрендерено.
function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
// Зберіть або виведіть дані про тривалість рендеру...
}
Параметри
id
: Стрічковий пропid
дерева<Profiler>
, яке щойно було внесено (committed). Він дає вам змогу визначити, яку саме частину дерева було внесено, якщо ви використовуєте кілька профілювачів.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 та пам’ять вашого застосунку.