2016-07-22 3 views
3

Viele Zeit, die wir Requisiten im Konstruktor senden, aber wir verwenden nie this.props irgendwo im Konstruktor, also warum müssen übergeben, und wann tun müssen.Wann muss ich eine Stütze zum Konstruktor einer Reaktionskomponente mit Super (Requisiten) übergeben?

class App extends React.Component { 

     constructor(props) { 
     super(props); // When do we need to send props to the constructor 
     this.state = { 
      data: 'Initial data...' 
     } 
     this.updateState = this.updateState.bind(this); 
     }; 

     updateState(e) { 
      this.setState({data: e.target.value}); 
     } 

     render() { 
     return (
      <div> 
      <input type = "text" value = {this.state.data} 
       onChange = {this.updateState} /> 
      <h4>{this.state.data}</h4> 
      </div> 
     ); 
     } 

    } 

Antwort

5

Props sind nicht wirklich von dem React.Component Konstruktor benötigt. Sie können diesen Code schreiben und alles funktioniert gut:

constructor() { 
    super(); 
    this.state = { 
     data: 'Initial data...' 
    }; 
    this.updateState = this.updateState.bind(this); 
    }; 

Dies liegt daran, der Konstruktor Weg ist nicht wirklich, wo Ihre Requisiten im Standard zugewiesen bekommen React Lebenszyklus. React.Component verwendet nicht wirklich Requisiten und setzt nur this.props für den Fall, dass Ihr Konstruktor es verwenden muss. Aber in der Regel sollten Sie nicht props in Ihrem Konstruktor trotzdem verwenden werden, da mit props to initialize your state is an anti-pattern

Wenn Sie noch babel konfigurieren, Sie brauchen nicht einmal einen Konstruktor für Sachen wie diese:

class MyComponent extends React.Component { 
    state = { data: "initial data" }; 

    updateState = (arg1, arg2) => { ... }; 

    // instead of: 
    // updateState(arg1, arg2) { ... } 

} 
+0

ersetzt Konstruktor () um den Anfangszustand mit dem Ausdruck simple state = {} festzulegen, der bei der Verwendung von ES2015 als eine gute Vorgehensweise angesehen wird? – jkulak