Constructor
class NewsItem extends Component {
constructor(props){
super(props);
this.state = {
news : this.props
}
}
... Örnek 10: constructor kullanım şekli
Class oluşturulup hazır hale geldiğinde ilk çalışan fonksiyondur. Bir classta constructor ismiyle yalnızca bir tane özel fonskiyon olabilir ve constructor componentde yüklendiğinde sadece bir kere çalışır ve parametre olarak props döner. Kısacası ana amacı ilk çalışma anında propslara erişim sağlamasıdır. Ancak, farklı amaçlar için de kullanabilirsiniz; ilk anda state’i başlatmak isterseniz içerisinde state de tanımlayabilirsiniz veya componentler üzerinden fonksiyonların bind işlemleri için de kullanabilirsiniz.
constructor(){
super();
this.addButton = this.addButton.bind(this)
}
addButton(){
this.props.addNews();
}
<button onClick={this.addButton}>Add</button>Örnek 11: constructor içinde bind işlemi kullanım şekli
Kullanırken mutlaka içine super() yazmanız gerekir.” Super de ne ola ki? İlk çalışıyor diye kendini mi övüyor? ” demeyin. super(props) metodunu kullanarak üst-sınıfın bir nesnesini yaratabilir ve onun değişkenlerine değer atayabilirsiniz.
Gerçek hayattan kesitle sonuca bağlayayım;
Yine ev örneğinden yola çıkalım. Oturma odanızda diyelim ki halı yok. Hani evde sokacak yer bulamayınca yatak odanızdaki kocaman elbise dolabının üstünde hurçların arasına sokulan halılar var ya o geliyor aklınıza. constructor(props) getirecek kişi diyelim. “aslansın kaplansın taşı buraya” diye o halıyı çağırıyorsunuz. super(props) ile teslim alıyor ve kullanıma hazır hale getiriyorsunuz. Artık stateler sayesinde istediğiniz yere serebilirsiniz. (state konusunu birazdan anlatacağım.)
Hani hep zorunu anlatıp anlatıp kafanızı karıştırıp sonunda bak buda kolay yolu diye gösterip sinir ederler ya aynısını ben de yapacağım. React 16 ile bu şeklide constructor tanımlayıp hemen state ile kullanılır hale getirebiliyorsunuz.
class NewsItem extends Component {
state = {
news : this.props
}
...Örnek 12: ES6 ile constructoru state e hızlıca bağlama yöntemi.
Function Bind
Constructor konusunda fonksiyon bind etmek için constructordan yararlanabileceğinizi yazmıştım. React yazarken 4 farklı fonksiyon bind etme yönteminden söz etmek istiyorum.
- Constructor içerisinde bind işlemi
constructor(){
super();
this.addButton = this.addButton.bind(this)
}
addButton(){
this.props.addNews();
}
<button onClick={this.addButton}>Add</button> Örnek 13
2. onClick Event içerisinde bind işlemi
addButton(){
this.props.addNews();
}
<button onClick={this.addButton.bind(this)}>Add</button> Örnek 14
3. Bind edeceğiniz fonksiyonu arrow function olarak yazmak.
addButton = () =>{
this.props.addNews();
}
<button onClick={this.addButton}>Add</button> Örnek 15
4. JSX içerisine arrow function yazmak.
addButton(){
this.props.addNews();
}
<button onClick={() => this.addButton()}>Add</button> Örnek 16
Facebook 1 numaralı yöntemi, yani bind işlemlerini constructor içerisnde yapılmasını öneriyor ama 3 numaralı yöntem benim daha daha kolayıma geliyor. Tercih sizin.