Skip to content

Commit e1e7159

Browse files
committed
revert: escape hatches updates
1 parent 5b9f893 commit e1e7159

File tree

1 file changed

+23
-26
lines changed

1 file changed

+23
-26
lines changed

src/content/learn/escape-hatches.md

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,32 @@ title: Kaçış Yolları
44

55
<Intro>
66

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.
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.
88

99
</Intro>
1010

1111
<YouWillLearn isChapter={true}>
1212

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)
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)
2121

2222
</YouWillLearn>
2323

24-
## Ref'ler ile değerleri referans etmek {/*referencing-values-with-refs*/}
24+
## Ref ile Değerlere Referans Verme {/*referencing-values-with-refs*/}
2525

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:
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:
2727

2828
```js
2929
const ref = useRef(0);
3030
```
3131

32-
State gibi, 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.
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.
3333

3434
<Sandpack>
3535

@@ -41,32 +41,30 @@ export default function Counter() {
4141

4242
function handleClick() {
4343
ref.current = ref.current + 1;
44-
alert(ref.current + ' kez tıkladınız!');
44+
alert(ref.current + ' defa tıkladınız!');
4545
}
4646

4747
return (
4848
<button onClick={handleClick}>
49-
Bana tıkla!
49+
Tıkla!
5050
</button>
5151
);
5252
}
5353
```
5454

5555
</Sandpack>
5656

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.
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.
5858

5959
<LearnMore path="/learn/referencing-values-with-refs">
6060

6161
**[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.
6262

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-
6563
</LearnMore>
6664

67-
## DOM'u ref'ler ile manipüle etmek {/*manipulating-the-dom-with-refs*/}
65+
## Ref'ler ile DOM Manipülasyonu {/*manipulating-the-dom-with-refs*/}
6866

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:
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:
7068

7169
<Sandpack>
7270

@@ -84,7 +82,7 @@ export default function Form() {
8482
<>
8583
<input ref={inputRef} />
8684
<button onClick={handleClick}>
87-
Girdiye odaklan
85+
İnput alanına odaklan
8886
</button>
8987
</>
9088
);
@@ -95,16 +93,15 @@ export default function Form() {
9593

9694
<LearnMore path="/learn/manipulating-the-dom-with-refs">
9795

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.
96+
**[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.
9997

10098
</LearnMore>
10199

102-
## Efektler ile senkronize etme {/*synchronizing-with-effects*/}
103-
100+
## Efektler ile Senkronize Etme {/*synchronizing-with-effects*/}
104101

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.
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.
106103

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:
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:
108105

109106
<Sandpack>
110107

@@ -130,7 +127,7 @@ export default function App() {
130127
return (
131128
<>
132129
<button onClick={() => setIsPlaying(!isPlaying)}>
133-
{isPlaying ? 'Durdur' : 'Başlat'}
130+
{isPlaying ? 'Duraklat' : 'Oynat'}
134131
</button>
135132
<VideoPlayer
136133
isPlaying={isPlaying}

0 commit comments

Comments
 (0)