Composition ve Inheritance

React’ın güçlü bir modeli var ve componentler arasında kodu tekrar kullanmak için inheritance (miras) yerine composition (birleşim) kullanılmasını öneriyoruz.

Bu bölümde, React’e yeni gelen geliştiricilerin genellikle inheritance ile ilgili karşılaştığı birkaç sorunu ele alacağız ve bunları compositionlarla nasıl çözebileceğimizi göstereceğiz.

Containment (Kapsama)

Bazı componentler önceden çocuklarını bilmezler.

Bu, genel kutuları temsil eden Sidebar veya Dialog gibi componentler için özellikle geçerlidir.

Bu tür componentlerin, çocuklarını doğrudan çıktılarına yerleştirmek için children kullanmalarını öneriyoruz:

Bildiğiniz gibi, props sayesinde o componente tüm attributeleri alıyorduk. props.children dediğimizde ise o componente yerleştirilmiş child (çocuk) componentleri/içeriği (vb) alıyoruz.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

Yukarıdaki FancyBorder componenti bir div return ediyor. Bu div ise props ile colorı parametre olarak alacak.

Alttaki WelcomeDialog componenti ise FancyBorder componentini return ediyor ve renk olarakta blue gönderilmiş.

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Hoşgeldiniz
      </h1>
      <p className="Dialog-message">
        Bu dokümantasyonu starlayarak destek olabilirsiniz!
      </p>
    </FancyBorder>
  );
}

CodePen’de Deneyin

<FancyBorder> JSX etiketinin içindeki herhangi bir şey children olarak FancyBorder componentine geçirilir.

Aşağıdaki yöntem daha az yaygındır, ancak bazen kullanılabiliyor. Bu gibi durumlarda children kullanmak yerine kendi yöntemlerinizi hazırlayabilirsiniz:

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

CodePen’de Deneyin

Burada atrribute olarak SplitPane componentine left ve right propslarına component gönderilmiştir. Propslar ile bir yazı, rakam, değişken, component gibi her hangi bir şeyi gönderebilirsiniz.

Uzmanca Kod

Bazen componentleri, diğer componentlerin “özel durumları” olarak düşünürüz.

React’te bu, daha “özel” bir componentin daha “jenerik” bir component oluşturduğu ve props ile yapılandırdığı composition ile elde edilir:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Hoşgeldiniz"
      message="Bu dokümantasyonu starlayarak destek olabilirsiniz!" />
  );
}

CodePen’de Deneyin

Aşağıdaki daha karışık olan örneği inceleyerek anlamaya çalışın:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Keşif Programı"
              message="Size nasıl başvurmalıyız?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Kayıt Ol
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Uçağa hoşgeldiniz, ${this.state.login}!`);
  }
}

CodePen’de Deneyin

Inheritance Hakkında

Facebook binlerce componentte React kullanıyor ve component hiyerarşileri oluştururken önerdiğimiz herhangi bir kullanım durumu bulamadık.

Props and compositionlar, componentin görünümünü ve davranışını açık ve güvenli bir şekilde özelleştirmeniz için gereken tüm esnekliği verir.

Componentler arasında UI olmayan işlevselliği yeniden kullanmak istiyorsanız ayrı bir JavaScript modülü içine ayıklamanızı öneririz. Componentler içe aktarabilir ve bu fonksiyonu, nesneyi veya bir sınıfı uzatmadan kullanabilir.

Konu anlatımları sonlanmıştır. Bu aşamadan sonra Gelişmiş Kılavuzlar konularına geçiş yapılacaktır.

Sıradaki Gelişmiş Kılavuz: Derinlemesine JSX