Skip to content

Translate concurrent mode adoption #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 4, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 55 additions & 56 deletions content/docs/concurrent-mode-adoption.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: concurrent-mode-adoption
title: Adopting Concurrent Mode (Experimental)
title: Eşzamanlı Mod'u Benimsemek (Deneysel)
permalink: docs/concurrent-mode-adoption.html
prev: concurrent-mode-patterns.html
next: concurrent-mode-reference.html
Expand All @@ -15,98 +15,97 @@ next: concurrent-mode-reference.html

<div class="scary">

>Caution:
>Dikkat:
>
>This page describes **experimental features that are not yet available in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.
>Bu sayfa, **henüz stabil sürümde yer almayan deneysel özellikleri** anlatmaktadır. Canlı ortamda React'in deneysel versiyonlarına güvenmeyin. Bu özellikler, React'in bir parçası olmadan önce büyük oranda ve haber verilmeden değişikliğe uğrayabilir.
>
>This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now.
>Bu dokümantasyonla erken adaptasyon yapanlar ve meraklı insanlar hedeflenmektedir. **Eğer React'te yeniyseniz, bu özellikleri önemsemeyin** -- bunları şu an öğrenmenize gerek yok.

</div>

- [Installation](#installation)
- [Who Is This Experimental Release For?](#who-is-this-experimental-release-for)
- [Enabling Concurrent Mode](#enabling-concurrent-mode)
- [What to Expect](#what-to-expect)
- [Migration Step: Blocking Mode](#migration-step-blocking-mode)
- [Why So Many Modes?](#why-so-many-modes)
- [Feature Comparison](#feature-comparison)
- [Yükleme](#installation)
- [Bu Deneysel Sürüm Kimin İçin?](#who-is-this-experimental-release-for)
- [Eşzamanlı Modu Etkinleştirmek](#enabling-concurrent-mode)
- [Beklenmesi Gerekenler](#what-to-expect)
- [Geçiş Adımı: Engelleme Modu](#migration-step-blocking-mode)
- [Neden Bu Kadar Çok Mod Var?](#why-so-many-modes)
- [Özellik Karşılaştırması](#feature-comparison)

## Installation {#installation}
## Yükleme {#installation}

Concurrent Mode is only available in the [experimental builds](/blog/2019/10/22/react-release-channels.html#experimental-channel) of React. To install them, run:
Eşzamanlı mod sadece React'in [deneysel versiyonlarında](/blog/2019/10/22/react-release-channels.html#experimental-channel) bulunmaktadır. Onları yüklemek için, şu komutu çalıştırın:

```
npm install react@experimental react-dom@experimental
```
**Deneysel versiyonlar için mantıksal versiyonlamanın garantisi yoktur.** Herhangi bir `@experimental` sürümde API'lar eklenebilir, değişebilir veya kaldırılabilir.

**There are no semantic versioning guarantees for the experimental builds.**
APIs may be added, changed, or removed with any `@experimental` release.
**Deneysel versiyonlar sıkça bozucu değişimler içerirler.**

**Experimental releases will have frequent breaking changes.**
Bu sürümleri kişisel projelerinizde veya bir branch üzerinde deneyebilirsiniz, ancak canlıda kullanılmasını tavsiye etmeyiz. Biz Facebook'ta onları canlıda *kullanıyoruz*, ama bunun nedeni eğer bir şey bozulursa bugları düzeltmek için bizim varolmamız. Sizi uyardık!

You can try these builds on personal projects or in a branch, but we don't recommend running them in production. At Facebook, we *do* run them in production, but that's because we're also there to fix bugs when something breaks. You've been warned!
### Bu Deneysel Sürüm Kimin İçin? {#who-is-this-experimental-release-for}

### Who Is This Experimental Release For? {#who-is-this-experimental-release-for}
Bu sürüm öncelikli olarak erken benimseyenler, kütüphane sahipleri ve meraklı insanlar içindir.

This release is primarily aimed at early adopters, library authors, and curious people.
Biz bu kodu canlıda kullanıyoruz (ve işimizi görüyor) ancak hala kimi buglar, eksik özellikler ve dokümantasyonda boşluklar var. Gelecekte yayınlanacak olan kararlı sürüme daha iyi hazırlanabilmek için eşzamanlı modda nelerin çalışmadığı konusunda bilgiye toplamak istiyoruz.

We're using this code in production (and it works for us) but there are still some bugs, missing features, and gaps in the documentation. We'd like to hear more about what breaks in Concurrent Mode so we can better prepare it for an official stable release in the future.
### Eşzamanlı Modu Etkinleştirmek {#enabling-concurrent-mode}

### Enabling Concurrent Mode {#enabling-concurrent-mode}
Normalde React'e bir özellik eklediğimizde onu hemen kullanmaya başlayabilirsiniz. Fragment, Context ve hatta Hooks böyle özelliklere bir örnek. Bunları eski kodda herhangi bir değişiklik yapmadan yeni kodda kulanabilirsiniz.

Normally, when we add features to React, you can start using them immediately. Fragments, Context, and even Hooks are examples of such features. You can use them in new code without making any changes to the existing code.
Eşzamanlı mod ise farklı. React'in nasıl çalıştığı konusunda mantıksal değişiklikler ekliyor. Aksi takdirde onun etkinleştirdiği [yeni özellikler](/docs/concurrent-mode-patterns.html) *mümkün olamazdı*. Bu yüzden izole bir şekilde teker teker yayınlanmak yerine yeni bir "mod" altında gruplandırıldılar.

Concurrent Mode is different. It introduces semantic changes to how React works. Otherwise, the [new features](/docs/concurrent-mode-patterns.html) enabled by it *wouldn't be possible*. This is why they're grouped into a new "mode" rather than released one by one in isolation.
Eşzamanlı modu sadece belli alt ağaçlarda kullanamazsınız. Onun yerine bugün `ReactDOM.render()` metodunu çağırdığınız yerde kullanmanız gerekiyor.

You can't opt into Concurrent Mode on a per-subtree basis. Instead, to opt in, you have to do it in the place where today you call `ReactDOM.render()`.

**This will enable Concurrent Mode for the whole `<App />` tree:**
**Bu tüm `<App />` ağacı için eşzamanlı modu etkinleştirir:**

```js
import ReactDOM from 'react-dom';

// If you previously had:
// Eğer eskiden
//
// ReactDOM.render(<App />, document.getElementById('root'));
//
// You can opt into Concurrent Mode by writing:
// kullanıyorduysanız, eşzamanlı modu şunu yazarak etkinleştirebilirsiniz:

ReactDOM.createRoot(
document.getElementById('root')
).render(<App />);
```

>Note:
>Not:
>
>Concurrent Mode APIs such as `createRoot` only exist in the experimental builds of React.
>`createRoot` gibi eşzamanlı mod APIları React'in sadece deneysel versiyonlarında bulunmaktadır.

In Concurrent Mode, the lifecycle methods [previously marked](/blog/2018/03/27/update-on-async-rendering.html) as "unsafe" actually *are* unsafe, and lead to bugs even more than in today's React. We don't recommend trying Concurrent Mode until your app is [Strict Mode](/docs/strict-mode.html)-compatible.
Eşzamanlı modda [daha önce](/blog/2018/03/27/update-on-async-rendering.html) "güvensiz" olarak işaretlenmiş yaşam döngüsü metotları bu sefer gerçekten *güvensizdir* ve bugünkü React'ten dahi daha çok hataya sebep olurlar. Uygulamanızın [Strict Mode](/docs/strict-mode.html) desteği olana dek eşzamanlı modu kullanmanızı önermiyoruz.

## What to Expect {#what-to-expect}
## Beklenmesi Gerekenler {#what-to-expect}

If you have a large existing app, or if your app depends on a lot of third-party packages, please don't expect that you can use the Concurrent Mode immediately. **For example, at Facebook we are using Concurrent Mode for the new website, but we're not planning to enable it on the old website.** This is because our old website still uses unsafe lifecycle methods in the product code, incompatible third-party libraries, and patterns that don't work well with the Concurrent Mode.
Eğer büyük bir uygulamanız varsa veya uygulamanızın çok fazla üçüncü parti paketlere bağımlılığı varsa, lütfen eşzamanlı modu anında kullanabileceğiziniz düşünmeyin. **Örneğin biz Facebook'ta eşzamanlı modu yeni sitede kullanıyoruz ama eski sitede kullanmayı planlamıyoruz.** Bunun nedeni, eski sitemizin hala güvensiz yaşam döngüsü metotlarını, uyumsuz üçüncü parti kütüphanelerini ve eşzamanlı modla çok iyi çalışmayan desenleri canlı kodda kullanıyor olması.

In our experience, code that uses idiomatic React patterns and doesn't rely on external state management solutions is the easiest to get running in the Concurrent Mode. We will describe common problems we've seen and the solutions to them separately in the coming weeks.
Bizim tecrübemiz, deyimsel React desenlerini kullanan ve harici state yönetimi çözümlerine bel bağlamayan kodun eşzamanlı modu çalıştırmada en kolay olduğu yönünde. Gördüğümüz ortak sorunları ve onların çözümlerini önümüzdeki haftalarda ayrıca anlatacağız.

### Migration Step: Blocking Mode {#migration-step-blocking-mode}
### Geçiş Adımı: Engelleme Modu {#migration-step-blocking-mode}

For older codebases, Concurrent Mode might be a step too far. This is why we also provide a new "Blocking Mode" in the experimental React builds. You can try it by substituting `createRoot` with `createBlockingRoot`. It only offers a *small subset* of the Concurrent Mode features, but it is closer to how React works today and can serve as a migration step.
Eski kodlar için eşzamanlı mod biraz ileri gidiyor olabilir. Bu yüzden de deneysel React versiyonunda yeni "engelleme modu"nu sunuyoruz. `createRoot` yerine `createBlockingRoot` deneyebilirsiniz. Bu, eşzamanlı mod özelliklerinin sadece *küçük bir kısmını* sunar, ama React'in bugünkü çalışmasına yakındır ve bir geçiş adımı olarak kullanılabilir.

To recap:
Toplamak gerekirse:

* **Legacy Mode:** `ReactDOM.render(<App />, rootNode)`. This is what React apps use today. There are no plans to remove the legacy mode in the observable future — but it won't be able to support these new features.
* **Blocking Mode:** `ReactDOM.createBlockingRoot(rootNode).render(<App />)`. It is currently experimental. It is intended as a first migration step for apps that want to get a subset of Concurrent Mode features.
* **Concurrent Mode:** `ReactDOM.createRoot(rootNode).render(<App />)`. It is currently experimental. In the future, after it stabilizes, we intend to make it the default React mode. This mode enables *all* the new features.
* **Miras modu:** `ReactDOM.render(<App />, rootNode)`. Bu, React uygulamalarının bugün kullandığı moddur. Gözlemlenebilir gelecekte miras modunu kaldırma planı yok - ama bu yeni özellikler de bu modla kullanılamayacak.
* **Engelleme Modu:** `ReactDOM.createBlockingRoot(rootNode).render(<App />)`. Bu, şu anda deneysel. Eşzamanlı modun özelliklerinin bir alt kümesini kullanmak isteyen uygulamalar için bir geçiş adımı olarak düşünüldü.
* **Eşzamanlı mod:** `ReactDOM.createRoot(rootNode).render(<App />)`.
Bu, şu anda deneysel. Gelecekte, kararlılığa ulaştıktan sonra onu öntanımlı React modu yapmayı istiyoruz. Bu, yeni özelliklerin *tamamını* etkinleştiriyor.

### Why So Many Modes? {#why-so-many-modes}
### Neden Bu Kadar Çok Mod Var? {#why-so-many-modes}

We think it is better to offer a [gradual migration strategy](/docs/faq-versioning.html#commitment-to-stability) than to make huge breaking changes — or to let React stagnate into irrelevance.
Biz, çok büyük ve bozucu değişiklikler yapmak yerine [kademeli geçiş stratejisi](/docs/faq-versioning.html#commitment-to-stability) sunmanın - veya React'in gereksizliğe doğru durulmasının - daha iyi olduğunu düşünüyoruz.

In practice, we expect that most apps using Legacy Mode today should be able to migrate at least to the Blocking Mode (if not Concurrent Mode). This fragmentation can be annoying for libraries that aim to support all Modes in the short term. However, gradually moving the ecosystem away from the Legacy Mode will also *solve* problems that affect major libraries in the React ecosystem, such as [confusing Suspense behavior when reading layout](https://github.com/facebook/react/issues/14536) and [lack of consistent batching guarantees](https://github.com/facebook/react/issues/15080). There's a number of bugs that can't be fixed in Legacy Mode without changing semantics, but don't exist in Blocking and Concurrent Modes.
Pratikte miras modunu kullanan uygulamaların çoğunun en azından engelleme moduna (hatta eşzamanlı moda) geçişi mümkün olmalı. Bu parçalanma, tüm modları desteklemeyi hedefleyen kütüphaneler için kısa vadede can sıkıcı olabilir. Ancak, ekosistemi miras modundan kademeli olarak uzaklaşmak aynı zamanda React ekosistemindeki büyük kütüphaneleri etkileyen [layoutu okurken kafa karıştıran Suspense davranışı](https://github.com/facebook/react/issues/14536) ve [tutarlı harmanlama garantisinin olmayışı](https://github.com/facebook/react/issues/15080) gibi sorunları da *çözecektir*. Miras modunda bulunan kimi hatalar mantıksal değişiklikler yapılmadan çözülemiyor ama engelleme modunda ve eşzamanlı modda bulunmuyor.

You can think of the Blocking Mode as a "gracefully degraded" version of the Concurrent Mode. **As a result, in longer term we should be able to converge and stop thinking about different Modes altogether.** But for now, Modes are an important migration strategy. They let everyone decide when a migration is worth it, and upgrade at their own pace.
Engelleme modunu, eşzamanlı modun "zarifçe indirgenmiş" bir versiyonu olarak düşünebilirsiniz. **Sonuç olarak, uzun vadede birleştirebileceğiz ve farklı modları düşünmeyi komple bırakabileceğız.** Ama şimdilik modlar önemli bir geçiş stratejisi. Geçiş yapmaya değip değmeyeceğine herkesin kendinin karar vermesine ve kendi hızlarıyla yükseltmelerine izin veriyorlar.

### Feature Comparison {#feature-comparison}
### Özellik Karşılaştırması {#feature-comparison}

<style>
#feature-table table { border-collapse: collapse; }
Expand All @@ -116,26 +115,26 @@ You can think of the Blocking Mode as a "gracefully degraded" version of the Con

<div id="feature-table">

| |Legacy Mode |Blocking Mode |Concurrent Mode |
| |Miras modu |Engelleme modu |Eşzamanlı mod |
|--- |--- |--- |--- |
|[String Refs](/docs/refs-and-the-dom.html#legacy-api-string-refs) |✅ |🚫** |🚫** |
|[Legacy Context](/docs/legacy-context.html) |✅ |🚫** |🚫** |
|[String referansları](/docs/refs-and-the-dom.html#legacy-api-string-refs) |✅ |🚫** |🚫** |
|[Miras Contexti](/docs/legacy-context.html) |✅ |🚫** |🚫** |
|[findDOMNode](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) |✅ |🚫** |🚫** |
|[Suspense](/docs/concurrent-mode-suspense.html#what-is-suspense-exactly) |✅ |✅ |✅ |
|[SuspenseList](/docs/concurrent-mode-patterns.html#suspenselist) |🚫 |✅ |✅ |
|Suspense SSR + Hydration |🚫 |✅ |✅ |
|Progressive Hydration |🚫 |✅ |✅ |
|Selective Hydration |🚫 |🚫 |✅ |
|Cooperative Multitasking |🚫 |🚫 |✅ |
|Automatic batching of multiple setStates    |🚫* |✅ |✅ |
|[Priority-based Rendering](/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state) |🚫 |🚫 |✅ |
|[Interruptible Prerendering](/docs/concurrent-mode-intro.html#interruptible-rendering) |🚫 |🚫 |✅ |
|Kademeli Hydration |🚫 |✅ |✅ |
|Seçili Hydration |🚫 |🚫 |✅ |
|İşbirlikli Çoklugörev |🚫 |🚫 |✅ |
|Çoklu setStates'in otomatik olarak gruplanması    |🚫* |✅ |✅ |
|[Öncelik tabanlı Rendering](/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state) |🚫 |🚫 |✅ |
|[Bölünebilir Prerendering](/docs/concurrent-mode-intro.html#interruptible-rendering) |🚫 |🚫 |✅ |
|[useTransition](/docs/concurrent-mode-patterns.html#transitions) |🚫 |🚫 |✅ |
|[useDeferredValue](/docs/concurrent-mode-patterns.html#deferring-a-value) |🚫 |🚫 |✅ |
|[Suspense Reveal "Train"](/docs/concurrent-mode-patterns.html#suspense-reveal-train) |🚫 |🚫 |✅ |

</div>

\*: Legacy mode has automatic batching in React-managed events but it's limited to one browser task. Non-React events must opt-in using `unstable_batchedUpdates`. In Blocking Mode and Concurrent Mode, all `setState`s are batched by default.
\*: Miras modunun React tarafından yönetilen olaylarda otomatik kümelemesi var ama sadece tek tarayıcı göreviyle sınırlı. React dışı olaylar `unstable_batchedUpdates` kullanarak katılmak zorunda. Engelleme modunda ve eşzamanlı modda tüm `setState`ler öntanımlı olarak kümeleniyor.

\*\*: Warns in development.
\*\*: Geliştirmede uyarı verir.