webentwicklung-frage-antwort-db.com.de

Umgang mit Requisitenänderungen ohne Verwendung von componentWillReceiveProps in React

Ich habe an einem Projekt gearbeitet, das mit React codiert ist. Ich habe einen Komponentensatz, der viele Komponenten für meine eigenen Anforderungen implementiert hat. Viele davon wirken wie eine zusammengesetzte Komponente. TextBox component, die hat beispielsweise ein eigenes Label, einen eigenen Fehlermeldungsmechanismus und einen eigenen Eingabefilter usw. Außerdem verfügen Komponenten über Requisiten, um etw. Zu verwalten. 

Jedes Mal, um meine Komponentensicht (Render) zu aktualisieren, verwende ich componentWillReceiveProps und vergleiche die Requisitenänderungen.

Die Implementierung der componentWillReceiveProps-Methode ist jedoch immer abstoßend. 

Gibt es eine Möglichkeit, Requisiten von oben nach unten zu übergeben, ohne componentWillReceiveProps zu verwenden. Ich möchte die Requisitenänderungen nicht manuell vergleichen. Gibt es eine Möglichkeit, dies automatisch zu tun?.

Wenn ich die Requisiten in einem übergeordneten Element ändere, möchte ich alle Ansichten aktualisieren, indem ich einige der Propellerwerte von oben nach unten verändere.

Ich bin kein Reaktionsexperte und Leistung ist auch nicht mein erster Zweck!

Noch eine Sache, dass die Antwort nicht use Redux ist!

Ich warte auf Ihre kreativen Ansätze und hilfreichen Ideen.

3
Tugrul

Ohne den Code für die bestimmte Sache zu sehen, an der Sie gerade arbeiten, fehlt mir möglicherweise etwas an dem, was Sie tun ...

Wie andere kommentiert haben, wird React Ihre Komponente erneut darstellen, wenn neue Requisiten bereitgestellt werden, unabhängig davon, ob Sie componentWillReceiveProps implementieren oder nicht. Der einzige Grund für die Implementierung ist, einen bestimmten Vergleich durchzuführen oder einen Status basierend auf neuen Requisiten festzulegen Werte. 

Aus den React-Dokumenten (Hervorhebung meines):

componentWillReceiveProps () wird aufgerufen, bevor eine bereitgestellte Komponente neue Requisiten erhält. Wenn Sie den Status als Reaktion auf Prop-Änderungen aktualisieren müssen (z. B. um sie zurückzusetzen), können Sie this.props und nextProps vergleichen und Zustandsübergänge mit this.setState () in dieser Methode durchführen.

Beachten Sie, dass React diese Methode möglicherweise auch dann aufrufen kann, wenn sich die Requisiten nicht geändert haben. Vergleichen Sie daher die aktuellen und nächsten Werte, wenn Sie nur mit Änderungen umgehen möchten. Dies kann vorkommen, wenn die übergeordnete Komponente dazu führt, dass Ihre Komponente erneut gerendert wird.

Mit anderen Worten, wenn Sie eine Komponente wie: 

<TextBox title={"Foo"} content={"Bar"} />

Dadurch werden die Propelleränderungen intern an einige untergeordnete Komponenten weitergegeben, z.

class TextBox extends React.Component {

  render() {
    return (
      <div className={'text-box'}>
        <Title text={this.props.title} />
        <Body text={this.props.content} />
      </div>
    );
  }

}

Jedes Mal, wenn neue Requisiten an <TextBox> übergeben werden, werden auch <Title> und <Body> mit ihren neuen text-Requisiten erneut gerendert. Es gibt keinen Grund, componentWillReceiveProps zu verwenden, wenn Sie nur die Propelleränderungen aktualisieren möchten. React wird die Änderungen automatisch sehen und erneut rendern. Und React verarbeitet Unterschiede und sollte nur Dinge, die sich geändert haben, ziemlich effizient wiedergeben.

Wenn Sie jedoch einen separaten Zustandswert haben, der als Reaktion auf Requisiten festgelegt werden muss, wenn Sie beispielsweise einen "geänderten" Status (oder einen anderen Status) für die Komponente anzeigen möchten, falls die neuen Requisiten unterschiedlich sind, können Sie dies implementieren componentWillReceiveProps, wie:

class TextBox extends React.Component {

  componentWillReceiveProps(nextProps) {
    if (this.props.content !== nextProps.content) {
      this.setState({changed: true});
    }
  }

  render() {

    const changed = this.state.changed ? 'changed' : 'unchanged';

    return (
      <div className={`text-box ${changed}`}>
        <Title text={this.props.title} />
        <Body text={this.props.content} />
      </div>
    );
  }

}

Wenn Sie versuchen, das erneute Rendern in Fällen zu verhindern, in denen dies für die Leistung nicht erforderlich ist, tun Sie, wie Andrey vorschlägt, und verwenden Sie shouldComponentUpdate: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

TLDR; Wenn Sie nicht den Komponentenstatus von Requisiten festlegen, müssen Sie wahrscheinlich keine neuen Requisiten über componentWillReceivePropsausführen.

UPDATE Februar 2018: In einer zukünftigen Version wird React componentWillReceiveProps zugunsten der neuen getDerivedStateFromProps fallen, weitere Informationen hier: https://medium.com/@baphemot/whats-new-in- reag-16-3-d2c9b7b6193b

12

Es gibt einige Vorschläge:

  • Kopiere keine Requisiten in componentWillReceiveProps - nur direkt aus this.props rendern
  • Wenn Ihre Komponente eine Leistungsoptimierung benötigt (und only , wenn ein Leistungsproblem vorliegt):

Der allgemeine Ansatz, wie man Textfeld-ähnliche Komponenten entwickelt, besteht darin, sie stateless zu halten. Component stellt Requisiten direkt dar und benachrichtigt übergeordnete Komponenten über Änderungen. Es ist nicht wichtig, den Wert zu verwalten.

Hoffe das wird helfen

2

Bitte beachten Sie pureComponentname__, der durch Definition den shouldComponentUpdateimplementiert, in dem flache Gleichungen für den Vergleich zwischen vorherigem und nächstem verwendet werden

versuchen Sie folgende Codes:

class MyComponent extends PureComponent {...}

1
Deng Zhebin