Es6 sınıflarını kullanırken React'teki “super ()” ve “super (sahne)” arasındaki fark nedir?

Ne zaman geçmesine önemlidir propsetmek super()ve neden?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

Tek geçmek gerekiyor bir nedeni sadece vardır propsiçin super():

Yapıcıda erişmek istediğinizde this.props.

Geçen:

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

Geçmiyor:

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

Geçen ya da değil geçen o Not propsiçin supervardır hiçbir etkisi daha sonraki kullanımları üzerine this.propsdışarıdan constructor. Olduğunu render, shouldComponentUpdateya da olay işleyicileri her zaman bu bilgilere erişimi vardır.

Bu, Sophie Alpert'in benzer bir soruya verdiği cevapta açıkça söyleniyor .

Ayrıca dokümantasyon Sınıf, nokta 2'ye Yerel Devleti ekleme Devlet ve Yaşam Döngüsü, -recommends:

Sınıf bileşenleri her zaman taban yapıcısını ile çağırmalıdır props.

Ancak, hiçbir neden belirtilmez. Ya alt sınıflama ya da gelecekteki uyumluluk nedeniyle olduğunu tahmin edebiliriz.

(Bağlantı için teşekkürler @MattBrowne)

Bu örnekte, React.Componentsınıfı genişletiyorsunuz ve ES2015 belirtimine göre, bir alt sınıf kurucusu çağrılıncaya thiskadar yararlanamıyor super(); ayrıca, ES2015 sınıfı yapıcıları super()alt sınıflarsa çağırmalıdırlar .

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Aksine:

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Bu mükemmel yığın taşma cevabına göre daha fazla detay

React.ComponentSınıfı genişleterek yaratılmayan bileşenlerin örneklerini görebilirsiniz, super()ancak bunların bir constructornedeninin olmadığını, dolayısıyla neden gerekli olmadığını fark edeceksiniz .

class MyOtherComponent extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>;
  }
}

Konuştuğum bazı geliştiricilerden gördüğüm bir karışıklık noktası, hiçbir yere sahip olmayan constructorve bu nedenle hiçbir super()yerde aramayan bileşenlerin hala yöntemde this.propsmevcut olmasıdır render(). Unutmayın ki bu kural ve bunun thisiçin constructorsadece bir bağlayıcı oluşturmak gerekir constructor.

Sınavı geçtikten sonra propsiçin super, sahne atanmış olsun this. Aşağıdaki senaryoya bir göz atın:

constructor(props) {
    super();
    console.log(this.props) //undefined
}

Ne zaman yaparsan yap:

constructor(props) {
    super(props);
    console.log(this.props) //props will get logged.
}

Gereğince kaynak kodu

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

Eğer geçmelidir propsEğer sahne var her zaman ve içine koymayın this.propselden.

Dan Abramov bu konuda bir makale yazdı:

Neden süper (sahne) yazıyoruz?

Ve işin özü, bu senaryodan kaçınmak için onu geçirme alışkanlığına sahip olmanın yararlı olması , dürüst olmak gerekirse, bunun gerçekleşme olasılığını görmüyorum:

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined 
  }
  // ...
}

super() üst yapıcıyı çağırmak için kullanılır.

super(props) geçecekti propsana kurucuya .

Örneğinizden super(props), React.Componentyapıcıyı içeriprops argüman olarak .

Daha fazla bilgi için super: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

Bir constructor()React bileşeninin içindeki fonksiyonu uygularken super()bir gerekliliktir. MyComponentBileşeninizin React.Componenttemel sınıftan işlevselliği genişlettiğini veya ödünç aldığını unutmayın .

Bu temel sınıf, constructor()React bileşenimizi bizim için kurmak için kendi içinde bazı kodlara sahip bir işleve sahiptir.

Biz tanımladığınızda constructor()bizim iç işlevini MyComponentsınıf, biz geçersiz kılma veya değiştirme, esasen vardır constructor()içinde olan işlevi React.Componentsınıfının, ama biz hala tüm bu kurulum kodu içeriden sağlamak için gerekenconstructor() işlevi hala çağrılır.

Bu yüzden React.Component' constructor()işlevinin çağrılmasını sağlamak için çağırıyoruz super(props). super(props)ebeveyn constructor()işlevine bir referans , hepsi bu.

Sınıf tabanlı bir bileşenin içinde bir işlev super(props)tanımladığımız her seferinde eklememiz gerekir constructor().

Eğer yapmazsak, aramamız gerektiğini söyleyen bir hata göreceğiz super(props).

Bu constructor()cismi tanımlamanın tüm nedeni devlet nesnesini başlatmaktır.

Bu yüzden devlet nesnesini başlatmak için süper çağrının altına şunu yazacağım:

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = {};
   }

  // React says we have to define render()
  render() {
    return <div>Hello world</div>;
  }
};

Bu nedenle constructor()yöntemimizi tanımladık , bir JavaScript nesnesi oluşturarak, ona bir özellik veya anahtar / değer çifti atayarak, bunun sonucunu atayarak durum nesnesini başlattık this.state. Şimdi elbette bu sadece bir örnek, bu yüzden gerçekten durum nesnesine bir anahtar / değer çifti atamadım, sadece boş bir nesne.

İşte yaptığım keman: jsfiddle.net . Sahne öğelerinin varsayılan olarak yapıcıda atanmadığını gösterir. Anladığım kadarıyla yöntemde değerlendiriliyorlar React.createElement. Dolayısıyla super(props)yalnızca üst sınıfının en yapıcı elle atayacaktır çağrılmalıdır propsiçin this.props. Sadece React.Componentaramayı super(props)uzatırsanız sahne ile hiçbir şey yapmazsınız. Belki React'ın sonraki sürümlerinde değişecektir.

Burada bunu yapıcıda elde edemeyiz, böylece tanımsız dönecek, ancak bunu yapıcı işlevinin dışında getirebileceğiz.

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error i.e return undefined
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Eğer super () kullanıyorsanız, yapıcı içindeki "this" değişkenini de getirebiliriz

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Yani super () kullandığımızda; bunu getirebileceğiz, ancak this.props yapıcıda tanımsız olacaktır. Ancak yapıcı dışında, bu.props tanımsız döndürmez.

Eğer süper (sahne) kullanırsak, bunu kullanabiliriz. Yapıcı içinde de değer değeri

Sophie Alpert'in Cevabı

Bunu kullanmak istiyorsanız. Yapıcıdakirops, pro'ları super'e geçirmeniz gerekir. Aksi takdirde, önemli değildir, çünkü React yapıcı çağrıldıktan hemen sonra örnek üzerinde .props değerini dışarıdan ayarlar.

Reaksiyon 16.6.3 sürümü için, durum öğesi adını başlatmak için süper (sahne) kullanıyoruz : this.props.name

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};