Reagieren: wie ein Vergleich der aktuellen Requisiten.Kinder mit neuen

Hallo,

ich bin Bauteil fungiert nur als wrapper für einige andere Inhalte erzeugt und verwendet Drittanbieter-Bibliothek. Diese Bibliothek arbeitet mit props.children der Komponente. So weit So gut, aber das thrird-party-Bibliothek ist etwas laggy, wenn Sie angewendet oder aktualisiert am element. Und weil der einzige Grund, zu aktualisieren, die diese Bibliothek ist, wenn props.children geändert, ich bin versucht zu verstehen, wie Sie zu vergleichen this.props.children und nextProps.children im shouldComponentUpdate. Ich dachte, dass PureRenderMixin sollte die Arbeit zu tun, aber für mich ist es nicht funktioniert. Komponente gerendert, auch wenn ich nur state.listName wie es im Beispiel unten.

<div>
  List name '{this.state.listName}'
  <br />
  <MyComponent>
    <ul>
      {listOfLi}
    </ul>
  </MyComponent>
</div>

Gibt es eine Möglichkeit, wie die Verwaltung den Vergleich von props.children oder eine andere option, wie man so etwas machen?
Vielen Dank für jede Hilfe!!!

InformationsquelleAutor Schovi | 2015-02-28
  1. 4

    Können Sie Gebrauch machen von Kind key prop, Reagieren, deutet darauf hin, dass arrays von Kindern gegeben werden sollte, um eindeutig zu identifizieren. Weil jedes Kind einen Schlüssel hat, kann man zuverlässig sagen, ob der Kinder hat sich verändert über prop-änderungen (das ist der ganze Punkt zu Tasten!).

    React.render(<App><Child key='1'/><Child key='2'/></App>, document.body)

    tun und die check-in-App-Komponente, die Sie möchten, überprüfen Sie vor jedem update, wenn die Kinder verändert

    shouldComponentUpdate(nextProps){
   var oldKeys = this.props.children.map( child => child.key);
   var newKeys = nextProps.children.map( child => child.key);

   //compare new and old keys to make sure they are the same
}

    als eine noch weitere Optimierung wissen wir, dass Kinder nie ändern wird als Ergebnis von einem Zustand zu ändern, so können wir tatsächlich tun, unser Vergleich, die in componentWillReceiveProps() und nur einige state-Eigenschaft, wie childrenHaveChanged

    • Elegante Lösung, aber nicht vollständig funktioniert für mich. Ich habe, um zu überprüfen inneren Komponenten zu. Ich habe versucht, die Funktion, die Durchlaufen alle Kinder und Ihre Kinder und erzeugen eine Art Bilanz aus (div, span ...), className und Stil. Eigenschaften, die Wirkung auf die dom-Stellung, grösse usw. Aber ich bin immer noch nicht zufrieden. Ich denke, ich werde zu tun haben, aktualisieren Sie manuell
    • Auch dies nicht für ein einzelnes root-child-element.
    • Diese Antwort ist ungenau. Der Clou ist verwendet durch Reagieren effizient zu verwalten-updates, verursacht durch die Manipulation einer Liste der Gegenstände, wie durch Einfügungen, Löschungen und neu angeordnet. Vergleich der Schlüsselwerte wird Ihnen sagen, nur wenn Sie Ihre Sammlung besteht aus der gleichen Anzahl von Objekten, mit denen wichtige Werte. Die Objekte selbst könnten ganz unterschiedliche Daten.
    • mit React16 Sie können wickeln Sie die listOfLi mit einem Fragment und setzen Sie einen Schlüssel und dann einfach vergleichen Fragment Schlüssel
    InformationsquelleAutor monastic-panic
Schreibe einen Kommentar