React State Array aktualisiert/rendert das gesamte Array, gibt es einen Workaround?

Question

Hier ist die Grundidee ...

constructor(props) { 
    super(props); 
    this.state = { 
     children: [{id:1},{id:2}], // HERE ARE THE TWO OBJECTS 
     style: {top: 0} 
    }; 
} 

die wir nun sagen, dass ich eine dieser beiden Objekte aktualisieren, aber die Objekte sind mit einer Reihe von Komponenten abgebildet.

<div className="thread"> 
    {this.state.children.map((child) => 
     <Post 
      key={child.id} 
      id={child.id} 
     /> 
    )} 
</div> 

Nun ... wenn ich eines dieser Objekte aktualisieren ...

changeID (id, newID) { // this is a different function, just an example 
    let temp = this.state.children; 
    for (let i = 0; i < temp.length; i++) { 
     if (temp[i].id === id) { 
      temp[i].id = newID; // <- update this 
     } 
    } 
    this.setState({ 
     children: temp // <- plug temp[] back as the updated state 
    }); 
} 

Ich werfe den neuen Zustand zurück in, aber es aktualisiert jedem der abgebildeten Objekte.

// on one change to one element 
id 1 POST UPDATED 
id 2 POST UPDATED 

1) Ist es erneut rendern EVERY Komponente (in dem zugeordneten Array) oder ist es intelligent genug, um zu sagen, dass die Zustandswerte als Requisiten auf dem zugeordneten Komponente übergeben gleich sind?

2) Ist es unglaublich teuer in der Verarbeitungsleistung, wenn dieses Array wesentlich länger ist?

3) Wenn ja, wie kann ich das besser machen? Konstruktive Kritik wird geschätzt.

Vielen Dank!

Answer 1

Dies ist, wie react funktioniert, wenn Sie jede state Variable ändert es die komplette Komponente und aktualisieren Sie die virtuelle dom nicht die eigentliche dom, dann wird es überprüfen Sie die diff zwischen diesen beiden und nur ändern, dass bestimmte Element neu rendern in Wirklichkeit dom.

Per DOC:

Reaktion stellt eine deklarative API, so dass Sie müssen nicht über genau kümmern, was bei jedem Update ändert.

React Only Updates What's Necessary:

React DOM das Element und seine Kinder in den vorhergehenden, und gilt nur das DOM aktualisiert notwendig, um das DOM zum gewünschten Zustand vergleicht.

DOM Elements Of The Same Type:

Wenn zwei DOM-Elemente desselben Typs Reagieren vergleicht, React schaut die Attribute von beiden, halten den gleichen zugrunde liegenden DOM-Knoten, und nur aktualisiert die geändertenen Attribute.

Beispiel:

<div className="before" title="stuff" /> 

<div className="after" title="stuff" /> 

durch diese beiden Elemente zu vergleichen, weiß, reagiert nur auf den auf dem darunterliegenden Klassennamen DOM Knotens zu ändern.

Use of Keys:

React unterstützt ein Schlüsselattribut. Wenn Kinder Schlüssel haben, verwendet React den Schlüssel , um die untergeordneten Elemente im ursprünglichen Baum mit den untergeordneten Elementen in der folgenden Baumstruktur zu verknüpfen.

Imp:

Keys identifizieren Reagieren Sie, welche Elemente geändert haben, hinzugefügt werden, oder sind entfernt. Schlüssel sollten den Elementen innerhalb des Arrays gegeben werden, um den Elementen eine stabile Identität zu geben. Schlüssel, die in Arrays verwendet werden, sollten unter ihren Geschwistern eindeutig sein. Sie müssen jedoch nicht global eindeutig sein.

Zum Beispiel:

<ul> 
    <li key="2015">Duke</li> 
    <li key="2016">Villanova</li> 
</ul> 

<ul> 
    <li key="2014">Connecticut</li> 
    <li key="2015">Duke</li> 
    <li key="2016">Villanova</li> 
</ul> 

Jetzt Reagieren weiß, dass das Element mit dem Schlüssel ‚2014‘ ist die neue, und die Elemente mit dem Schlüssel ‚2015‘ und ‚2016‘ hat gerade bewegt.

prüfen Sie diesen Artikel: How Virtual-DOM and diffing works in React