Einführung in PureComponent in React

Dieser Artikel stellt hauptsächlich die Einführung von PureComponent in React vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

React vermeidet wiederholtes Rendern

React erstellt und verwaltet eine innere Implementierung innerhalb der gerenderten Benutzeroberfläche, die von Komponenten zurückgegebene React-Elemente enthält. Diese Implementierung ermöglicht es React, unnötige Erstellung und Verknüpfung von DOM-Knoten zu vermeiden, da dies möglicherweise langsamer ist als die direkte Manipulation von JavaScript-Objekten. Es wird als „virtuelles DOM“ bezeichnet.

Wenn sich die Requisiten oder der Status einer Komponente ändern, bestimmt React, ob das tatsächliche DOM aktualisiert werden muss, indem es das neu zurückgegebene Element mit dem zuvor gerenderten Element vergleicht. Wenn sie nicht gleich sind, aktualisiert React das DOM.

In einigen Fällen kann Ihre Komponente die Geschwindigkeit verbessern, indem sie die Lebenszyklusfunktion „shouldComponentUpdate“ überschreibt, die ausgelöst wird, bevor der erneute Rendering-Prozess beginnt. Diese Funktion gibt standardmäßig true zurück, sodass React Aktualisierungen durchführen kann:

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

Beispiel

Wenn Sie möchten, dass die Komponente nur dann neu gerendert wird, wenn sich der Wert von props.color oder state.count ändert , können Sie wie folgt vorgehen. Setzen Sie shouldComponentUpdate wie folgt:

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

Im obigen Code prüft shouldComponentUpdate nur auf Änderungen in props.color und state.count. Wenn sich diese Werte nicht ändern, wird die Komponente nicht aktualisiert. Wenn Ihre Komponenten komplexer werden, können Sie ein ähnliches Muster verwenden, um einen „flachen Vergleich“ von Eigenschaften und Werten durchzuführen, um festzustellen, ob die Komponente aktualisiert werden muss. Dieses Muster ist so häufig, dass React ein Hilfsobjekt zur Implementierung dieser Logik bereitstellt – geerbt von React.PureComponent. Der folgende Code kann den gleichen Vorgang einfacher erreichen:

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

PureComponent

Prinzip

Wenn sich bei der Aktualisierung der Komponente weder die Requisiten noch der Status der Komponente ändern, die Render-Methode wird nicht ausgelöst, wodurch der Generierungs- und Vergleichsprozess von Virtual DOM entfällt, um den Zweck der Leistungsverbesserung zu erreichen. Konkret führt React automatisch einen flachen Vergleich für uns durch:

if (this._compositeType === CompositeTypes.PureClass) {
    shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);
}

Und was macht flachEqual? Es wird verglichen, ob die Länge von Object.keys (state | props) konsistent ist, ob jeder Schlüssel beides hat und ob es sich um eine Referenz handelt, dh nur der Wert der ersten Ebene wird verglichen, was in der Tat sehr flach ist. so tiefe Verschachtelung Die Daten können nicht verglichen werden.

Probleme

In den meisten Fällen können Sie React.PureComponent verwenden, ohne Ihr eigenes ShouldComponentUpdate schreiben zu müssen, das nur einen oberflächlichen Vergleich durchführt. Da beim flachen Vergleich jedoch der Fall einer Attribut- oder Zustands--Mutation ignoriert wird, können Sie ihn derzeit nicht verwenden.

class ListOfWords extends React.PureComponent {
  render() {
    return <p>{this.props.words.join(',')}</p>;
  }
}

class WordAdder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      words: ['marklar']
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This section is bad style and causes a bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

  render() {
    return (
      <p>
        <button onClick={this.handleClick} />
        <ListOfWords words={this.state.words} />
      </p>
    );
  }
}

In ListOfWords ist this.props.words eine Referenz auf seinen in WordAdder übergebenen Status. Obwohl es in der handleClick-Methode von WordAdder geändert wurde, bleibt seine Referenz für ListOfWords unverändert, was dazu führt, dass sie nicht aktualisiert wird.

Lösung

Wie im obigen Problem zu sehen ist, kann eine Referenz verwendet werden, wenn es sich bei den Daten um unveränderliche Daten handelt. Veränderbare Daten können jedoch nicht per Referenz an PureComponent übergeben werden. Einfach ausgedrückt: Wenn wir die von PureComponent in der äußeren Ebene verwendeten Daten ändern, sollten wir ihnen ein neues Objekt oder eine neue Referenz zuweisen, um sicherzustellen, dass sie erneut gerendert werden können. HandleClick im obigen Beispiel kann beispielsweise wie folgt geändert werden, um die korrekte Darstellung zu bestätigen:

handleClick() {
  this.setState(prevState => ({
    words: prevState.words.concat(['marklar'])
  }));
}

或者

handleClick() {
  this.setState(prevState => ({
    words: [...prevState.words, 'marklar'],
  }));
};

或者针对对象结构：

function updateColorMap(oldObj) {
  return Object.assign({}, oldObj, {key: new value});
}

immutable.js

Immutable.js ist eine weitere Möglichkeit, dieses Problem zu lösen. Es stellt unveränderliche, dauerhafte Sammlungen durch gemeinsame Strukturierung bereit:

• Unveränderlich: Einmal erstellt, kann eine Sammlung zu einem anderen Zeitpunkt nicht mehr geändert werden.

• Persistenz: Neue Sammlungen können unter Verwendung der ursprünglichen Sammlung und einer Mutation erstellt werden. Die ursprüngliche Sammlung bleibt verfügbar, nachdem die neue Sammlung erstellt wurde.

• Strukturfreigabe: Die neue Sammlung wird so weit wie möglich von der Struktur der ursprünglichen Sammlung erstellt, um Kopiervorgänge zu minimieren und die Leistung zu verbessern.

// 常见的js处理
const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

// 使用 immutable.js

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
x === y; // false

Zusammenfassung

PureComponent Was wirklich funktioniert, ist nur bei einigen reinen Anzeigekomponenten shallowEqual Sie werden im Grunde nicht bestehen können dieses Niveau. Um eine korrekte Wiedergabe während der Verwendung sicherzustellen, beachten Sie außerdem, dass props und state nicht dieselbe Referenz verwenden können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Der Unterschied zwischen AngularJs und dem häufig verwendeten Angular-Anweisungsschreiben

ztree erhält JSON über Ajax und prüft Scheckheft

Das obige ist der detaillierte Inhalt vonEinführung in PureComponent in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!