React'te Sınıf Bileşenleri ile İşlevsel Bileşenler Arasında Seçim Yapma

Temel farklılıklar

React'te bileşen, kullanıcı arabiriminin bir bölümünü temsil eden bir kod parçasıdır. React'te iki ana bileşen türü vardır: sınıf bileşenleri ve işlevsel bileşenler.

Sınıf bileşenleri, React.Component sınıfını genişleten bir sınıf kullanılarak tanımlanır. Daha zengin özelliklidirler ve durum ve yaşam döngüsü olaylarını işlemek için daha fazla seçeneğe sahiptirler. Bir sınıf bileşeni şu şekilde görünür:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

İşlevsel bileşenler, yalnızca bir React öğesi döndüren JavaScript işlevleridir. Sınıf bileşenlerinden daha basittirler ve okuması ve yazması daha kolaydır. İşte işlevsel bir bileşen olarak yazılmış, yukarıdakiyle aynı bileşen:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Ne zaman ne kullanılır

Genel olarak, durum veya yaşam döngüsü yöntemleri gibi yalnızca sınıf bileşenlerinde bulunan bir özelliği kullanmanız gerekmedikçe işlevsel bileşenleri kullanmalısınız.
Birkaç vardır nedenleri neden tercih edebilirsin fonksiyonel bileşenler yerine sınıf bileşenlerini kullanma:

1. okunabilirlik: Sınıf bileşenleri, özellikle çok sayıda durum veya yaşam döngüsü yönteminiz varsa, kodu anlamayı kolaylaştırabilir. Kod, açıkça tanımlanmış ve bulunması kolay yöntemler halinde düzenlenmiştir.

2. Reus yeteneği: Sınıf bileşenleri, yeni bileşenler oluşturmak için genişletilebildikleri için daha kolay yeniden kullanılabilirler. Bu, özellikle bileşenler arasında çok sayıda paylaşılan işlevselliğe sahipseniz yararlı olabilir.

3. organizasyon: Sınıf bileşenleri, kodunuzu düzenlemenizi kolaylaştırabilir, çünkü ilgili yöntemleri aynı bileşende gruplandırabilirsiniz. Bu, kodu bulmayı ve korumayı kolaylaştırabilir.

Yazmayı seçmek isteyebileceğiniz birkaç neden daha var. fonksiyonel bileşenler:

1. Durum veya yaşam döngüsü yöntemlerini kullanmanız gerekmediğinde: Durum veya yaşam döngüsü yöntemlerini kullanmanız gerekmiyorsa, işlevsel bir bileşen iyi bir seçimdir, çünkü bir sınıf bileşeninden daha basit ve okuması ve yazması daha kolaydır.

2. Saf bir bileşene ihtiyacınız olduğunda: İşlevsel bileşenler "saf" bileşenlerdir, yani yalnızca donanımlarına bağlıdırlar ve kendi durumlarına sahip değildirler. Bir bileşenin yalnızca donanımları değiştiğinde yeniden işlenmesini sağlamak istiyorsanız bu yararlı olabilir.

3. Performansı optimize etmek istediğinizde: İşlevsel bileşenler saf olduğundan, React tarafından daha kolay optimize edilebilirler ve bu da daha iyi performans sağlayabilir.

4. Özlü, okunması kolay kod yazmak istediğinizde: İşlevsel bileşenler daha basit olduğundan ve daha az hareketli parçaya sahip olduğundan, özellikle uygulamanızda çok sayıda bileşen varsa, bunları okumak ve anlamak daha kolay olabilir.

genel olarak, yalnızca bir sınıf bileşeniyle karşılanabilecek özel bir gereksiniminiz olmadıkça işlevsel bileşenleri kullanmalısınız.

useEffect & useState

Ancak, durum ve yaşam döngüsü yöntemlerini işlevsel bileşenlerde de kullanabileceğinizi unutmamak önemlidir. Kullanım Durumu ve kullanım Etkisi kancalar. Genel olarak, ihtiyaçlarınıza en uygun bileşen türünü seçmelisiniz ve bu, kodunuzu okunması ve anlaşılması en kolay hale getirecektir.

Hala durum veya yaşam döngüsü olaylarını uygulamak istiyorsanız, bileşeninizi etkinleştirmek için kancaları kullanma olanağına sahip olacaksınız.

bu şekilde uygulayacaksınız kullanım Etkisi ve Kullanım Durumu fonksiyonel bileşenlerinizin içinde

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Burada, bir sayımı takip eden ve mevcut sayımı kullanıcıya gösteren bir bileşenimiz var. bileşen kullanır Kullanım Durumu işlevsel bileşene durum eklemek için kanca ve kullanım Etkisi sayım değiştiğinde bir eylem gerçekleştirmek (belge başlığını güncellemek) için kancayı kullanın.

Önemli Noktalar

React'te sınıf bileşenleri ve işlevsel bileşenler arasında seçim yapmak söz konusu olduğunda, ana çıkarımlar şunlardır:

1. Sınıf bileşenleri, React.Component sınıfını genişleten ve durum ve yaşam döngüsü olaylarını işlemek için daha fazla seçeneğe sahip bir sınıf kullanılarak tanımlanır.
2. İşlevsel bileşenler, yalnızca bir React öğesi döndüren ve daha basit ve okuması ve yazması daha kolay olan JavaScript işlevleridir.
3. Durum veya yaşam döngüsü yöntemleri gibi yalnızca sınıf bileşenlerinde bulunan bir özelliği kullanmanız gerekmiyorsa işlevsel bileşenleri kullanmalısınız.
4. İşlevsel bileşenlerde durum eklemek ve yan etkiler gerçekleştirmek için useState ve useEffect kancalarını kullanabilirsiniz.
5. Genel olarak, sınıf bileşenleri ile işlevsel bileşenler arasındaki seçim, ihtiyaçlarınız için neyin en iyi olduğuna ve kodunuzu okunması ve anlaşılması en kolay hale getiren şeye bağlıdır.

Umarım bu kısa açıklama size yardımcı olur. Javascript, tepki veya genel olarak web geliştirme öğrenme yolunda rehberlik veya rehberlik istiyorsanız, lütfen bire bir oturum için benimle iletişime geçmekten çekinmeyin.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://www.codementor.io/maximiliangeiger/making-the-choice-between-class-components-and-functional-components-in-react-20uvaeyqci