Yüksek Dereceli Bileşenler (HOC'ler), React'te, mantığı bileşenler arasında yeniden kullanmanıza izin veren güçlü ve popüler bir modeldir. HOC'ler, bir bileşen alan ve ek işlevlere sahip yeni bir bileşen döndüren işlevlerdir. Bu yazıda, HOC'lerin ne olduğunu, neden yararlı olduklarını ve nasıl oluşturulacağını bir örnekle keşfedeceğiz.

Yüksek Dereceli Bileşenler nedir?

React'te bileşenler, uygulamanızın yapı taşlarıdır. UI öğelerini oluşturmaktan ve durumu yönetmekten sorumludurlar. Yüksek Dereceli Bileşenler (HOC'ler), bir bileşeni bağımsız değişken olarak alan ve işlevsellik eklenmiş yeni bir bileşen döndüren işlevlerdir. HOC'ler orijinal bileşeni değiştirmez, bunun yerine onu saran yeni bir bileşen oluşturur.

HOC kavramı, fonksiyonel programlamadaki üst düzey fonksiyonlar fikrine dayanmaktadır. İşlevsel programlamada, üst düzey işlevler, diğer işlevleri bağımsız değişken olarak alan veya işlevleri sonuç olarak döndüren işlevlerdir. Benzer şekilde, HOC'ler bileşenleri bağımsız değişken olarak alır ve yeni bileşenleri sonuç olarak döndürür.

Neden Yüksek Dereceli Bileşenler kullanmalısınız?

HOC'ler, React'te mantığı bileşenler arasında yeniden kullanmanıza yardımcı olabilecek güçlü bir modeldir. HOC'ler özellikle aşağıdaki durumlarda yararlıdır:

1. Kodu yeniden kullanma:
   Aynı mantığı paylaşan birden çok bileşeniniz varsa, bu mantığı ayrı bir işleve çıkarmak ve bileşenler arasında yeniden kullanmak için bir HOC kullanabilirsiniz.
2. Soyutlama:
   HOC'ler, uygulama ayrıntılarını soyutlayabilir ve kodunuzu daha modüler ve bakımı kolay hale getirebilir.
3. Kompozisyon:
   HOC'ler, birden çok davranışı tek bir bileşende oluşturmak için kullanılabilir.

Bir HOC oluşturmak kolaydır. Bir bileşeni bağımsız değişken olarak alan ve işlevsellik eklenmiş yeni bir bileşen döndüren bir işlev oluşturmanız yeterlidir. Bir örneğe bakalım:

import React from "react";

const withLoading = (WrappedComponent) => {
  class WithLoading extends React.Component {
    state = {
      isLoading: true
    };

    componentDidMount() {
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 2000);
    }

    render() {
      const { isLoading } = this.state;

      if (isLoading) {
        return <div>Loading...</div>;
      }

      return <WrappedComponent {...this.props} />;
    }
  }

  return WithLoading;
};

export default withLoading;

HOC'yi kullanmak için, geliştirmek istediğimiz bileşeni işlevle sarmamız yeterlidir withLoading:

import withLogging from "./LoadingWraper";

const App = () => {
  return (
    <div className="App">
      <div>Hello, World!</div>
    </div>
  );
};
export default withLogging(App);

Çözüm:

HOC'ler, React'te mantığı bileşenler arasında yeniden kullanmanıza izin veren güçlü bir modeldir. HOC'ler, özellikle aynı mantığı paylaşan birden çok bileşeniniz olduğunda veya uygulama ayrıntılarını soyutlamak ve kodunuzu daha modüler ve bakımı kolay hale getirmek istediğinizde kullanışlıdır. Bir HOC oluşturmak kolaydır, bir bileşeni bağımsız değişken olarak alan ve ek işlevsellik ile yeni bir bileşen döndüren bir işlev oluşturmanız yeterlidir.

CodeSandBox Bağlantısı : -https://codesandbox.io/s/vigorous-rhodes-mgc8z4

Sosyal Ağda benimle bağlantı kurun

✅Github:https://github.com/surksharathi
✅ Linkedin:https://www.linkedin.com/in/suraksha-singh-88350472/
✅Twitter:https://twitter.com/SurakshaSogaria