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 `react-dom`package contains methods that are only supported for the web applications (which run in the browser DOM environment). They are not supported for React Native.
7
+
`react-dom`paketi, sadece tarayıcı DOM ortamında çalışan web uygulamaları için desteklenen yöntemleri içerir. React Native için desteklenmezler.
8
8
9
9
</Intro>
10
10
11
11
---
12
12
13
-
## APIs {/*apis*/}
13
+
## API'ler {/*apis*/}
14
14
15
-
These APIs can be imported from your components. They are rarely used:
15
+
Bu API'ler bileşenlerinizden içe aktarılabilirler. Nadiren kullanılırlar:
16
16
17
-
*[`createPortal`](/reference/react-dom/createPortal)lets you render child components in a different part of the DOM tree.
18
-
*[`flushSync`](/reference/react-dom/flushSync)lets you force React to flush a state update and update the DOM synchronously.
17
+
*[`createPortal`](/reference/react-dom/createPortal)alt bileşenleri DOM ağacındaki farklı bir bölüme render etmenizi sağlar.
18
+
*[`flushSync`](/reference/react-dom/flushSync) React'i bir state güncellemesini hemen uygulamaya zorlayarak senkronize şekilde DOM'u güncellemenizi sağlar.
19
19
20
20
---
21
21
22
-
## Entry points {/*entry-points*/}
22
+
## Giriş noktaları {/*entry-points*/}
23
23
24
-
The `react-dom`package provides two additional entry points:
24
+
`react-dom`paketi iki ek giriş noktası sağlar:
25
25
26
-
*[`react-dom/client`](/reference/react-dom/client)contains APIs to render React components on the client (in the browser).
27
-
*[`react-dom/server`](/reference/react-dom/server)contains APIs to render React components on the server.
26
+
*[`react-dom/client`](/reference/react-dom/client) React bileşenlerini istemcide (tarayıcıda) render etmek için API'ler içerir.
27
+
*[`react-dom/server`](/reference/react-dom/server)React bileşenlerini sunucuda oluşturmak için API'ler içerir.
These APIs will be removed in a future major version of React.
35
+
Bu API'ler React'in gelecekteki bir ana sürümünde kaldırılacaktır.
36
36
37
37
</Deprecated>
38
38
39
-
*[`findDOMNode`](/reference/react-dom/findDOMNode)finds the closest DOM node corresponding to a class component instance.
40
-
*[`hydrate`](/reference/react-dom/hydrate)mounts a tree into the DOM created from server HTML. Deprecated in favor of [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
41
-
*[`render`](/reference/react-dom/render)mounts a tree into the DOM. Deprecated in favor of [`createRoot`](/reference/react-dom/client/createRoot).
42
-
*[`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode)unmounts a tree from the DOM. Deprecated in favor of [`root.unmount()`.](/reference/react-dom/client/createRoot#root-unmount)
39
+
*[`findDOMNode`](/reference/react-dom/findDOMNode)bir sınıf bileşeni öğesine karşılık gelen en yakın DOM düğümünü bulur.
40
+
*[`hydrate`](/reference/react-dom/hydrate)sunucu HTML'inden oluşturulan DOM'a bir ağaç bağlar. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) ile değiştirilmiştir.
41
+
*[`render`](/reference/react-dom/render)bir ağacı DOM'a bağlar. [`createRoot`](/reference/react-dom/client/createRoot) ile değiştirilmiştir.
42
+
*[`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode)bir ağacı DOM'dan kaldırır. [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) ile değiştirilmiştir.
Copy file name to clipboardExpand all lines: src/content/reference/react/Profiler.md
+28-28Lines changed: 28 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: <Profiler>
4
4
5
5
<Intro>
6
6
7
-
`<Profiler>`lets you measure rendering performance of a React tree programmatically.
7
+
`<Profiler>`programatik olarak bir React ağacınının performansını ölçmenizi sağlar.
8
8
9
9
```js
10
10
<Profiler id="App" onRender={onRender}>
@@ -18,55 +18,55 @@ title: <Profiler>
18
18
19
19
---
20
20
21
-
## Reference {/*reference*/}
21
+
## Referans {/*reference*/}
22
22
23
23
### `<Profiler>` {/*profiler*/}
24
24
25
-
Wrap a component tree in a `<Profiler>`to measure its rendering performance.
25
+
Bir bileşen ağacını `<Profiler>`ile sarmalayarak render performansını ölçebilirsiniz.
26
26
27
27
```js
28
28
<Profiler id="App" onRender={onRender}>
29
29
<App />
30
30
</Profiler>
31
31
```
32
32
33
-
#### Props {/*props*/}
33
+
#### Prop'lar {/*props*/}
34
34
35
-
*`id`: A string identifying the part of the UI you are measuring.
36
-
*`onRender`: An [`onRender` callback](#onrender-callback) that React calls it every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
35
+
*`id`: Kullanıcı arayüzünün ölçtüğünüz bölümünü tanımlayan bir string.
36
+
*`onRender`: Profilleme yapılan ağaçtaki bileşenler her güncellendiğinde React [`onRender` callback](#onrender-callback)'ini çağırır. Hangi bileşenlerin yeniden render edildiği ve ne kadar sürede render edildiği bilgilerini alır.
37
37
38
-
#### Caveats {/*caveats*/}
38
+
#### Uyarılar {/*caveats*/}
39
39
40
-
*Profiling adds some additional overhead, so**it is disabled in the production build by default.**To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
40
+
*Profilleme, ekstra bir yük getirdiği için**varsayılan olarak canlı ortamda devre dışı bırakılmıştır.**Canlı ortamda profilleme yapmak için [profilleme özelliklerinin etkin olduğu özel bir canlı ortam sürümünü etkinleştirmeniz gerekmektedir.](https://fb.me/react-profiling)
41
41
42
42
---
43
43
44
-
### `onRender` callback {/*onrender-callback*/}
44
+
### `onRender` callback'i {/*onrender-callback*/}
45
45
46
-
React will call your `onRender` callback with information about what was rendered.
46
+
React `onRender` callback`inizi neyin render edildiği bilgisi ile çağıracaktır.
*`id`: The string `id` prop of the `<Profiler>`tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
57
-
*`phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
58
-
*`actualDuration`: The number of milliseconds spent rendering the `<Profiler>`and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g.[`memo`](/reference/react/memo)and[`useMemo`](/reference/react/useMemo)). 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.
59
-
*`baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>`subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
60
-
*`startTime`: A numeric timestamp for when React began rendering the current update.
61
-
*`endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
56
+
*`id`: Yeni commit edilmiş `<Profiler>`ağacının `id` string prop'u. Bu, birden fazla profilleyici kullanıyorsanız ağacın hangi bölümünün commit edildiğini belirlemenizi sağlar.
57
+
*`phase`: `"mount"`, `"update"` or `"nested-update"`. Bu, ağacın ilk kez mi yüklendiğini yoksa prop, state veya hook'lardaki bir değişiklik nedeniyle mi yeniden render edildiğini bilmenizi sağlar.
58
+
*`actualDuration`: Mevcut güncelleme için `<Profiler>`ve onun alt öğelerini render etmek için harcanan milisaniye sayısı. Bu, alt ağacın memoizasyondan ne kadar iyi yararlandığını gösterir (örneğin[`memo`](/reference/react/memo)ve[`useMemo`](/reference/react/useMemo)). İdeal olarak, bu değer ilk yüklemeden sonra önemli ölçüde azalmalıdır, çünkü alt öğelerin birçoğu yalnızca belirli prop'ları değiştiğinde yeniden render edilmedir.
59
+
*`baseDuration`: Herhangi bir optimizasyon olmadan tüm `<Profiler>`alt ağacını yeniden render etmenin ne kadar zaman alacağını tahmin eden milisaniye sayısı. Ağaçtaki her bileşenin en son render süreleri toplanarak hesaplanır. Bu değer, render işleminin en kötü senaryo maliyetini tahmin eder (örn. ilk yükleme işlemi veya memoizasyon olmayan bir ağaç). Memoizasyonun çalışıp çalışmadığını görmek için `actualDuration` ile karşılaştırın.
60
+
*`startTime`: React'in mevcut güncellemeyi ne zaman render etmeye başladığını gösteren sayısal bir zaman damgası.
61
+
*`endTime`: React'in geçerli güncellemeyi ne zaman commit ettiğini gösteren sayısal bir zaman damgası. Bu değer, istenirse gruplandırılabilmeleri için bir committeki tüm profilleyiciler arasında paylaşılır.
### Render performansının programatik olarak ölçülmesi {/*measuring-rendering-performance-programmatically*/}
68
68
69
-
Wrap the `<Profiler>`component around a React tree to measure its rendering performance.
69
+
Render performansını ölçmek için `<Profiler>`bileşenini bir React ağacının etrafına sarın.
70
70
71
71
```js {2,4}
72
72
<App>
@@ -77,25 +77,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
77
77
</App>
78
78
```
79
79
80
-
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.
80
+
`<Profiler>` iki prop alır: bir`id` (string) ve React'in ağaç içinde bir bileşen her güncelleme "commit" ettiğinde çağırdığı `onRender` callback'i (fonksiyon).
81
81
82
82
<Pitfall>
83
83
84
-
Profiling adds some additional overhead, so**it is disabled in the production build by default.**To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
84
+
Profilleme, ekstra bir yük getirdiği için**varsayılan olarak canlı ortamda devre dışı bırakılmıştır.**Canlı ortamda profilleme yapmak için [profilleme özelliklerinin etkin olduğu özel bir canlı ortam sürümünü etkinleştirmeniz gerekmektedir.](https://fb.me/react-profiling)
85
85
86
86
</Pitfall>
87
87
88
88
<Note>
89
89
90
-
`<Profiler>` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension.
90
+
`<Profiler>`, ölçümleri programatik olarak toplamanızı sağlar. Etkileşimli bir profilleyici arıyorsanız, [React Developer Tools](/learn/react-developer-tools) içindeki Profiler sekmesini deneyin. Benzer işlevselliği bir tarayıcı uzantısı olarak sunar.
91
91
92
92
</Note>
93
93
94
94
---
95
95
96
-
### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
96
+
### Uygulamanın farklı bölümlerinin ölçülmesi {/*measuring-different-parts-of-the-application*/}
97
97
98
-
You can use multiple `<Profiler>`components to measure different parts of your application:
98
+
Uygulamanızın farklı bölümlerini ölçmek için birden fazla `<Profiler>`bileşeni kullanabilirsiniz:
99
99
100
100
```js {5,7}
101
101
<App>
@@ -108,7 +108,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
108
108
</App>
109
109
```
110
110
111
-
You can also nest `<Profiler>`components:
111
+
Ayrıca `<Profiler>`bileşenlerini iç içe geçirebilirsiniz:
112
112
113
113
```js {5,7,9,12}
114
114
<App>
@@ -126,7 +126,7 @@ You can also nest `<Profiler>` components:
126
126
</App>
127
127
```
128
128
129
-
Although `<Profiler>`is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
129
+
`<Profiler>`bileşeni hafif bir bileşen olsa da, sadece gerektiği zaman kullanılmalıdır. Her kullanım uygulamaya CPU ve bellek yükü ekler.
0 commit comments