React’ta Fonksiyonel Bileşen ile Sınıf Bileşeni arasındaki fark nedir?

Functional Component vs Class Component

https://blog.bitsrc.io/

Kısaca fonksiyonel ve sınıf bileşenleri arasındaki farklardan bahsettim, bu yeni yazımda. İkisi arasındaki en önemli farklar;

Fonksiyonel Bileşen

• Fonksiyonel bileşende, props fonksiyona bir argüman olarak verilir.
• Render methodu kullanılmaz.
• ‘Stateless’ bileşenler olarak da bilinirler. Basit bir şekilde veriyi kabul eder ve bunu bir formda gösterir. Asıl sorumluluğu kullanıcı arayüzünü render etmektir.
• React yaşam döngüsü yöntemleri (örneğin, componentDidMount) kullanılamaz (eğer React Hook kullanmıyorsak).
• React Hook fonksiyonel bileşende kullanılabilir.
• Fonksiyonel bir bileşen daha kısa ve daha basit yazılır, bu da geliştirmeyi, anlamayı ve test etmeyi kolaylaştırır.

Sınıf Bileşeni

• React.Component’den ‘extend’ etmeniz gerekir. Bir React elementi dönen render fonksiyonunu yaratmanız gerekir.
• HTML dönen bir render() metoduna sahip olması şarttır.
• Stateful bileşenler olarak da bilinirler. State kullanırsınız.
• React yaşam döngüsü yöntemleri (örneğin, componentDidMount) kullanılır.
• Örneğin handleClickEvent adında bir methot kullanmak istediniz. Bunu kullanmak için bunu o bileşenin this ‘ine bağlamanız (bind etmeniz) gerekir. Bunu da şu şekilde yaparsınız:

this.handleClickEvent = this.handleClickEvent.bind(this);

Bunu yapmamız gerekiyor çünkü methot çağırıldığı zaman ki içerik ile başlangıçtaki farklıdır. Başlangıç seviyesindeki biri için bunu kavramak biraz zor olabilir.

Tüm methotları bağlamak yerine bunun etrafından dolandığınız farklı sentaks kullanarak da methotları kullanabilirsiniz:

handleClickEvent = () => {
  this.setState({count: this.state.count + 1});
}

Kaynakça:

• https://www.twilio.com/blog/react-choose-functional-components