React HOC (Higher Order Component) Yapısı

Bir üst seviye bileşen; ReactJs de component mantığının tekrar kullanılabilir olmasına olanak tanıyan ileri düzey bir mantıktır.

Higher Order Component, parametre olarak bir component alır ve output olarak yeni bir bileşen döndüren bir fonksiyondur.

Kullanım amacı olarak; Loading süreçleri yapılabilir. Buradaki amaç, bir komponent açılmadan, kuralların işlenerek karar verici bir üst düzey komponentin çalıştırılması.

HOC için aşağıdaki gibi bir fonksiyon tanımlayabiliriz.

import React from 'react';

function Colors(WrappedComponent) {

  return (props)=>{
    return(
        <div>
            <WrappedComponent {...props}/>
        </div>
    )
  }
}
export default Colors;

WrappedComponent : Türkçesi 'Sarmalamak' olarak çevirilebilir. Colors için alt seviye komponentlerde return içerisinde tanımlanan tüm işlemler geçerli olacaktır.

Örnek bir uygulama ile daha anlaşılır olacağını düşünüyorum.

Yukarıdaki gibi bir proje oluşturalım ardından sırası kodlarımızı geliştirelim.

Colors.js

import React from 'react';

function Colors(WrappedComponent) {

  return (props) => {
    return (
      <div style={{
        backgroundColor: "red",
        border: "2px solid blue",
        width: "200px",
        height: "200px",
        padding: "60px",
        background: "#1abc9c",
        color: "white",
        fontSize: "30px"
      }}>
        <button>HOC Button</button>
        <WrappedComponent {...props} />
      </div>
    )
  }
}

export default Colors;

App.js

import About from './components/About';
import Home from './components/Home'

function App() {
  return (
    <div>
      <Home />
      <About/>
    </div>
  );
}
export default App;

Home.js

import React from 'react';
import Colors from '../hoc/Colors';

function Home() {
    return (
        <div>
            <h1>Home</h1>
        </div>
    );
}

export default Colors(Home);

Colors(wrapped) içerisinde istediğimiz komponenti belirtebiliriz. aşağıdaki gibi bir çıktı elde edeceğiz.

function Colors(), içerisinde istediğimiz gibi bir mantık yazabiliriz. Home be About içerisinde hiç bir kod olmamasına rağmen wrapped komponent olarak render edilmiştir.

Bazı komponentler üst seviye yazılmalıdır, birden fazla komponentde benzer style veya durumlar olucak ise HOC yapısına başvurulabilir.

#HigherOrderComponent #HOC #ReactWrapped