Bir kerede her şey

Başlık1
Başlık2

google

girinti çözümü

italik
merkez
altını çiz

bir ürün
iki ürün
😅
dfasda


 blokc

Öne çıkan özellikler

Bildirimsel

React, bildirimsel programlama prensiplerine bağlı kalır. paradigma . [13] [14] : 76 Geliştiriciler, bir uygulamanın her durumu için görünümler tasarlar ve React, veriler değiştiğinde bileşenleri günceller ve oluşturur. Bu, zorunlu programlamanın aksine bir durumdur . [15]

Bileşenler

React kodu, bileşenler adı verilen varlıklardan oluşur . [14] : 10–12 Bu bileşenler modülerdir ve yeniden kullanılabilir. [14] : 70 React uygulamaları tipik olarak birçok bileşen katmanından oluşur. Bileşenler, React DOM kütüphanesi kullanılarak DOM'daki bir kök öğeye işlenir. Bir bileşen işlenirken, değerler bileşenler arasında props (kısaca "özellikler") aracılığıyla iletilir . Bir bileşenin içindeki değerlere durum denir . [16]

React'te bileşenleri bildirmenin iki temel yolu, fonksiyon bileşenleri ve sınıf bileşenleridir. [14] : 118 [17] : 10 React v16.8'den beri, fonksiyon bileşenlerini kullanmak önerilen yöntemdir.

Fonksiyonel bileşenler

React Conf 2018'de duyurulan ve React v16.8'den beri kullanılabilen fonksiyon bileşenleri, tek bir "props" argümanı alan ve JSX döndüren bir fonksiyonla tanımlanır. Fonksiyon bileşenleri, useState Hook'u ile dahili durumu kullanabilir . [18]

React Hook'ları

16 Şubat 2019'da React 16.8 halka sunuldu ve React Hooks tanıtıldı. [18] Hooks, geliştiricilerin fonksiyon bileşenlerinden React durumuna ve yaşam döngüsü özelliklerine "bağlanmalarına" olanak tanıyan fonksiyonlardır. [19] Özellikle, Hooks sınıfların içinde çalışmaz; geliştiricilerin sınıflar olmadan React'in daha fazla özelliğini kullanmalarına olanak tanır. [20]

React, useState [ 21] [17] : 37, useContext [14] : 11 [22] [ 17] : 12 , useReducer [14] : 92 [22] [ 17] : 65–66, useMemo [14] : 154 [22] [17] : 162 ve useEffect [23] [17] : 93–95 gibi çeşitli yerleşik hook'lar sağlar . Diğerleri Hooks API Referansında belgelenmiştir. [24] [14] : 62 En sık kullanılan useState ve useEffect , sırasıyladurumu [14] : 37 ve yan etkileri [ 14] : 61 kontrol etmek içindir .

Kancaların kuralları

Kancaların dayandığı karakteristik kod kalıplarını açıklayan iki kanca kuralı vardır [25] :

"Yalnızca en üst düzeyde kancaları çağırın" — kancaları döngülerin, koşulların veya iç içe ifadelerin içinden çağırmayın, böylece kancalar her render işleminde aynı sırayla çağrılsın.
"Hook'ları yalnızca React fonksiyonlarından çağırın" — durum bilgisi içeren mantığın bileşende kalması için hook'ları düz JavaScript fonksiyonlarından çağırmayın.

Bu kurallar çalışma zamanında uygulanamasa da, linter gibi kod analiz araçları geliştirme sırasında birçok hatayı tespit edecek şekilde yapılandırılabilir. Kurallar hem Hook'ların kullanımına hem de diğer Hook'ları çağırabilen özel Hook'ların uygulanmasına uygulanır. [26]

Sunucu bileşenleri

React sunucu bileşenleri (RSC) [27] , yalnızca sunucuda çalışan fonksiyonel bileşenlerdir. Bu kavram ilk olarak "Sunucu Bileşenleriyle Veri Getirme" [28] konuşmasında tanıtılmıştır. Sunucu Tarafı Oluşturmaya benzer bir kavram olmasına rağmen, RSC'ler herhangi bir hidrasyon gerçekleşmediği için istemciye karşılık gelen JavaScript göndermezler. Sonuç olarak, kancalara erişimleri yoktur. Bununla birlikte, doğrudan eşzamansız işlemler gerçekleştirmelerine olanak tanıyan eşzamansız fonksiyonlar olabilirler :

 async function MyComponent() {
  const message = await fetchMessageFromDb();

  return (
    <div>Message: {message}</div>
  );
 }

Şu anda sunucu bileşenleri en kolay şekilde Next.js ile kullanılabilir . Next.js ile hem sunucu hem de istemci (tarayıcı) için bileşenler yazmak mümkündür. Sunucu tarafından oluşturulan bir bileşen tarayıcı tarafından alındığında, tarayıcıdaki React devreye girer ve sanal DOM'u oluşturur ve olay işleyicilerini ekler. Buna hidrasyon denir. [29]

Sınıf bileşenleri

Sınıf bileşenleri ES6 sınıfları kullanılarak tanımlanır . Fonksiyon bileşenleriyle aynı şekilde davranırlar, ancak durum ve yaşam döngüsü olaylarını yönetmek için Hook'lar yerine React.Component yaşam döngüsü yöntemlerini kullanırlar. temel sınıf .

 class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
 }

Şubat 2019'da React 16.8 ile birlikte gelen React Hooks, geliştiricilerin fonksiyonel bileşenler içinde durum ve yaşam döngüsü davranışlarını yönetmelerine olanak tanıyarak sınıf bileşenlerine olan bağımlılığı azalttı.

Bu eğilim, fonksiyonel programlama ve modüler tasarıma yönelik daha geniş endüstri hareketine paraleldir. React gelişmeye devam ettikçe, geliştiricilerin yeni uygulamalar oluştururken veya mevcut uygulamaları yeniden düzenlerken fonksiyonel bileşenlerin ve React Hooks'un faydalarını göz önünde bulundurmaları şarttır. [30]

Yönlendirme

React'in kendisi yerleşik yönlendirme desteğiyle gelmez . React öncelikle kullanıcı arayüzleri oluşturmak için bir kütüphanedir ve kutudan çıktığı gibi tam teşekküllü bir yönlendirme çözümü içermez. React uygulamalarında yönlendirmeyi ele almak için üçüncü taraf kütüphaneler kullanılabilir. [31] Bu, geliştiricinin rotaları tanımlamasına, navigasyonu yönetmesine ve URL değişikliklerini React dostu bir şekilde ele almasına olanak tanır.

Gerçek DOM'u uygulamak için kullanılan sanal bir DOM vardır.

Sanal DOM

Bir diğer dikkat çekici özellik ise sanal bir Belge Nesne Modeli veya Sanal DOM'un kullanılmasıdır . React, tarayıcı DOM'una benzer, bellekte bir veri yapısı oluşturur. Bileşenler her işlendiğinde, sonuç sanal DOM ile karşılaştırılır. Ardından, tarayıcının görüntülenen DOM'unu yalnızca hesaplanan farklılıklarla verimli bir şekilde günceller. [32] Bu işleme uzlaştırma denir . Bu, programcının her değişiklikte tüm sayfanın işleniyormuş gibi kod yazmasına olanak tanırken, React yalnızca gerçekten değişen bileşenleri işler. Bu seçici işleme, önemli bir performans artışı sağlar. [33] [34]