Destructing Props mehrmals in React Komponente?

stimmen
1

Als ich mich mit dem gleichen finde propsin einem react componentmehrfach (zB innerhalb von verschiedenen Methoden auf dem Bauteil) ich am Ende Destrukturierung des propsmehrmals.

Ist die schlechte Praxis? Soll ich das sein zuweisen , propdie mehrfach auf die Instanz destrukturiert wird selbst statt (so etwas wie this.propOfInterest = this.props.propOfInterestin der constructor()?

class MyComponent extends React.Component {
  myMethod() {
    const {
      propOfInterest,
    } = this.props

    // do something with propOfInterest
  }

  render() {
    const {
      propOfInterest,
    } = this.props

    return (
      <div className={propOfInterest}>
      </div>
    )
  }
}
Veröffentlicht am 07/11/2018 um 23:42
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
2

Destrukturierung ist keine schlechte Praxis, und es wird die Leistung in keiner Weise verringern. Unter der Haube, ob Sie denaturiert, oder nicht, wird Babel Ihren Code in derselben Anweisung transpile vor bündeln.

Also im Grunde genommen,

const { propOfInterest } = this.props;

und

const propOfInterest = this.props.propOfInterest;

wird auf die gleiche Art und Weise gebündelt werden.

Wenn Sie diese beiden Zeilen in der kopieren Online Babel Transpiler , werden Sie diese Ergebnisse erhalten.

const { propOfInterest } = props;
const propInterest = props.propInterest;

wird darin enden, dass

var _props = props,
    propOfInterest = _props.propOfInterest;
var propInterest = props.propInterest;

Im Gespräch über die Leistung, sobald Sie verwenden this, wird es eine Instanzvariable. Und idealerweise Instanzvariablen sind Performance weise langsamer nach Nicholas Zakas in seinem Buch High Performance JavaScript .

Wenn es um die Javascript-Daten geht, gibt es so ziemlich vier Möglichkeiten, um darauf zuzugreifen: Literalwerte, Variablen, Objekteigenschaften und Elemente Array. Wenn es um die Optimierung zu denken, Literalwerte und Variablen durchführen etwa gleich, und sind deutlich schneller als Objekteigenschaften und Array-Elemente.

Also, wenn Sie eine Objekteigenschaft oder Array-Element mehrere Male verweisen, können Sie eine Leistungssteigerung erhalten, indem eine Variable zu definieren. (Dies gilt sowohl für das Lesen und Schreiben von Daten.)

Als Fazit aus der Sicht des Autors, ist Destrukturierung viel schneller als die Werte in einer Instanzvariablen speichern.

Wenn wir ein schaffen könnten jsperf Beispiel werden wir sicher wissen.

Beantwortet am 08/11/2018 um 00:26
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more