You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `Profiler` measures how often a React application renders and what the "cost" of rendering is.
10
-
Its purpose is to help identify parts of an application that are slow and may benefit from [optimizations such as memoization](https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations).
9
+
React applikasiyasının hansı tezlikdə render edilməsini və render edilmənin "qiymətini" ölçmək üçün `Profiler`-dən istifadə edilir.
10
+
Bu alət applikasiyanın yavaş işləyən və [memoizasiya kimi optimallaşdırmalardan faydalana bilən](https://reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations) hissələrini tapmaq üçün işlədilir.
11
11
12
-
> Note:
12
+
> Qeyd:
13
13
>
14
-
> Profiling adds some additional overhead, so **it is disabled in [the production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)**.
14
+
> Profayl etmə əməliyyatı applikasiyaya ağırlığı verə bilər. Lakin, bu xüsusiyyətlər **[produksiya qurulmasında](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build) söndürülür**.
15
15
>
16
-
> To opt into production profiling, React provides a special production build with profiling enabled.
17
-
> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling)
16
+
> Produksiyada profayl edə bilmək üçün React-də profayl etməyə imkan yaradan produksiya qurulması var.
17
+
> Bu qurulma haqqında əlavə məlumat üçün [fb.me/react-profiling](https://fb.me/react-profiling) səhifəsinə baxın.
18
18
19
-
## Usage
19
+
## İstifadəsi
20
20
21
-
A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
22
-
It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.
21
+
React ağacının istənilən yerini profayl edə bilmək üçün istənilən yerə Profayler əlavə etmək mümkündür.
22
+
Bu komponent iki prop qəbul edir: `id` (mətn) və `onRender` callback-i (funksiya). `onRender` callback-i ağacda olan həs hansı bir komponent, yeniliyi "commit" etdiyi zaman çağrılır.
23
23
24
-
For example, to profile a `Navigation`component and its descendants:
24
+
Məsələn, `Navigation`komponentini və uşaqlarını profayl etmək üçün:
25
25
26
26
```js{3}
27
27
render(
@@ -34,7 +34,8 @@ render(
34
34
);
35
35
```
36
36
37
-
Multiple `Profiler` components can be used to measure different parts of an application:
37
+
Applikasiyanın fərqli hissələrini profayl etmək üçün bir neçə `Profiler` komponentindən istifadə etmək mümkündür:
38
+
38
39
```js{3,6}
39
40
render(
40
41
<App>
@@ -48,7 +49,8 @@ render(
48
49
);
49
50
```
50
51
51
-
`Profiler` components can also be nested to measure different components within the same subtree:
52
+
Eyni ağaca bir neçə `Profiler` komponenti əlavə etmək mümkündür:
53
+
52
54
```js{2,6,8}
53
55
render(
54
56
<App>
@@ -66,54 +68,60 @@ render(
66
68
);
67
69
```
68
70
69
-
> Note
71
+
> Qeyd
70
72
>
71
-
> Although `Profiler` is a light-weight component, it should be used only when necessary; each use adds some CPU and memory overhead to an application.
73
+
> `Profiler`-in yüngül komponent olduğuna baxmayaraq bu komponenti yalnız lazım olduqda işlədin. Bu komponentin hər istifadəsi CPU və yaddaşa ağırlıq verə bilər.
72
74
73
-
## `onRender` Callback
75
+
## `onRender` Callback-i
74
76
75
-
The `Profiler`requires an `onRender`function as a prop.
76
-
React calls this function any time a component within the profiled tree "commits" an update.
77
-
It receives parameters describing what was rendered and how long it took.
77
+
`Profiler`komponenti `onRender`funksiyası propunu tələb edir.
78
+
Profayl olunan ağacda hər hansı bir komponent, yeniliyi "commit" etdikdə bu funksiya çağrılır.
79
+
Bu funksiyanın render edilən elementi və render zamanını təsvir edən parametrləri var.
78
80
79
81
```js
80
82
functiononRenderCallback(
81
-
id, //the "id" prop of the Profiler tree that has just committed
82
-
phase, //either "mount" (if the tree just mounted) or "update" (if it re-rendered)
83
-
actualDuration, //time spent rendering the committed update
84
-
baseDuration, //estimated time to render the entire subtree without memoization
85
-
startTime, //when React began rendering this update
86
-
commitTime, //when React committed this update
87
-
interactions//the Set of interactions belonging to this update
83
+
id, //commit olunan Profayler ağacının "id" propu
84
+
phase, // "mount" (ağac yeni əlavə edildikdə) və ya "update" (yenidən render edildikdə)
85
+
actualDuration, //Commit olunan yeniliyi render etmək üçün sərf olunan zaman
86
+
baseDuration, //memoizasiyasız bütün ağacın render olunmasına sərf olunan zaman
87
+
startTime, //Yeniliyi render etmənin başlama vaxtı
88
+
commitTime, //Yeniliyin commit olunma vaxtı
89
+
interactions//Bu yeniliyə aid olan interaksiyalar siyahısı
88
90
) {
89
-
//Aggregate or log render timings...
91
+
//Render vaxtlarını aqreqat və ya loq edin...
90
92
}
91
93
```
92
94
93
-
Let's take a closer look at each of the props:
95
+
Gəlin hər arqumentə ayrılıqda baxaq:
94
96
95
97
***`id: string`** -
96
-
The `id` prop of the `Profiler` tree that has just committed.
97
-
This can be used to identify which part of the tree was committed if you are using multiple profilers.
98
+
Commit olunan Profayler ağacının "id" propu.
99
+
Bir neçə profayler işlədildikdə ağacın hansı hissəsinin commit olunduğunu müəyyənləşdirmək üçün işlədilir.
100
+
98
101
***`phase: "mount" | "update"`** -
99
-
Identifies whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
102
+
Ağacın ilk dəfə mount olunmasını, və ya proplar, state, və ya hooklar əsasında yenidən render edildiyini müəyyənləşdirir.
103
+
100
104
***`actualDuration: number`** -
101
-
Time spent rendering the `Profiler` and its descendants for the current update.
102
-
This indicates how well the subtree makes use of memoization (e.g. [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
103
-
Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
105
+
Cari yenilik üçün `Profiler`-i və uşaqlarını render etmək üçün sərf olunan zaman.
106
+
Bu dəyər ağacın memoizasiyadan necə istifadə etdiyini göstərir (məsələn, [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
107
+
İdeal olaraq, uşaqların spesifik prop dəyişikləri əsasında yeniləndiyini nəzərə alsaq bu dəyər ilkin mount-dan sonra kəskin azalmalıdır.
108
+
104
109
***`baseDuration: number`** -
105
-
Duration of the most recent `render` time for each individual component within the `Profiler` tree.
106
-
This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization).
110
+
`Profiler` ağacında olan bütün komponentlərin render olunduğu ən sonuncu renderə sərf olunan zaman.
111
+
Bu dəyər renderin ən pis qiymətini hesablayır (məsələn, ilkin mount zamanı və ya memoizasiyasız ağac).
112
+
107
113
***`startTime: number`** -
108
-
Timestamp when React began rendering the current update.
114
+
Cari yeniliyi render etmənin başlama vaxtı.
115
+
109
116
***`commitTime: number`** -
110
-
Timestamp when React committed the current update.
111
-
This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
117
+
Cari yeniliyin commit olunduğu vaxt.
118
+
Bu dəyər commit-də olan bütün profaylerlər arasında paylaşılır (lazım olduqda bu dəyəri qruplamaq olar).
119
+
112
120
***`interactions: Set`** -
113
-
Set of ["interactions"](http://fb.me/react-interaction-tracing)that were being traced the update was scheduled (e.g. when `render`or `setState`were called).
121
+
Yenilik planlaşdırılmasına səbəb olan ["interaksiyaların"](http://fb.me/react-interaction-tracing)siyahısı (məsələn, `render`və ya `setState`çağrıldıqda).
114
122
115
-
> Note
123
+
> Qeyd
116
124
>
117
-
> Interactions can be used to identify the cause of an update, although the API for tracing them is still experimental.
125
+
> Yenilikləri müəyyənləşdirmək üçün interaksiyalardan istifadə edə bilərsiniz. Lakin, bu API hələ ki, eksperimentaldır.
118
126
>
119
-
> Learn more about it at [fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing)
127
+
> Əlavə məlumat üçün [fb.me/react-interaction-tracing](http://fb.me/react-interaction-tracing) səhifəyə baxın.
0 commit comments