React.createClass ve extends React.Component Arasındaki Farklar

2016, Jul 21    

React da bir componet’ı oluşturmanın birden farklı yolu vardır. Temelde React.createClass ve extends React.Component aynı işlemi farklı şekillerde yaparlar.

React da geleneksel olarak bir component oluşturmak için React.createClass methodu kullanılır. ES6 sınıf yapısı ile de component oluşturulabilir.

Bir component oluşturmak için uygulanan bu iki yöntemde bazı farklılıklar mevcuttur. Bunlardan bazıları;

Syntax Farklılıkları:

React.createClass

Burada const keyword’ü ile bir React sınıfı oluşturulmuş. Tipik base component tanımlamalarında render fonksiyonu önemli bir role sahiptir.

İlk olarak aşağıdaki iki kod örneği arasındaki syntax farklılıklarını inceleyebilirsiniz.

React.Component

Yukarıdaki React.createClass tanımlamasını ele alıp, onu ES6 sınıfını kullanarak yeniden düzenleyebiliriz.

JavaScript açısından bakıldığında şuanda ES6 sınıflarını kullanıyoruz. Henüz bütün tarayıcıların ES6’yı desteklememeleri sebebiyle yazdığımız kodların ES6 dan ES5’ e babel gibi bir compiler aracılığıyla dönüştürülmesi gerekiyor.

State Farklılıkları:

React.createClass

React da props bileşenlerindeki değişimleri izlemek için state adında bir nesne bulunmaktadır. Bu state’in ilk değerini vermek için getInitialState adında bir metod yazmamız gerekli.

React.Component

React.Component’ın constructor özelliğini kullanarak kolay bir şekilde bütün stateleri başlatabiliriz.

“this” Farklılıkları:

React.createClass

React.createClass otomatikmen this keywordüne kendi instance’ını bağlar. ES6 class yapısı ile yapılırsa bu işlemi manuel yapmak gereklidir.

React.Component

Buradaki this null dur çünkü component’ın instance’ı bağlanmamıştır.

Doğru içeriği bağlamak için birkaç farklı yöntem kullanabiliriz. Aşağıda inline olarak nasıl bağlayabileceğimizi görebilirsiniz.

Alternatif olarak constructor’ın içerrisindeki this.handleClick bağlamını değiştirebiliriz.

propTypes ve getDefaultProps:

Component’a property bağlamak için kullanılır. Default değerler ile gönderilmek istendiğinde getDefaultProps() kullanılır.

React.createClass

React.createClass bir fonksiyondur. Çeşitli parametreler alır. Bu parametrelere fonksiyonun prop type’ını, mixins’ini verebiliriz. Ancak render’ı kesinlikle vermemiz gerekli. Diğer parametreleri istersek verebiliriz. Sonunda bu parametrelere bağlı olarak component classında bir instance döndürür.

React.Component

Eğer ES6 ile component oluşturma işlemini gerçekleştirirsek parametre vermek yerine sınıfa sınıfınismi.propertismi şeklinde property ekleyebiliriz.

Mixins:

Componentlara dışarıdan fonksiyon, property gibi özellikleri bağlamak için kullanılır.

React.createClass

React.Component

ES6 sınıfları mixins’i desteklememektedir.

Kaynak

Yardım ve desteklerinden dolayı Mesut Yiğit’ e çok teşekkürler.