Wie behandeln Requisiten änderungen ohne Verwendung componentWillReceiveProps in Reagieren

Ich arbeite schon an einem Projekt, das codierte Reagieren. Ich habe eine Komponente, die ich umgesetzt habe viele Komponenten für meine Anforderungen. Viele von diesen wirken wie zusammengesetzte Komponente. Zum Beispiel, TextBox Komponente, die hat sein eigenes label, eigene Fehlermeldung Mechanismus und eigenen input-filter etc. Darüber hinaus wissen Sie, Komponenten die Requisiten zu verwalten sth.

Jedes mal aktualisieren, meine Komponente anzeigen (Rendern), benutze ich componentWillReceiveProps und ich Vergleiche die Requisiten änderungen.

Aber jedesmal, wenn die Umsetzung der componentWillReceiveProps Methode ist so abstoßend.

Gibt es eine Möglichkeit, pass-Schrauben von oben nach unten, ohne die Verwendung componentWillReceiveProps. Ich will nicht vergleichen, die Requisiten, die änderungen manuell. Gibt es eine Möglichkeit, um es automatisch zu tun.

Wenn ich die props Eltern, ich möchte zum aktualisieren aller Ansichten ändern Sie einfach den prop einige Werte von oben nach unten.

Bin ich nicht reagieren-Experte und performance ist nicht meine erste Zweck auch!

Eine weitere Sache, dass die Antwort nicht use Redux!

Warte ich auf Eure kreativen Ansätze und hilfreiche Ideen.

Es ist nicht klar, was das Problem ist - Sie müssen nur umsetzen componentWillReceiveProps wenn es etwas bestimmtes Sie wollen in Reaktion auf die (potentiell) aktualisiert Requisiten.
Wenn ich die props in meinem übergeordneten container, möchte ich zum aktualisieren aller Ansichten von oben nach unten.
Sie nicht brauchen, zu implementieren componentWillReceiveProps um Ihren reaktiven Komponenten. Ich verstehe nicht, Ihre Frage?
Dass die Vermehrung erfolgt durch Reagieren von selbst.
Ich werde zu überprüfen, meine Komponenten wieder. Ich erwarte, dass, wie Sie sagte, aber etwas seltsam und es funktioniert so nicht.

InformationsquelleAutor Tugrul | 2017-04-12

  1. 12

    Ohne dass der code für die Sache, die Sie gerade arbeiten, ich kann etwas fehlen, was Sie tun...

    Als andere, die kommentiert haben, Reagieren, re-Rendern der Komponente, wenn neue Requisiten zur Verfügung gestellt, unabhängig davon, ob oder nicht Sie umzusetzen componentWillReceiveProps -- der einzige Grund, es zu implementieren ist, zu tun, irgendeine Art von konkreter Vergleich oder einen Status auf der Basis neuer prop Werte.

    Vom Reagieren docs (Hervorhebung von mir):

    componentWillReceiveProps() wird aufgerufen, bevor eine montierte Komponente erhält neue Requisiten. Wenn Sie müssen die Aktualisierung der Staat in Reaktion auf die prop-änderungen (z.B. reset), kannst du vergleichen.Requisiten und nextProps und führen Sie die Zustandsübergänge.setState() in dieser Methode.

    Beachten Sie, dass Reagieren, kann diese Methode aufrufen, auch wenn die Requisiten nicht geändert haben, so stellen Sie sicher, vergleichen Sie die aktuelle und die nächsten Werte, wenn Sie nur wollen, zu behandeln änderungen. Dies kann auftreten, wenn die parent-Komponente bewirkt, dass die Komponente neu Rendern.

    In anderen Worten, wenn Sie eine Komponente wie:

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

    Dass intern geht prop änderungen an ein paar untergeordnete Komponenten wie:

    class TextBox extends React.Component {

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

}

    Dann jedes mal neue props sind an <TextBox>, <Title> und <Body> erhalten auch neu gerendert mit Ihrem neuen text Requisiten, und es gibt keinen Grund zu verwenden componentWillReceiveProps wenn Sie nur auf der Suche zu aktualisieren, mit prop änderungen. Reagieren, sehen automatisch die änderungen und neu Rendern. Und Reagieren Griffe diff und sollte ziemlich effizient re-Rendern nur Dinge, die sich geändert haben.

    Allerdings, wenn Sie einen eigenen Staat Wert, der eingestellt werden muss, in Reaktion auf die Requisiten, zum Beispiel, wenn Sie zeigen wollten einen "geänderten" Zustand (oder was auch immer) auf die Komponente, wenn die neuen props unterschiedlich sind, dann könnte man 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, zu verhindern, re-Rendern in Fällen, in denen es unnötig für die Leistung tun, als Andrej schlägt, und verwenden Sie shouldComponentUpdate: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

    TLDR; es sei denn, du bist Einstellung component Zustand von Requisiten, gibt es wahrscheinlich keine Notwendigkeit für neue Requisiten durch componentWillReceiveProps

    UPDATE Feb 2018: in einem zukünftigen release Reagieren wird abwertend componentWillReceiveProps zu Gunsten der neuen getDerivedStateFromProps mehr info hier: https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b

    InformationsquelleAutor Benjamin Robinson

  2. 2

    Gibt es einige Vorschläge:

    • Nicht kopieren Requisiten in Staat, in componentWillReceiveProps - Rendern Sie einfach direkt aus this.props
    • Wenn die Komponente Ihre Leistungsfähigkeit optimieren (und nur wenn es ein problem mit der performance):

    Den Allgemeinen Ansatz, wie die Entwicklung der text-box-ähnliche Komponenten zu halten, ist es staatenlos.Komponente rendert Requisiten direkt, und benachrichtigt die parent-Komponente über änderungen, die es nicht kümmert sich um die Verwaltung Wert.

    Hoffe das hilft

    InformationsquelleAutor Andrii Muzalevskyi

  3. 1

    Bitte beachten pureComponent die durch defualt implementiert die shouldComponentUpdate im inneren die flache entspricht wird für den Vergleich zwischen vorherigen und nächsten

    versuchen Sie folgenden codes:

    class MyComponent extends PureComponent {...}

    InformationsquelleAutor Deng Zhebin

Schreibe einen Kommentar