React 18 Alfa Versiyonu Yayınlandı. Yenilikler Neler?

React Core Team, yakın zamanda React18'in alfa sürümünü yayınladı. Bu sürüm, daha çok Kullanıcı Deneyimi ve eşzamanlı özelliklere uyarlama dahil olmak üzere iç mimari değişikliklerine odaklanmıştır.

Reactjs 18 Alfa versiyonunu aşağıdakini kullanarak hemen kurabiliriz:

npm install react@alpha react-dom@alpha

Yenilikler Neler?

1. Yeni Kök API

Genellikle onunki gibi bir Kök seviyesi DOM seviyesi oluşturur ve React Uygulamasını ekleriz. Bu artık kullanımdan kaldırıldı ve artık "Eski Kök API" olarak adlandırılıyor

import React from 'react';
import ReactDOM from 'react-dom';

const container = document.getElementById('root') 

ReactDOM.render(<App />, container);

Bunun yerine, Root API, React18'de şuna benzeyen yeni bir şey tanıtıldı:

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'

const container = document.getEleementById('root')

const root = ReactDOM.createRoot(container)

root.render(<App />)

React18 , React 17 (veya daha eski) uygulamalarının React 18'e sorunsuz geçişini sağlamak için hem Legacy Root APIve hem de ile birlikte New Root API gönderilir.

Eski Kök API Üzerinden Yeni Kök API Kullanma

a.) İsteğe bağlı bir boole değerini doğrudan köke aktarabildiğimiz için hidrat işlevini kullanmak kolaydır.

Eski Kök API :

import ReactDOM from 'react-dom'
import App from 'App'

const container = document.getElementById('app');


ReactDOM.hydrate(<App />, container)

Yeni Kök API'si:

import ReactDOM from ‘react-dom’;
import App from 'App';

const container = document.getElementById('root');


const root = ReactDOM.createRoot(container, { hydrate: true });

root.render(<App />);

Hidrasyon hakkında daha fazla bilgiyi (https://stackoverflow.com/questions/46516395/whats-the-difference-between-hydrate-and-render-in-react-16) okuyun

b.) Render callback'teki iyileştirmeler

Legacy Root API'de bir render geri çağırma işlevi iletebiliriz. Bu, kök bileşen takıldıktan sonra işleyen/çalışan anonim bir işlevdir.

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'

const container = document.getElementById('root')

ReactDOM.render(<App />, container, function(){
    console.log('render only after initial component rendering')
})

console.log('render at very last')

Bu yaklaşım Yeni Kök API'de değiştirildi, geri aramalar kullanmak yerine React Team, requestIdleCallback hatta yerel kullanmayı önerir.

2. startTransition API

Bu, bu sürümle birlikte sunulan yeni bir API'dir ve mevcut web sayfasının yanıt vermeye devam etmesine ve aynı anda ağır, engelleyici olmayan UI güncellemeleri yapabilmesine yardımcı olur.

Bunun için önemli bir kullanım durumu startTransition, bir kullanıcının bir arama kutusuna yazmaya başlaması olabilir. Arama sonuçları birkaç milisaniye bekleyebilirken (kullanıcı tarafından beklendiği gibi) giriş değeri hemen güncellenmelidir.

Bu API, hızlı güncellemeler ile gecikmeli güncellemeler arasında ayrım yapmanın bir yolunu sağlar.
Gecikmeli güncelleme (yani bir UI görünümünün diğerine geçişi), Geçiş Güncellemeleri olarak adlandırılır.

Yazma, fareyle üzerine gelme, tıklama gibi acil güncellemeler için sahne/işlevleri genellikle şöyle çağırırız:

setText(input)

Acil olmayan veya yoğun kullanıcı arayüzü güncellemeleri için bunu bir startTransitionAPI'ye şu şekilde sarabiliriz :

startTransition(() => {
  setText(input);
});

3. Strict Effects'e Strict Mode geliyor

React18, şimdi <StrictMode />ile birlikte gönderilecek Strict Effects. Tıpkı Strict Mode, bu geliştirme yapıları ve geliştirilmiş DX için olacaktır.

Bir bileşen Strict Effects'e sarıldığında, React, genellikle useEffectmontaj ve temizleme işlevleriyle çalışırken sorun yaratan olağandışı davranış/kalıpları tespit etmek için yan etkileri "kasıtlı olarak" iki kez çalıştırdığınızdan emin olur .

Etkileri iki kez çalıştırma,
mount -> unmount -> mount gibi birşey.

4. SSR İyileştirmeleri

Sunucu tarafı oluşturma, ilk yükleme ekranı süresinde iyileştirmeler de dahil olmak üzere bu sürümde mimari bir revizyon alıyor.
Eski versiyonda (17 tepki verecek), SSR sayfayı oluşturmaya başlamadan önce tüm sayfayı yüklemek zorunda kalıyordu.

Bu olay React 18'de değişti, şimdi React bileşenlerini <Suspense />kullanarak daha küçük parçalara ayırabiliriz.

Buna seçici hidrasyon denir. ekranda 4 - 5 farklı bileşenimiz olduğunu varsayalım, bir bileşeni şimdi sarmak, kod yüklendikten sonra çok özel bileşeni nemlendirmeye başlayacak ve sayfanın geri kalanını engellemeyecektir. Bu stratejiye sahip olarak, sayfanın daha önemli parçaları/bileşenleri ilk önce etkileşimli hale gelebilirken (aşırı yavaş bağlantı altında), diğer bileşenler iyi bir kullanıcı deneyimi sağlayarak nemlendirmeye devam edecektir.

<Layout>
  <Suspense fallback={<LoadingSpinner />}>
    <DelayedComponent />
  <Suspense />
<Layout />

Burada, <Delayed /> veriler getirilinceye kadar bileşen çözülmeyecek, o zamana kadar bileşen <LoadingSpinner />.

<Suspense /> Önemli bileşenleri etkileşimli tutarak farklı zamanlarda veri getiren birkaç bileşen için kullanabiliriz .

5. Suspense List

Ağır verilerin getirildiği bileşenlerin ekranda göründüğü sırayı "düzenleyen" başka bir React 18 eşzamanlı özelliği.

<SuspenseList />, revealOrder ileriye, geriye veya birlikte değerlere sahip pervaneyi alır

<SuspenseList revealOrder="forwards">
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={1} />
  </Suspense>
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={2} />
  </Suspense>
 </SuspenseList>

Burada kart bileşeni ileri yönde gösterilecektir (veriler alınana kadar LoadingSpinner Bileşenine geri dönecektir). Benzer şekilde, backwards Kartları ters sırada gösterecek ve birlikte pervane her şeyi "birlikte" yapacak.

6. UseDeferredValue

useDeferredValuebir durum değeri alır, milisaniye cinsinden bir zaman aşımı süresi alır ve bu değerin "ertelenmiş sürümünü" döndürür. Bu değer, sağlanan zaman aşımı saniyeleri kadar geride kalır.

const deferredValue = useDeferredValue(value, { timeoutMs: 3000 });

Bu, bir metin giriş alanı için bir kullanım durumu olabilir. Metin girişi hemen ekrana işlenir, ancak <CardLists /> metin destekleri a alır useDeferredValue ve defferedText3 saniye gecikmeli bir a döndürür . Bu, Kart Listeleri bileşeninin gecikmesine neden olurken, kullanıcıların metin alanını hızlı hissetmesine izin vermeye devam eder.

function App() {
  const [text, setText] = useState("");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 

  return (
    <div className="App">
    <input value={text} onChange={handleChange} />

      <CardLists text={deferredText} />
    </div>
  );
 }

Sonuç Olarak

React18, uygulama ve kütüphanelerin yazarının herhangi bir kırılma değişikliğine değil, yumuşak bir geçişe sahip olabilmesinin nedeni, tam gelişmiş bir eşzamanlı moddan (React16'dan çok fazla uyarılmış olan) ziyade eşzamanlı özelliklerle ilgilidir.

Reaktör 18 şu anda bir alfa sürümüdür ve bu yılın sonuna kadar istikrarlı bir sürüme ulaşana kadar üretim için uygun değildir. Bu, React 18 ile ilgili yazımızı sonlandırıyoruz.