2016-10-02 14 views
12

docs'dan yanıt öğreniyorum, ancak bu örnekte super()'un ne olduğundan emin değilim. Genellikle, yeni bir örneğe geçirilen argümanları almaz ve sonra bu argümanları örnekle birleştirmek için React.Component'in yapıcı yöntemini çağırmaz mı? Herhangi bir argüman olmadan ne yapar? ES6 olarakSuper() herhangi bir argümanla ne yapar?

class LikeButton extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     liked: false 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
    this.setState({liked: !this.state.liked}); 
    } 
    render() { 
    const text = this.state.liked ? 'liked' : 'haven\'t liked'; 
    return (
     <div onClick={this.handleClick}> 
     You {text} this. Click to toggle. 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <LikeButton />, 
    document.getElementById('example') 
); 
+1

super(), sınıf tabanlı dillerin çoğunda üst öğenin yapıcısını çağırmak anlamına gelir. Yani React.Component'in yapıcısını çağırıyordu. – Keith

+0

Süper kurucu, sıfır argümanların anlamlı olmasına izin verecek varsayılan argümanlara (örtük veya başka türlü) sahip mi? Bu kaynak koduna bakarak çözülebilir gibi görünüyor. – Carcigenicate

+0

React.Component kurucu bir bağımsız değişken alır https://facebook.github.io/react/docs/reusable-components.html#es6-classes – Dionys

cevap

22

, türetilmiş sınıfları bir kurucu varsa super() aramak gerekir. Tepkimede, tüm bileşenler Bileşen sınıfından uzanır.

Aslında her ES6/tepki sınıfı için bir kurucuya ihtiyacınız yok. Özel kurucu tanımlanmamışsa, default constructor kullanır. temel sınıflar için öyle:

constructor() {} 

Ve türetilmiş sınıflar için

, varsayılan yapıcı geçerli:
constructor(...args) { 
    super(...args); 
} 
Ayrıca super() kadar başlatılmadı this beri this erişmeden önce super() çağırmanız gerekir

denir .

Özel bir yapıcıyı tepkide kullanmanın birkaç nedeni vardır. Birincisi, getInitialState yaşam döngüsü yöntemini kullanmak yerine this.state = ... kullanarak yapıcıdaki başlangıç ​​durumunu ayarlayabilmenizdir.

Ayrıca, kurucunun içinde sınıf yöntemlerini this.someClassMethod = this.someClassMethod.bind(this) ile bağlayabilirsiniz. Bu, kurucudaki yöntemleri yalnızca bir kez oluşturulacakları için bağlamak daha iyidir. Aksi takdirde, bind numaralı telefonu arayabilir veya kurucu dışında herhangi bir yöntem (render yönteminde olduğu gibi) yöntemlerini bağlamak için ok işlevlerini kullanırsanız, aslında her oluşturma işleminde yeni bir işlev örneği oluşturur. Bu konuda daha fazla bilgi edinin here. yapıcı metotta this.props kullanmak istiyorsanız

, bir argüman olarak sahne ile super çağırmanız gerekir: sen, sonra this.props yapıcısındaki

constructor(props) { 
    super(props); 
    this.state = {count: props.initialCount}; 
} 

tanımlanmamış yoksa. Ancak kurucunun dışında herhangi bir şey yapmanıza gerek kalmadan kurucunun dışındaki herhangi bir yerde this.props'a erişebilirsiniz.