M

MLOG

Türkçe

React'in bileşen mimarisine derinlemesine bir bakış, kompozisyon ve kalıtımı karşılaştırma. React'in neden kompozisyonu tercih ettiğini öğrenin ve ölçeklenebilir, yeniden kullanılabilir bileşenler oluşturmak için HOC'ler, Render Prop'lar ve Hook'lar gibi desenleri keşfedin.

React Bileşen Mimarisi: Kompozisyon Kalıtıma Karşı Neden Üstün Gelir

Yazılım geliştirme dünyasında mimari her şeyden önemlidir. Kodumuzu yapılandırma şeklimiz, onun ölçeklenebilirliğini, sürdürülebilirliğini ve yeniden kullanılabilirliğini belirler. React ile çalışan geliştiriciler için en temel mimari kararlardan biri, mantık ve kullanıcı arayüzünün (UI) bileşenler arasında nasıl paylaşılacağı etrafında döner. Bu da bizi, nesne yönelimli programlamadaki klasik bir tartışmaya, React'in bileşen tabanlı dünyası için yeniden tasarlanmış haliyle getiriyor: Kompozisyon ve Kalıtım Karşılaştırması.

Java veya C++ gibi klasik nesne yönelimli dillerden gelen bir geçmişiniz varsa, kalıtım doğal bir ilk tercih gibi gelebilir. Bu, 'bir-tür' (is-a) ilişkileri oluşturmak için güçlü bir kavramdır. Ancak, resmi React dokümantasyonu net ve güçlü bir tavsiye sunar: "Facebook'ta React'i binlerce bileşende kullanıyoruz ve bileşen kalıtım hiyerarşileri oluşturmayı tavsiye edeceğimiz herhangi bir kullanım durumu bulamadık."

Bu yazı, bu mimari tercihin kapsamlı bir incelemesini sunacak. React bağlamında kalıtım ve kompozisyonun ne anlama geldiğini açığa çıkaracak, kompozisyonun neden deyimsel (idiomatic) ve üstün bir yaklaşım olduğunu gösterecek ve Yüksek Mertebeli Bileşenlerden (Higher-Order Components) modern Hook'lara kadar, kompozisyonu küresel bir kitle için sağlam ve esnek uygulamalar oluşturmada bir geliştiricinin en iyi dostu yapan güçlü desenleri keşfedeceğiz.

Eski Yaklaşımı Anlamak: Kalıtım Nedir?

Kalıtım, Nesne Yönelimli Programlamanın (OOP) temel direklerinden biridir. Yeni bir sınıfın (alt sınıf veya çocuk), mevcut bir sınıfın (üst sınıf veya ebeveyn) özelliklerini ve metotlarını almasına olanak tanır. Bu, sıkı sıkıya bağlı bir 'bir-tür' (is-a) ilişkisi yaratır. Örneğin, bir GoldenRetriever bir Köpektir, o da bir Hayvandır.

React Dışında Bir Bağlamda Kalıtım

Kavramı pekiştirmek için basit bir JavaScript sınıf örneğine bakalım:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Ebeveyn kurucusunu çağırır
    this.breed = breed;
  }

  speak() { // Ebeveyn metodunu geçersiz kılar
    console.log(`${this.name} barks.`);
  }

  fetch() {
    console.log(`${this.name} is fetching the ball!`);
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // Output: "Buddy barks."
myDog.fetch(); // Output: "Buddy is fetching the ball!"

Bu modelde, Dog sınıfı name özelliğini ve speak metodunu otomatik olarak Animal sınıfından alır. Ayrıca kendi metotlarını (fetch) ekleyebilir ve mevcut olanları geçersiz kılabilir. Bu, katı bir hiyerarşi oluşturur.

Kalıtım React'te Neden Başarısız Olur?

Bu 'bir-tür' modeli bazı veri yapıları için işe yarasa da, React'teki UI bileşenlerine uygulandığında önemli sorunlar yaratır:

Bu sorunlar nedeniyle, React ekibi kütüphaneyi daha esnek ve güçlü bir paradigma etrafında tasarladı: kompozisyon.

React Yöntemini Benimsemek: Kompozisyonun Gücü

Kompozisyon, 'sahiptir' (has-a) veya 'kullanır' (uses-a) ilişkisini tercih eden bir tasarım ilkesidir. Bir bileşenin başka bir bileşen olması yerine, başka bileşenlere sahip olması veya onların işlevselliğini kullanmasıdır. Bileşenler, katı bir hiyerarşiye kilitlenmeden karmaşık kullanıcı arayüzleri oluşturmak için çeşitli şekillerde birleştirilebilen LEGO tuğlaları gibi yapı taşları olarak ele alınır.

React'in kompozisyon modeli inanılmaz derecede çok yönlüdür ve birkaç ana desende kendini gösterir. En temelden en modern ve güçlü olanına kadar bunları keşfedelim.

Teknik 1: `props.children` ile Kapsama (Containment)

Kompozisyonun en basit şekli kapsamadır. Bu, bir bileşenin genel bir kapsayıcı veya 'kutu' olarak davrandığı ve içeriğinin bir ebeveyn bileşenden aktarıldığı durumdur. React'in bunun için özel, yerleşik bir prop'u vardır: props.children.

Herhangi bir içeriği tutarlı bir kenarlık ve gölge ile saran bir `Card` bileşenine ihtiyacınız olduğunu hayal edin. Kalıtım yoluyla `TextCard`, `ImageCard` ve `ProfileCard` varyantları oluşturmak yerine, tek bir genel `Card` bileşeni oluşturursunuz.

// Card.js - Genel bir kapsayıcı bileşen
function Card(props) {
  return (
    <div className="card">
      {props.children}
    </div>
  );
}

// App.js - Card bileşenini kullanma
function App() {
  return (
    <div>
      <Card>
        <h1>Hoş geldiniz!</h1>
        <p>Bu içerik bir Card bileşeninin içindedir.</p>
      </Card>

      <Card>
        <img src="/path/to/image.jpg" alt="Bir örnek resim" />
        <p>Bu bir resim kartıdır.</p>
      </Card>
    </div>
  );
}

Burada, Card bileşeni ne içerdiğini bilmez veya umursamaz. Sadece sarmalayıcı stili sağlar. Açılış ve kapanış <Card> etiketleri arasındaki içerik otomatik olarak props.children olarak aktarılır. Bu, ayrıştırma (decoupling) ve yeniden kullanılabilirliğin güzel bir örneğidir.

Teknik 2: Prop'lar ile Özelleştirme (Specialization)

Bazen bir bileşenin, diğer bileşenler tarafından doldurulacak birden fazla 'boşluğa' ihtiyacı olur. `props.children` kullanabilseniz de, daha açık ve yapılandırılmış bir yol, bileşenleri normal prop'lar olarak geçmektir. Bu desene genellikle özelleştirme denir.

Bir `Modal` bileşenini düşünün. Bir modal genellikle bir başlık bölümüne, bir içerik bölümüne ve bir eylem bölümüne ( "Onayla" veya "İptal" gibi düğmelerle) sahiptir. `Modal`ımızı bu bölümleri prop olarak kabul edecek şekilde tasarlayabiliriz.

// Modal.js - Daha özelleşmiş bir kapsayıcı
function Modal(props) {
  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <div className="modal-header">{props.title}</div>
        <div className="modal-body">{props.body}</div>
        <div className="modal-footer">{props.actions}</div>
      </div>
    </div>
  );
}

// App.js - Modal'ı belirli bileşenlerle kullanma
function App() {
  const confirmationTitle = <h2>Eylemi Onayla</h2>;
  const confirmationBody = <p>Bu eyleme devam etmek istediğinizden emin misiniz?</p>;
  const confirmationActions = (
    <div>
      <button>Onayla</button>
      <button>İptal</button>
    </div>
  );

  return (
    <Modal
      title={confirmationTitle}
      body={confirmationBody}
      actions={confirmationActions}
    />
  );
}

Bu örnekte, Modal son derece yeniden kullanılabilir bir düzen bileşenidir. `title`, `body` ve `actions` için belirli JSX öğeleri geçirerek onu özelleştiriyoruz. Bu, `ConfirmationModal` ve `WarningModal` alt sınıfları oluşturmaktan çok daha esnektir. `Modal`ı ihtiyaç duyulduğunda farklı içeriklerle basitçe birleştiriyoruz.

Teknik 3: Yüksek Mertebeli Bileşenler (HOC'ler)

Veri çekme, kimlik doğrulama veya günlük kaydı (logging) gibi UI dışı mantığı paylaşmak için, React geliştiricileri tarihsel olarak Yüksek Mertebeli Bileşenler (HOC'ler) adı verilen bir desene yöneldi. Modern React'te büyük ölçüde Hook'lar tarafından değiştirilmiş olsa da, bunları anlamak çok önemlidir çünkü React'in kompozisyon hikayesinde önemli bir evrimsel adımı temsil ederler ve hala birçok kod tabanında mevcutturlar.

Bir HOC, argüman olarak bir bileşen alan ve yeni, geliştirilmiş bir bileşen döndüren bir fonksiyondur.

Her güncellendiğinde bir bileşenin proplarını loglayan `withLogger` adında bir HOC oluşturalım. Bu, hata ayıklama için kullanışlıdır.

// withLogger.js - HOC
import React, { useEffect } from 'react';

function withLogger(WrappedComponent) {
  // Yeni bir bileşen döndürür...
  return function EnhancedComponent(props) {
    useEffect(() => {
      console.log('Bileşen yeni proplarla güncellendi:', props);
    }, [props]);

    // ... orijinal bileşeni orijinal proplarla render eder.
    return <WrappedComponent {...props} />;
  };
}

// MyComponent.js - Geliştirilecek bir bileşen
function MyComponent({ name, age }) {
  return (
    <div>
      <h1>Merhaba, {name}!</h1>
      <p>Siz {age} yaşındasınız.</p>
    </div>
  );
}

// Geliştirilmiş bileşeni dışa aktarma
export default withLogger(MyComponent);

`withLogger` fonksiyonu `MyComponent`'i sararak, `MyComponent`'in dahili kodunu değiştirmeden ona yeni loglama yetenekleri kazandırır. Aynı HOC'yi başka herhangi bir bileşene uygulayarak ona aynı loglama özelliğini verebiliriz.

HOC'lerle İlgili Zorluklar:

Teknik 4: Render Prop'ları

Render Prop deseni, HOC'lerin bazı eksikliklerine bir çözüm olarak ortaya çıktı. Mantığı paylaşmak için daha açık bir yol sunar.

Bir render prop'a sahip bir bileşen, prop olarak bir fonksiyon alır (genellikle `render` olarak adlandırılır) ve neyin render edileceğini belirlemek için bu fonksiyonu çağırır, herhangi bir durumu veya mantığı argüman olarak ona geçirir.

Farenin X ve Y koordinatlarını izleyen ve bunları kullanmak isteyen herhangi bir bileşene sunan bir `MouseTracker` bileşeni oluşturalım.

// MouseTracker.js - Render prop'a sahip bileşen
import React, { useState, useEffect } from 'react';

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  useEffect(() => {
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  // Render fonksiyonunu state ile çağır
  return render(position);
}

// App.js - MouseTracker'ı kullanma
function App() {
  return (
    <div>
      <h1>Farenizi hareket ettirin!</h1>
      <MouseTracker
        render={mousePosition => (
          <p>Mevcut fare konumu ({mousePosition.x}, {mousePosition.y})</p>
        )}
      />
    </div>
  );
}

Burada, `MouseTracker` fare hareketini izlemek için tüm mantığı kapsüller. Kendi başına hiçbir şey render etmez. Bunun yerine, render etme mantığını `render` prop'una devreder. Bu, HOC'lerden daha açıktır çünkü `mousePosition` verisinin tam olarak nereden geldiğini JSX'in içinde görebilirsiniz.

`children` prop'u, bu desenin yaygın ve zarif bir varyasyonu olan bir fonksiyon olarak da kullanılabilir:

// children'ı fonksiyon olarak kullanma
<MouseTracker>
  {mousePosition => (
    <p>Mevcut fare konumu ({mousePosition.x}, {mousePosition.y})</p>
  )}
</MouseTracker>

Teknik 5: Hook'lar (Modern ve Tercih Edilen Yaklaşım)

React 16.8'de tanıtılan Hook'lar, React bileşenlerini yazma şeklimizde devrim yarattı. Fonksiyonel bileşenlerde state ve diğer React özelliklerini kullanmanıza olanak tanırlar. En önemlisi, özel Hook'lar, durum bilgisi olan mantığı (stateful logic) bileşenler arasında paylaşmak için en zarif ve doğrudan çözümü sağlar.

Hook'lar, HOC'lerin ve Render Prop'ların sorunlarını çok daha temiz bir şekilde çözer. `MouseTracker` örneğimizi `useMousePosition` adında özel bir hook'a dönüştürelim.

// hooks/useMousePosition.js - Özel bir Hook
import { useState, useEffect } from 'react';

export function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []); // Boş bağımlılık dizisi, bu etkinin yalnızca bir kez çalıştığı anlamına gelir

  return position;
}

// DisplayMousePosition.js - Hook'u kullanan bir bileşen
import { useMousePosition } from './hooks/useMousePosition';

function DisplayMousePosition() {
  const position = useMousePosition(); // Sadece hook'u çağırın!

  return (
    <p>
      Fare konumu ({position.x}, {position.y})
    </p>
  );
}

// Başka bir bileşen, belki etkileşimli bir öğe
import { useMousePosition } from './hooks/useMousePosition';

function InteractiveBox() {
  const { x, y } = useMousePosition();

  const style = {
    position: 'absolute',
    top: y - 25, // Kutuyu imlecin üzerine ortala
    left: x - 25,
    width: '50px',
    height: '50px',
    backgroundColor: 'lightblue',
  };

  return <div style={style} />;
}

Bu büyük bir gelişmedir. 'Sarmalayıcı cehennemi' yok, prop adlandırma çakışmaları yok ve karmaşık render prop fonksiyonları yok. Mantık, yeniden kullanılabilir bir fonksiyona (`useMousePosition`) tamamen ayrıştırılmıştır ve herhangi bir bileşen, tek ve net bir kod satırıyla bu durum bilgisi olan mantığa 'bağlanabilir'. Özel Hook'lar, modern React'te kompozisyonun nihai ifadesidir ve kendi yeniden kullanılabilir mantık blokları kütüphanenizi oluşturmanıza olanak tanır.

Hızlı Bir Karşılaştırma: React'te Kompozisyon ve Kalıtım

React bağlamındaki temel farklılıkları özetlemek için, işte doğrudan bir karşılaştırma:

Yön Kalıtım (React'te Anti-Desen) Kompozisyon (React'te Tercih Edilen)
İlişki 'bir-tür' (is-a) ilişkisi. Özelleşmiş bir bileşen, bir temel bileşenin bir versiyonudur. 'sahiptir' (has-a) veya 'kullanır' (uses-a) ilişkisi. Karmaşık bir bileşen, daha küçük bileşenlere sahiptir veya paylaşılan mantığı kullanır.
Bağlılık Yüksek. Alt bileşenler, ebeveynlerinin uygulamasına sıkı sıkıya bağlıdır. Düşük. Bileşenler bağımsızdır ve değiştirilmeden farklı bağlamlarda yeniden kullanılabilir.
Esneklik Düşük. Katı, sınıf tabanlı hiyerarşiler, mantığı farklı bileşen ağaçları arasında paylaşmayı zorlaştırır. Yüksek. Mantık ve UI, yapı taşları gibi sayısız şekilde birleştirilebilir ve yeniden kullanılabilir.
Kodun Yeniden Kullanılabilirliği Önceden tanımlanmış hiyerarşi ile sınırlıdır. Sadece "muz" istediğinizde bütün "gorili" alırsınız. Mükemmel. Küçük, odaklanmış bileşenler ve hook'lar tüm uygulama genelinde kullanılabilir.
React Deyimi Resmi React ekibi tarafından tavsiye edilmez. React uygulamaları oluşturmak için önerilen ve deyimsel (idiomatic) yaklaşımdır.

Sonuç: Kompozisyon Odaklı Düşünün

Kompozisyon ve kalıtım arasındaki tartışma, yazılım tasarımında temel bir konudur. Kalıtımın klasik OOP'de bir yeri olsa da, UI geliştirmenin dinamik, bileşen tabanlı doğası onu React için kötü bir uyum haline getirir. Kütüphane, temel olarak kompozisyonu benimsemek üzere tasarlanmıştır.

Kompozisyonu tercih ederek şunları kazanırsınız:

Küresel bir React geliştiricisi olarak, kompozisyonda ustalaşmak sadece en iyi uygulamaları takip etmekle ilgili değildir; bu, React'i bu kadar güçlü ve üretken bir araç yapan temel felsefeyi anlamakla ilgilidir. İşe küçük, odaklanmış bileşenler oluşturarak başlayın. Genel kapsayıcılar için `props.children` ve özelleştirme için prop'ları kullanın. Mantık paylaşımı için öncelikle özel Hook'lara yönelin. Kompozisyon odaklı düşünerek, zamanın testine dayanan zarif, sağlam ve ölçeklenebilir React uygulamaları oluşturma yolunda iyi bir ilerleme kaydetmiş olursunuz.