Uygulamayı daha sağlam hale getirmek için uygulamalarında OOP kavramını kullanmak gerekir. Yine de ReactJS kendi içinde geliştirilmiştir, bu nedenle herhangi bir uygulama oluştururken onun ilkesini izlemelisiniz. Bugün, uygulamamızı daha nesne yönelimli hale getirmek için nasıl ve hangi alternatifleri kullanabileceğimizi göreceğiz.

React'te Nesne Yönelimli Programlama Nedir?

Nesne yönelimli programlama, kodunuzu tüm uygulamalar ve hizmetlerde daha tekrar kullanılabilir hale getirmenin bir yoludur. Bir Nesne, diğer nesnelerle, programlarla ve kullanıcılarla düz bir javascript nesnesinden daha etkili bir şekilde etkileşim kurabilir.

Bunu nasıl başarabiliriz?

Uygulamanızda sınıf bileşenlerini kullanmayı tercih ederseniz, yardımcı yöntemler ve durumlar eklemek çok daha kolaydır, ancak zorluk, işlev bileşenleri ve kancalarla çalışırken ortaya çıkar. Fonksiyonel bileşen için normal sınıfları kullanmada birinci seviye engelleyicinin ne olduğunu görmek için bir örnek verelim.

Bağlamda Userkullanılan ve kullanılan bir sınıf oluşturdum , aynı zamanda iki yöntemi açığa çıkardım ve benim için bir alıcı ve ayarlayıcı olarak hareket ettim. Kullanırken bir hata alıyorum ve yaniuseStatesetNamegetNameuseState

React Hook "useState" cannot be called in a class component.
React Hooks must be called in a React function component or 
a custom React Hook function. (react-hooks/rules-of-hooks)eslint

      
                

                    
                    
                
            

const user = new User('name')
  return (
    <div className="App">
      <button onClick={() => user.setName("first name")}>click</button>
      {user.getName()}
    </div>
  );

İşlevsel Bileşen için İşlevsel Oluşturucuyu Kullanma

Sınıf yapıcısını kullanamayacağımız için, işlevsel kurucuyu kullanacağız. Fonksiyonlar bize hata vermeyecek ama sınıflarla olan gücümüzü azaltacaklar. Örneğin, uzatmak biraz karmaşık olacaktır.

İşlev oluşturucu için, özellikleri tanımlayabilir ve bunları, sınıf oluşturucu için kullandığımız şekilde kullanabiliriz. bu sefer herhangi bir hatamız olmayacak ve işler sorunsuz çalışacak

Aşağıdaki programlamanın kullanımı aşağıdaki pasaj gibi görünecektir. Her düğmeye tıkladıktan sonra değişiklikleri göreceğiz

export default function App() {
  const user = new User("hello");
  return (
    <div className="App">
      <button onClick={() => user.setAge(10)}>age</button>
      <button onClick={() => user.setProfile("first profile")}>profile</button>
      <button onClick={() => user.setName("first name")}>name</button>
      <button onClick={() => user.save()}>save</button>
    </div>
  );
}

// after save click - output from log
data: Object
  name: "first name"
  age: 10
  profile: "first profile"

UserModel kancaları, modeller için özel olarak bir klasör tanımladığımız ve orada gerekli tüm yardımcı yöntemleri sakladığımız ve birlikte çalıştığımız normal bir örnek gibi işlev göreceği ve hareket edeceği kanca kullanım durumlarıdır .

Bu tür kancaların arkasındaki fikir, yalnızca yardımcı yöntemlerle birlikte tüm durum yöntemlerini ortaya çıkarmak ve bileşen tarafından ihtiyaç duyulmadığı sürece bağlama daha fazla kanca koymamaktır. Böyle bir kancanın bir örneği aşağıdadır

Aşağıdaki kancanın çıktısı da işlevsel bir kurucu ile aynıdır. Belirtilebilecek birkaç ek nokta vardır:

• kancalar yalnızca bileşenin içinde çalışır
• İşlevsel oluşturucu, bir durum kullanmadıkları sürece bileşeninizin dışında çalışacaktır.

Nesne yönelimli programlamayı kullanmak, yönetilmesi gereken birçok karşılıklı bağımlılık varsa herhangi bir uygulama için önemlidir ve ölçeklenmeye başlarsa kodunuzu yönetmenize de yardımcı olacaktır.

Umarım bugün yeni bir şeyler öğrenirsin. Kaynak kodunun tamamını kod korumalı alan bağlantısında bulabilirsiniz . Teşekkürler ve Mutlu Kodlamalar!

PlainEnglish.io'da daha fazla içerik . Haftalık ücretsiz bültenimize kaydolun . Bizi Twitter , LinkedIn , YouTube ve Discord'da takip edin .

Yazılım başlangıcınızı ölçeklendirmekle ilgileniyor musunuz? Devreyi kontrol edin .