web-dev-qa-db-fra.com

Le constructeur a-t-il toujours besoin de React avec la liaison automatique et les initialiseurs de propriétés?

Je refacture un composant React basé sur la classe es6 qui utilise le constructeur normal, puis lie les méthodes et définit les attributs/état dans ce constructeur. Quelque chose comme ça:

class MySpecialComponent extends React.Component {
  constructor(props) {
   super(props)
   this.state = { thing: true }
   this.myMethod = this.myMethod.bind(this)
   this.myAttribute = { amazing: false }
  }

  myMethod(e) {
   this.setState({ thing: e.target.value })
  }
}

Je souhaite refactoriser ceci afin que je lie automatiquement les fonctions et utilise les initialiseurs de propriétés pour l'état et les attributs. Maintenant, mon code ressemble à ceci:

class MySpecialComponent extends React.Component {
  state = { thing: true }
  myAttribute = { amazing: false }


  myMethod = (e) => {
   this.setState({ thing: e.target.value })
  }
}

Ma question est la suivante: ai-je toujours besoin du constructeur? Ou les accessoires sont-ils également autobound? Je me serais attendu à avoir toujours besoin du constructeur et de la fonction super(props), mais mon code semble fonctionner et je suis confus.

Merci

reactjsecmascript-6es6-classecmascript-next
6
Max Millington

Vous n'avez pas besoin d'un constructeur explicitement défini, sauf si vous devez référencer la variable props dans votre objet d'état initial.

7
user8826588

À ma connaissance, vous n'avez pas du tout besoin de saisir un constructeur lorsque vous utilisez class properties (comme dans votre deuxième exemple de code). La réponse acceptée indique que vous en avez besoin si vous "devez référencer les accessoires dans votre objet d'état initial", mais si vous utilisez lesdites propriétés de classe, vous utilisez probablement Babel pour le transpiler, auquel cas un constructeur. est utilisé, cela se fait en coulisse. Pour cette raison, vous n'avez pas besoin d'ajouter un constructeur vous-même, même si vous utilisez des accessoires en état.

Voir cet article pour de meilleurs exemples et une meilleure explication.

3
Christian Jensen

Vous n'avez pas besoin de définir explicitement un constructeur, puis de faire super (accessoires). Vous pouvez accéder aux accessoires comme dans l'exemple ci-dessous. c'est-à-dire 'prop1'

class MySpecialComponent extends React.Component {
    state = { 
    thing: true ,
   prop1:this.props.prop1
  }
  myAttribute = { amazing: false }


 myMethod = (e) => {
  this.setState({ thing: e.target.value })
}


  render(){
  console.log(this.state.prop1);
   return(
       <div>Hi</div>
   );

   }
 }


 ReactDOM.render(<MySpecialComponent prop1={1}/> , mountNode);
1
Dhana