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
Copy file name to clipboardExpand all lines: src/content/reference/react/PureComponent.md
+17-18Lines changed: 17 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: PureComponent
4
4
5
5
<Pitfall>
6
6
7
-
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
7
+
Bileşenleri sınıf yerine fonksiyon olarak tanımlamanızı öneririz. [Nasıl taşınacağını görün.](#alternatives)
8
8
9
9
</Pitfall>
10
10
11
11
<Intro>
12
12
13
-
`PureComponent` is similar to [`Component`](/reference/react/Component)but it skips re-renders for same props and state. Class components are still supported by React, but we don't recommend using them in new code.
13
+
`PureComponent`, [`Component`](/reference/react/Component)ile benzerdir ancak aynı prop'lar ve state için yeniden renderlamayı atlar. Sınıf bileşenleri hâlâ React tarafından desteklenmektedir, ancak yeni kodda kullanılmasını önermiyoruz.
14
14
15
15
```js
16
16
classGreetingextendsPureComponent {
@@ -26,11 +26,11 @@ class Greeting extends PureComponent {
26
26
27
27
---
28
28
29
-
## Reference {/*reference*/}
29
+
## Başvuru Dokümanı {/*reference*/}
30
30
31
31
### `PureComponent` {/*purecomponent*/}
32
32
33
-
To skip re-rendering a class component for same props and state, extend `PureComponent` instead of [`Component`:](/reference/react/Component)
33
+
Aynı prop'lar ve state için bir sınıf bileşeninin yeniden renderlanmasını atlamak istiyorsanız, [`Component`](/reference/react/Component) yerine `PureComponent`'ı genişletin:
34
34
35
35
```js
36
36
import { PureComponent } from'react';
@@ -42,18 +42,17 @@ class Greeting extends PureComponent {
42
42
}
43
43
```
44
44
45
-
`PureComponent` is a subclass of `Component` and supports [all the `Component`APIs.](/reference/react/Component#reference)Extending`PureComponent` is equivalent to defining a custom [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate)method that shallowly compares props and state.
45
+
`PureComponent`, `Component`'ın bir alt sınıfıdır ve [tüm `Component`API'lerini](/reference/react/Component#reference)destekler.`PureComponent`'ı genişletmek, prop'ları ve state'i yüzeysel (shallow) olarak karşılaştıran özel bir [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate)metodu tanımlamakla eşdeğerdir.
46
46
47
-
48
-
[See more examples below.](#usage)
47
+
[Aşağıda daha fazla örneğe bakın.](#usage)
49
48
50
49
---
51
50
52
-
## Usage {/*usage*/}
51
+
## Kullanım {/*usage*/}
53
52
54
-
### Skipping unnecessary re-renders for class components {/*skipping-unnecessary-re-renders-for-class-components*/}
53
+
### Sınıf bileşenlerinde gereksiz yeniden renderlamaları atlama {/*skipping-unnecessary-re-renders-for-class-components*/}
55
54
56
-
React normally re-renders a component whenever its parent re-renders. As an optimization, you can create a component that React will not re-render when its parent re-renders so long as its new props and state are the same as the old props and state. [Class components](/reference/react/Component) can opt into this behavior by extending `PureComponent`:
55
+
React normalde üst bileşen her yeniden renderlandığında alt bileşeni de yeniden renderlar. Bir optimizasyon olarak, yeni prop'ları ve state'i eski prop'lar ve state ile aynı olduğu sürece üst bileşen yeniden renderlandığında React'in yeniden renderlamayacağı bir bileşen oluşturabilirsiniz. [Sınıf bileşenleri](/reference/react/Component), `PureComponent`'ı genişleterek bu davranışı tercih edebilir:
57
56
58
57
```js {1}
59
58
classGreetingextendsPureComponent {
@@ -63,9 +62,9 @@ class Greeting extends PureComponent {
63
62
}
64
63
```
65
64
66
-
A React component should always have [pure rendering logic.](/learn/keeping-components-pure)This means that it must return the same output if its props, state, and context haven't changed. By using `PureComponent`, you are telling React that your component complies with this requirement, so React doesn't need to re-render as long as its props and state haven't changed. However, your component will still re-render if a context that it's using changes.
65
+
Bir React bileşeni her zaman [saf renderlama mantığına](/learn/keeping-components-pure)sahip olmalıdır. Bu, prop'ları, state'i ve context'i değişmediyse aynı çıktıyı döndürmesi gerektiği anlamına gelir. `PureComponent` kullanarak, React'e bileşeninizin bu gereksinime uyduğunu söylemiş olursunuz; böylece React, prop'ları ve state'i değişmediği sürece yeniden renderlama yapmak zorunda kalmaz. Ancak bileşeniniz, kullandığı bir context değişirse yine de yeniden renderlanır.
67
66
68
-
In this example, notice that the `Greeting`component re-renders whenever `name`is changed (because that's one of its props), but not when `address`is changed (because it's not passed to `Greeting` as a prop):
67
+
Bu örnekte, `Greeting`bileşeninin `name`değiştiğinde yeniden renderlandığına (çünkü bu, prop'larından biridir), ancak `address`değiştiğinde yeniden renderlanmadığına dikkat edin (çünkü `Greeting`'e prop olarak iletilmemektedir):
69
68
70
69
<Sandpack>
71
70
@@ -109,17 +108,17 @@ label {
109
108
110
109
<Pitfall>
111
110
112
-
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
111
+
Bileşenleri sınıf yerine fonksiyon olarak tanımlamanızı öneririz. [Nasıl taşınacağını görün.](#alternatives)
113
112
114
113
</Pitfall>
115
114
116
115
---
117
116
118
-
## Alternatives {/*alternatives*/}
117
+
## Alternatifler {/*alternatives*/}
119
118
120
-
### Migrating from a `PureComponent`class component to a function {/*migrating-from-a-purecomponent-class-component-to-a-function*/}
119
+
### Bir `PureComponent`sınıf bileşeninden fonksiyona geçiş {/*migrating-from-a-purecomponent-class-component-to-a-function*/}
121
120
122
-
We recommend using function components instead of [class components](/reference/react/Component)in new code. If you have some existing class components using `PureComponent`, here is how you can convert them. This is the original code:
121
+
Yeni kodda [sınıf bileşenleri](/reference/react/Component)yerine fonksiyon bileşenlerini kullanmanızı öneririz. `PureComponent` kullanan mevcut sınıf bileşenleriniz varsa, bunları nasıl dönüştürebileceğiniz aşağıda açıklanmıştır. İşte orijinal kod:
123
122
124
123
<Sandpack>
125
124
@@ -161,7 +160,7 @@ label {
161
160
162
161
</Sandpack>
163
162
164
-
When you [convert this component from a class to a function,](/reference/react/Component#alternatives)wrap it in [`memo`:](/reference/react/memo)
163
+
[Bu bileşeni sınıftan fonksiyona dönüştürdüğünüzde,](/reference/react/Component#alternatives)[`memo`](/reference/react/memo) ile sarmalayın:
165
164
166
165
<Sandpack>
167
166
@@ -203,6 +202,6 @@ label {
203
202
204
203
<Note>
205
204
206
-
Unlike `PureComponent`, [`memo`](/reference/react/memo)does not compare the new and the old state. In function components, calling the [`set`function](/reference/react/useState#setstate)with the same state [already prevents re-renders by default,](/reference/react/memo#updating-a-memoized-component-using-state) even without `memo`.
205
+
`PureComponent`'ın aksine, [`memo`](/reference/react/memo)eski ve yeni state'i karşılaştırmaz. Fonksiyon bileşenlerinde, [`set`fonksiyonunu](/reference/react/useState#setstate)aynı state ile çağırmak, `memo` olmadan bile [varsayılan olarak yeniden renderlamayı önler.](/reference/react/memo#updating-a-memoized-component-using-state)
0 commit comments