Verwendung der Lebenszyklusmethode getDerivedStateFromProps im Gegensatz zu componentWillReceiveProps

Es sieht so aus, componentWillReceivePropsals würde es in den kommenden Releases zugunsten einer neuen Lebenszyklusmethode vollständig auslaufen getDerivedStateFromProps: statisch getDerivedStateFromProps () .

Nach der Inspektion sieht es so aus, als ob Sie jetzt keinen direkten Vergleich zwischen this.propsund durchführen können nextProps, wie Sie es können componentWillReceiveProps. Gibt es einen Weg daran vorbei?

Außerdem wird jetzt ein Objekt zurückgegeben. Kann ich zu Recht davon ausgehen, dass der Rückgabewert im Wesentlichen ist this.setState?

Unten ist ein Beispiel, das ich online gefunden habe: Status abgeleitet von Requisiten / Status .

Vor

class ExampleComponent extends React.Component {
  state = {
    derivedData: computeDerivedState(this.props)
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.someValue !== nextProps.someValue) {
      this.setState({
        derivedData: computeDerivedState(nextProps)
      });
    }
  }
}

Nach dem

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someMirroredValue !== nextProps.someValue) {
      return {
        derivedData: computeDerivedState(nextProps),
        someMirroredValue: nextProps.someValue
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

Informationen zum Entfernen von componentWillReceiveProps: Sie sollten in der Lage sein, die Verwendung mit einer Kombination aus getDerivedStateFromPropsund zu handhaben. Weitere Informationen findencomponentDidUpdate Sie im React-Blogbeitrag, z. B. zu Migrationen. Und ja, das von zurückgegebene Objekt getDerivedStateFromPropsaktualisiert den Status ähnlich wie ein übergebenes Objekt setState.

Wenn Sie den alten Wert einer Requisite wirklich benötigen, können Sie ihn jederzeit in Ihrem Status mit folgendem Cache zwischenspeichern:

state = {
  cachedSomeProp: null
  // ... rest of initial state
};

static getDerivedStateFromProps(nextProps, prevState) {
  // do things with nextProps.someProp and prevState.cachedSomeProp
  return {
    cachedSomeProp: nextProps.someProp,
    // ... other derived state properties
  };
}

Alles, was den Zustand nicht beeinflusst, kann eingegeben werden componentDidUpdate, und es gibt sogar Dinge getSnapshotBeforeUpdatefür sehr niedrige Level.

UPDATE: Um ein Gefühl für die neuen (und alten) Lebenszyklusmethoden zu bekommen, kann das Paket React-Lifecycle-Visualizer hilfreich sein.

Wie wir vor kurzem auf dem Blog Reagieren geschrieben , in der überwiegenden Mehrzahl der Fälle die Sie nicht brauchen getDerivedStateFromPropsüberhaupt .

Wenn Sie nur einige abgeleitete Daten berechnen möchten, gehen Sie wie folgt vor:

1. Mach es gleich drinnen render
2. Oder, wenn eine Neuberechnung teuer ist, verwenden Sie einen Memoization Helper wie memoize-one.

Hier ist das einfachste "Nach" -Beispiel:

import memoize from "memoize-one";

class ExampleComponent extends React.Component {
  getDerivedData = memoize(computeDerivedState);

  render() {
    const derivedData = this.getDerivedData(this.props.someValue);
    // ...
  }
}

In diesem Abschnitt des Blogposts erfahren Sie mehr.

Wie von Dan Abramov erwähnt

Mach es direkt im Rendering

Wir verwenden diesen Ansatz tatsächlich mit Memoise One für jede Art von Proxy-Requisiten für Zustandsberechnungen.

Unser Code sieht so aus

// ./decorators/memoized.js  
import memoizeOne from 'memoize-one';

export function memoized(target, key, descriptor) {
  descriptor.value = memoizeOne(descriptor.value);
  return descriptor;
}

// ./components/exampleComponent.js
import React from 'react';
import { memoized } from 'src/decorators';

class ExampleComponent extends React.Component {
  buildValuesFromProps() {
    const {
      watchedProp1,
      watchedProp2,
      watchedProp3,
      watchedProp4,
      watchedProp5,
    } = this.props
    return {
      value1: buildValue1(watchedProp1, watchedProp2),
      value2: buildValue2(watchedProp1, watchedProp3, watchedProp5),
      value3: buildValue3(watchedProp3, watchedProp4, watchedProp5),
    }
  }

  @memoized
  buildValue1(watchedProp1, watchedProp2) {
    return ...;
  }

  @memoized
  buildValue2(watchedProp1, watchedProp3, watchedProp5) {
    return ...;
  }

  @memoized
  buildValue3(watchedProp3, watchedProp4, watchedProp5) {
    return ...;
  }

  render() {
    const {
      value1,
      value2,
      value3
    } = this.buildValuesFromProps();

    return (
      <div>
        <Component1 value={value1}>
        <Component2 value={value2}>
        <Component3 value={value3}>
      </div>
    );
  }
}

Die Vorteile davon sind, dass Sie nicht Tonnen von Vergleichs-Boilerplates im Inneren codieren müssen getDerivedStateFromPropsoder die componentWillReceivePropsInitialisierung durch Kopieren und Einfügen in einem Konstruktor überspringen können.

HINWEIS:

Dieser Ansatz wird nur verwendet, um die Requisiten auf den Status zu übertragen. Wenn Sie über eine innere Statuslogik verfügen, muss diese weiterhin in den Komponentenlebenszyklen behandelt werden.