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/learn/escape-hatches.md
+26-23Lines changed: 26 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,32 +4,32 @@ title: Kaçış Yolları
4
4
5
5
<Intro>
6
6
7
-
Bazı bileşenleriniz React dışındaki sistemleri kontrol etmek ve bu sistemlerle senkronize olmak isteyebilir. Örneğin, tarayıcı API kullanarak bir input alanına odaklanmak, React harici yazılmış bir video oynatıcısını durdurmak ve oynatmak ya da uzaktan bir sunucuya bağlanmak ve mesajları dinlemek isteyebilirsiniz. Bu bölümde, React "dışına çıkmanızı" ve dış sistemlere bağlanmanızı sağlayacak kaçış yollarını öğreneceksiniz. Uygulama mantığınızın ve veri akışınızın çoğu bu özelliklere dayanmamalıdır.
7
+
Bazı bileşenleriniz, React'in dışarısında bulunan bileşenleri kontrol etmek ya da onlarla senkronize olmaya ihtiyaç duyabilir. Örneğin, tarayıcı API'sini kullanarak bir girdi alanına odaklanmanız, React olmadan yazılmış bir video oynatıcıyı durdurup başlatmanız ya da uzak bir sunucuya bağlanıp mesajları dinlemeniz gerekebilir. Bu bölümde, dış sistemlere bağlanmak için React'in "dışına çıkmanızı" sağlayacak kaçış yollarını öğreneceksiniz. Uygulama mantığınızın ve veri akışınızın çoğu bu özelliklere bağlı olmamalıdır.
8
8
9
9
</Intro>
10
10
11
11
<YouWillLearnisChapter={true}>
12
12
13
-
*[Yeniden render etmeden bilgilerin nasıl "hatırlanacağı"](/learn/referencing-values-with-refs)
14
-
*[React ile kontrol edilen DOM elemanlarına nasıl ulaşılacağı](/learn/manipulating-the-dom-with-refs)
15
-
*[Bileşenlerin dış sistemeler ile nasıl senkronize edileceği](/learn/synchronizing-with-effects)
16
-
*[Gereksiz Efektlerin bileşenlerinizden nasıl kaldırılacağı](/learn/you-might-not-need-an-effect)
17
-
*[Bir Efektin yaşam döngüsü bir bileşenden nasıl farklıdır](/learn/lifecycle-of-reactive-effects)
18
-
*[Bazı değelerin Efekti yeniden tetiklemesinin nasıl engelleneceği](/learn/separating-events-from-effects)
19
-
*[Efektinizin daha az sıklıkta yeniden çalışmasının nasıl sağlanacağı](/learn/removing-effect-dependencies)
20
-
*[Bileşenler arasında mantığın nasıl paylaşılacağı](/learn/reusing-logic-with-custom-hooks)
13
+
*[Yeniden render etmeden bilgiyi nasıl "hatırlayacağınızı"](/learn/referencing-values-with-refs)
14
+
*[React tarafından yönetilen DOM elemanlarına nasıl ulaşacağınızı](/learn/manipulating-the-dom-with-refs)
15
+
*[Bileşenleri nasıl dış sistemlerle senkronize edeceğinizi](/learn/synchronizing-with-effects)
16
+
*[Bileşenlerinizden gereksiz Effect'leri nasıl kaldıracağınızı](/learn/you-might-not-need-an-effect)
17
+
*[Bir Effect'in yaşam döngüsünün bir bileşenin yaşam döngüsünden nasıl farklı olduğunu](/learn/lifecycle-of-reactive-effects)
18
+
*[Bazı değerlerin Effect'leri yeniden tetiklemesini nasıl engelleyeceğinizi](/learn/separating-events-from-effects)
19
+
*[Effect'inizin daha az sıklıkla yeniden çalışmasını nasıl sağlayabileceğinizi](/learn/removing-effect-dependencies)
20
+
*[Bileşenler arasında mantık paylaşımı nasıl yapacağınızı](/learn/reusing-logic-with-custom-hooks)
21
21
22
22
</YouWillLearn>
23
23
24
-
## Ref ile Değerlere Referans Verme {/*referencing-values-with-refs*/}
24
+
## Ref'ler ile değerleri referans etmek {/*referencing-values-with-refs*/}
25
25
26
-
Bir bileşenin "hatırlamasını" istediğiniz bilgi varsa, ancak bu bilginin [yeni render'lar](/learn/render-and-commit)tetiklemesini istemiyorsanız, bir *ref* kullanabilirsiniz:
26
+
Bileşeninizin bir bilgiyi "hatırlamasını" istediğinizde, ancak bu bilginin [yeni render'lar tetiklemesini](/learn/render-and-commit)istemediğinizde, bir *ref* kullanabilirsiniz:
27
27
28
28
```js
29
29
constref=useRef(0);
30
30
```
31
31
32
-
State'te olduğu gibi ref'lerde yeniden renderlar arasında React tarafından tutulur. Ancak, state'i değiştirmek bileşeni yeniden render eder. Bir ref'i değiştirmek yeniden render'a neden olmaz! Bir ref'in mevcut değerine `ref.current`özelleğini kullanarak erişebilirsiniz.
32
+
Stategibi, ref'ler de React tarafından yeniden render'lar arasında saklanır. Ancak, bir state'i değiştirmek bileşeni yeniden render eder. Bir ref'i değiştirmek etmez! Ref'in o anki değerine `ref.current`özelliği üzerinden erişebilirsiniz.
33
33
34
34
<Sandpack>
35
35
@@ -41,30 +41,32 @@ export default function Counter() {
41
41
42
42
functionhandleClick() {
43
43
ref.current=ref.current+1;
44
-
alert(ref.current+'defa tıkladınız!');
44
+
alert(ref.current+'kez tıkladınız!');
45
45
}
46
46
47
47
return (
48
48
<button onClick={handleClick}>
49
-
Tıkla!
49
+
Bana tıkla!
50
50
</button>
51
51
);
52
52
}
53
53
```
54
54
55
55
</Sandpack>
56
56
57
-
Ref, bileşeninizin React tarafından takip edilmeyen gizli bir cebi gibidir. Örneğin, ref'leri kullanarak [zamanaşımı ID'lerini](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM elemanlarını](https://developer.mozilla.org/en-US/docs/Web/API/Element) ve bileşenin render çıktısını etkilemeyen diğer nesneleri saklayabilirsiniz.
57
+
Bir ref, bileşeninize ait, React'in takip etmediği gizli bir cep gibidir. Örneğin, ref'leri [zaman aşımı ID'lerini](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM elemanlarını](https://developer.mozilla.org/en-US/docs/Web/API/Element) ve bileşenin render çıktısını etkilemeyen diğer nesneleri saklamak için kullanabilirsiniz.
**[Ref ile Değerlere Referans Verme](/learn/referencing-values-with-refs)** sayfasını okuyarak ref'lerin bilgileri hatırlamada nasıl kullanılacağını öğrenebilirsiniz.
62
62
63
+
Ref'leri kullanarak nasıl bilgi saklayacağınızı öğrenmek için **[Ref'ler ile değerleri referans etme](/learn/referencing-values-with-refs)** bölümünü okuyun.
64
+
63
65
</LearnMore>
64
66
65
-
## Ref'ler ile DOM Manipülasyonu {/*manipulating-the-dom-with-refs*/}
67
+
## DOM'u ref'ler ile manipüle etmek {/*manipulating-the-dom-with-refs*/}
66
68
67
-
React, DOM'u render edilen çıktıya uyacak şekilde otomatik olarak günceller. Böylece bileşenlerinizin genellikle onu değiştirmesi gerekmez. Ancak bazen React tarafından yönetilen DOM elemanlarına erişmeye ihtiyaç duyabilirsiniz örneğin bir elemana odaklamak, onu kaydırmak veya boyutunu ve konumunu ölçmek isteyebilirsiniz. React'te bunları yapmanın yerleşik bir yolu yoktur bu yüzden DOM elemanı için *ref*'e ihtiyacınız olacak. Örneğin, butona tıklamak ref'i kullanarak input alanına odaklanmanızı sağlayacaktır:
69
+
React, render çıktınızla eşleşmesi için DOM'u otomatik olarak günceller, bunun sayesinde bileşenleriniz genellikle DOM'u manipüle etme ihtiyacı duymaz. Ancak, bazen React tarafından yönetilen DOM elemanlarına erişmeniz gerekebilir - örneğin, bir düğüme odaklanmak, ona scroll'lamak veya boyutunu ve konumunu ölçmek için. React'te bunları yapmak için gömülü bir yöntem yoktur, bu yüzden DOM düğümüne bir ref'e ihtiyacınız olacaktır. Örneğin, aşağıdaki örnekteki gibi, bir düğmeye tıklandığında bir ref kullanarak input'a odaklanabilirsiniz:
68
70
69
71
<Sandpack>
70
72
@@ -82,7 +84,7 @@ export default function Form() {
82
84
<>
83
85
<input ref={inputRef} />
84
86
<button onClick={handleClick}>
85
-
İnput alanına odaklan
87
+
Girdiye odaklan
86
88
</button>
87
89
</>
88
90
);
@@ -93,15 +95,16 @@ export default function Form() {
**[Ref'ler ile DOM Manipülasyonu](/learn/manipulating-the-dom-with-refs)**sayfasını okuyarak React tarafından kontrol edilen DOM elemanlarına nasıl erişebileceğinizi öğrenebilirsiniz.
98
+
React tarafından yönetilen DOM elemanlarına nasıl erişeceğinizi öğrenmek için **[DOM'u ref'ler ile manipüle etme](/learn/manipulating-the-dom-with-refs)**bölümünü okuyun.
97
99
98
100
</LearnMore>
99
101
100
-
## Efektler ile Senkronize Etme {/*synchronizing-with-effects*/}
102
+
## Efektler ile senkronize etme {/*synchronizing-with-effects*/}
103
+
101
104
102
-
Bazı bileşenler harici sistemler ile senkronize olmalıdır. Örneğin, React state'ine göre React olmayan bir bileşeni kontrol etmek, bir sunucu bağlantısı kurmak veya bir bileşen ekranda göründüğünde analiz bilgisi göndermek isteyebilirsiniz. *Efektler*, bileşeninizi bazı React dışı sistemler ile senkronize etmenizi sağlamak için bazı kodları render işleminden sonra çalıştırır. Efektleri, bileşenlerinizi React dışındaki sistemlerle senkronize etmek için kullanın.
105
+
Bazı bileşenlerin dış sistemler ile senkronize olmazı gerekmektedir. Örneğin, bir sunucu bağlantısı kurmak için veya bir bileşen ekranda gözüktüğünde analitik logu göndermek için bir React-dışı bileşeni React state'ine göre kontrol etmek isteyebilirsiniz. *Efektler*, belirli olayları ele almanızı sağlayan olay yöneticilerinin aksine, sizin render'dan sonra bazı kodları çalıştırmanızı sağlar. Bileşeninizi React dışı bir sistem ile senkronize etmek için efektleri kullanın.
103
106
104
-
Birkaç kez Oynat/Duraklat düğmesine basın ve video oynatıcısının`isPlaying` prop değeriyle nasıl senkronize kaldığını görün:
107
+
Başlat/Durdur butonuna birkaç kez basın ve video oynatıcının`isPlaying` prop değerine senkronize kaldığını görün:
105
108
106
109
<Sandpack>
107
110
@@ -127,7 +130,7 @@ export default function App() {
0 commit comments