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
`StrictMode` is a tool for highlighting potential problems in an application. Like `Fragment`, `StrictMode` does not render any visible UI. It activates additional checks and warnings for its descendants.
7
+
`Strict Modu` (StrictMode) uygulamadaki potansiyel sorunları vurgulayan bir araçtır. `Fragment` gibi `Strict Modu` de herhangi bir görünür UI render etmez. `Strict Modu` aynı zamanda alt öğeler için ek kontrol ve uyarıları etkinleştirir.
8
8
9
-
> Note:
9
+
> Not:
10
10
>
11
-
> Strict mode checks are run in development mode only; _they do not impact the production build_.
11
+
> Strict Modu kontrolleri sadece geliştirme modunda yapılır.; _canlıda herhangi bir etkisi yoktur_.
12
12
13
-
You can enable strict mode for any part of your application. For example:
13
+
Strict Modunu uygulamanızın herhangi bir parçası için aktif hale getirebilirsiniz. Örneğin:
14
14
`embed:strict-mode/enabling-strict-mode.js`
15
15
16
-
In the above example, strict mode checks will *not* be run against the `Header`and`Footer`components. However,`ComponentOne`and`ComponentTwo`, as well as all of their descendants, will have the checks.
16
+
Yukarıdaki örnekte strict mod kontrolleri `Header`ve`Footer`bileşenleri için *yapılmayacaktır*. Ancak`ComponentOne`ve`ComponentTwo` ve onların tüm alt öğeleri için kontroller yapılacaktır.
17
17
18
-
`StrictMode` currently helps with:
19
-
*[Identifying components with unsafe lifecycles](#identifying-unsafe-lifecycles)
20
-
*[Warning about legacy string ref API usage](#warning-about-legacy-string-ref-api-usage)
21
-
*[Warning about deprecated findDOMNode usage](#warning-about-deprecated-finddomnode-usage)
22
-
*[Detecting unexpected side effects](#detecting-unexpected-side-effects)
### Güvenli olmayan yaşam döngülerine sahip bileşenleri tespit etme {#identifying-unsafe-lifecycles}
28
28
29
-
As explained [in this blog post](/blog/2018/03/27/update-on-async-rendering.html), certain legacy lifecycle methods are unsafe for use in async React applications. However, if your application uses third party libraries, it can be difficult to ensure that these lifecycles aren't being used. Fortunately, strict mode can help with this!
29
+
[Bu blog yazısında](/blog/2018/03/27/update-on-async-rendering.html) açıklandığı gibi, bazı eski yaşam döngüsü metodlarını asenkron React uygulamalarında kullanmak güvenli değildir. Ancak uygulamanız üçüncü parti kütüphaneler kullanıyorsa bu yaşam döngüsü metodlarının kullanılmadığından emin olmak oldukça zordur. Neyse ki, Strict Modu bize bu konuda yardımcı olabilir!
30
30
31
-
When strict mode is enabled, React compiles a list of all class components using the unsafe lifecycles, and logs a warning message with information about these components, like so:
31
+
Strict modu etkinleştirildiğinde, React güvenli olmayan yaşam döngüsü kullanan sınıf bileşenlerinin bir listesini toplar ve bu bileşenler hakkında aşağıdaki gibi bir uyarı verir.
Addressing the issues identified by strict mode _now_ will make it easier for you to take advantage of concurrent rendering in future releases of React.
35
+
Strict modu sorunlarına çözüm bulmak, gelecekte React sürümlerinde eşzamanlı render etme işleminden yararlanmanızı kolaylaştıracaktır.
36
36
37
-
### Warning about legacy string ref API usage {#warning-about-legacy-string-ref-api-usage}
37
+
### Eski string ref API kullanımı hakkında uyarma {#warning-about-legacy-string-ref-api-usage}
38
38
39
-
Previously, React provided two ways for managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had [several downsides](https://github.com/facebook/react/issues/1373)and so our official recommendation was to [use the callback form instead](/docs/refs-and-the-dom.html#legacy-api-string-refs).
39
+
React, daha önce ref'leri yönetmek için iki yol sunuyordu: Eski string ref API ve callback API. String Ref API daha uygun olmasına rağmen [birkaç dezavantajı](https://github.com/facebook/react/issues/1373)vardı ve resmi önerimiz [bunun yerine callback kullanmaktı](/docs/refs-and-the-dom.html#legacy-api-string-refs).
40
40
41
-
React 16.3 added a third option that offers the convenience of a string ref without any of the downsides:
41
+
React 16.3, herhangi bir dezavantajı olmadan string ref'in rahatlığını sunan üçüncü bir seçenek getirdi:
Since object refs were largely added as a replacement for string refs, strict mode now warns about usage of string refs.
44
+
Nesne ref'leri büyük ölçüde string ref'lerinin yerine geldiğinden beri strict modu artık string ref kullanımları konusunda uyarıyor.
45
45
46
-
> **Note:**
46
+
> **Not:**
47
47
>
48
-
> Callback refs will continue to be supported in addition to the new `createRef` API.
48
+
> Yeni `createRef` API'sine ek olarak Callback ref'leri de desteklenmeye devam edecektir.
49
49
>
50
-
> You don't need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature.
50
+
> Bileşenlerinizdeki callback ref'leri değiştirmeniz gerekmez. Biraz daha esnek bir yapıda oldukları için gelişmiş bir özellik olarak kalacaklar.
51
51
52
-
[Learn more about the new `createRef` API here.](/docs/refs-and-the-dom.html)
52
+
[Yeni `createRef` API hakkında daha fazla bilgiyi buradan öğrenebilirsiniz.](/docs/refs-and-the-dom.html)
53
53
54
-
### Warning about deprecated findDOMNode usage {#warning-about-deprecated-finddomnode-usage}
54
+
### Kullanımdan kaldırılmış findDOMNode kullanımı hakkında uyarma {#warning-about-deprecated-finddomnode-usage}
55
55
56
-
React used to support `findDOMNode` to search the tree for a DOM node given a class instance. Normally you don't need this because you can [attach a ref directly to a DOM node](/docs/refs-and-the-dom.html#creating-refs).
56
+
React, sınıf nesne örneği verilen bir DOM düğümünü ağaçta aramak için `findDOMNode`'u destekliyordu. Normalde buna ihtiyaç yoktur çünkü [doğrudan bir DOM düğümüne ref ekleyebilirsiniz](/docs/refs-and-the-dom.html#creating-refs).
57
57
58
-
`findDOMNode`can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children was rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode`only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode`is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode`only worked if components always return a single DOM node that never changes.
58
+
`findDOMNode`ayrıca sınıf bileşenlerinde de kullanılabilir ancak bu, bir üst öğenin belirli alt öğelerin render edilmesine izin vererek soyutlama düzeylerini bozuyordu. Bir üst öğe DOM düğümüne erişebileceği için bir bileşenin uygulama ayrıntılarını değiştiremeyeceğiniz bir kodun yeniden düzenlenmesi (refactoring) tehlikesi oluşturur. `findDOMNode`sadece ilk alt öğeyi döndürür fakat Fragment'ler kullanılarak bir bileşenin birden fazla alt öğe render etmesi mümkündür. `findDOMNode`tek seferlik okuma API'sidir. Sadece istendiğinde cevap verir. Bir alt bileşen farklı bir farklı bir düğüm render ediyorsa, bu değişikliği ele almanın bir yolu yoktur. Bu nedenle `findDOMNode`sadece bileşenler asla değişmeyen tek bir DOM düğümü döndürürse işe yarar.
59
59
60
-
You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
60
+
Bunun yerine, bunu özel bileşeninize bir ref geçerek ve [ref yönlendirme](/docs/forwarding-refs.html#forwarding-refs-to-dom-components) ile DOM boyunca ileterek yapabilirsiniz.
61
61
62
-
You can also add a wrapper DOM node in your component and attach a ref directly to it.
62
+
Ayrıca bileşeninize bir sarıcı (wrapper) DOM düğümü ekleyebilir ve doğrudan ona bir ref ekleyebilirsiniz.
63
63
64
64
```javascript{4,7}
65
65
class MyComponent extends React.Component {
@@ -73,53 +73,53 @@ class MyComponent extends React.Component {
73
73
}
74
74
```
75
75
76
-
> Note:
76
+
> Not:
77
77
>
78
-
> In CSS, the [`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents)attribute can be used if you don't want the node to be part of the layout.
78
+
> CSS'te, düğümün tasarımın bir parçası olmasını istemiyorsanız [`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents)özelliğini kullanabilirsiniz.
79
79
80
-
### Detecting unexpected side effects {#detecting-unexpected-side-effects}
80
+
### Beklenmeyen yan etkileri tespit etme {#detecting-unexpected-side-effects}
81
81
82
-
Conceptually, React does work in two phases:
83
-
*The **render**phase determines what changes need to be made to e.g. the DOM. During this phase, React calls `render` and then compares the result to the previous render.
84
-
*The **commit**phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like `componentDidMount`and`componentDidUpdate`during this phase.
82
+
Kavramsal olarak, React iki aşamada çalışır:
83
+
***Render**aşaması, örneğin DOM'da hangi değişikliklerin yapılması gerektiğini belirler. Bu aşamada React, render'ı çağırır ve sonucu bir önceki render çağrısının sonucuyla karşılaştırır.
84
+
***Commit**aşaması, React'ın değişiklikleri uyguladığı aşamadır. React DOM durumunda, React bu DOM düğümlerini ekler, günceller ve kaldırır. React ayrıca bu aşamada `componentDidMount`ve`componentDidUpdate`gibi yaşam döngülerini çağırır.
85
85
86
-
The commit phase is usually very fast, but rendering can be slow. For this reason, the upcoming concurrent mode (which is not enabled by default yet) breaks the rendering work into pieces, pausing and resuming the work to avoid blocking the browser. This means that React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption).
86
+
Commit aşaması genellikle hızlıdır fakat render aşaması yavaş olabilir. Bu nedenle, yakında gelecek eşzamanlı (concurrent) mod (henüz varsayılan olarak etkin değil) render etme işini parçalara ayırır, tarayıcıyı engellememek için işi duraklatır ve devam ettirir. Bu, React'ın render aşaması yaşam döngülerini commit aşamasına hiç geçmeden (bir hata veya daha yüksek öncelikli kesinti nedeniyle) çağırabileceği ya da commit aşamasından önce bir kereden fazla çağırabileceği anlamına gelir.
87
87
88
-
Render phase lifecycles include the following class component methods:
88
+
Render aşaması yaşam döngüleri aşağıdaki sınıf bileşeni metodlarını içerir:
Because the above methods might be called more than once, it's important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. Unfortunately, it can be difficult to detect these problems as they can often be [non-deterministic](https://en.wikipedia.org/wiki/Deterministic_algorithm).
98
+
Yukarıdaki metodlar bir kereden fazla çağrılabileceğinden, yan etkiler içermemesi önemlidir. Bu kuralı göz ardı etmek, bellek sızıntıları (memory leak) ve geçersiz uygulama durumu (invalid application state) gibi çeşitli sorunlara yol açabilir. Ne yazık ki bu sorunları tespit etmek zor olabilir çünkü genellikle [belirlenebilir olmayabilirler](https://en.wikipedia.org/wiki/Deterministic_algorithm).
99
99
100
-
Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
100
+
Strict modu, yan etkileri otomatik olarak tespit edemez ancak onları daha belirgin hale getirerek tespit etmenize yardımcı olabilir. Bu, aşağıdaki fonksiyonları bilinçli bir şekilde iki kere çağırarak (double-invoking) yapılır:
At first glance, this code might not seem problematic. But if `SharedApplicationState.recordEvent`is not [idempotent](https://en.wikipedia.org/wiki/Idempotence#Computer_science_meaning), then instantiating this component multiple times could lead to invalid application state. This sort of subtle bug might not manifest during development, or it might do so inconsistently and so be overlooked.
115
+
İlk bakışta bu kod sorunlu görünmeyebilir. Ancak `SharedApplicationState.recordEvent`[etkisiz](https://en.wikipedia.org/wiki/Idempotence#Computer_science_meaning) değilse, bu bileşeni birden çok kez başlatmak geçersiz uygulama durumuna yol açabilir. Bu tür ince bir hata geliştirme sırasında ortaya çıkmayabilir veya bunu tutarsız bir şekilde yaparak gözden kaçabilir.
116
116
117
-
By intentionally double-invoking methods like the component constructor, strict mode makes patterns like this easier to spot.
117
+
Strict modu, `constructor` gibi metodları kasıtlı olarak iki kere çağırarak, bu gibi desenlerin fark edilmesini sağlar.
118
118
119
-
### Detecting legacy context API {#detecting-legacy-context-api}
119
+
### Eski context API tespit etme {#detecting-legacy-context-api}
120
120
121
-
The legacy context API is error-prone, and will be removed in a future major version. It still works for all 16.x releases but will show this warning message in strict mode:
121
+
Eski context API hataya açıktır ve gelecekteki bir ana sürümde kaldırılacaktır. Hala tüm 16.x sürümleri için çalışır, ancak strict modunda şu uyarı mesajını gösterecektir:
0 commit comments