React setState auf Array von Objekten rerenders jede Komponente

Question

Ich verwende React, und Array von Objekten in einem Zustand zu aktualisieren. Die allgemeine Antwort im Internet war auf unter einen ähnlichen Ansatz zu verwenden:

const newState = this.state.elements.slice().concat({key: 'val'}); 
this.setState({elements: newState}); 

Aber das Problem, das ich mit diesem Problem begegnet, ist, dass, wenn diese Daten in eine Funktion machen binded und Komponenten, es neu macht jede Komponente.

Beispiel umfassen (Karte von lodash verwendet Index abgerufen werden, während Abbildung):

render() { 
    return (
    <div> 
     {map(this.state.elements, (el, index) => <Component key={`el-${index}`} el={el} />)} 
    </div> 
); 
} 

Auch wenn das Array, um die Zustandsänderungen ändert sich nicht und ändern Sie den Schlüssel des der Komponenten tut, jedes Mal, Es rendert und montiert die Komponente von Grund auf neu.

Gibt es eine mögliche Best-Practice-Lösung für dieses Problem?

Best, Y

Answer 1

Was ist passiert, dass, wenn Sie setState die virtuelle Dom Zustand diffs Reagieren Sie anrufen und Anrufe wieder machen. Rendert Aufrufe an eine Map-Funktion, die jede Komponente rendert. Jede Komponente wird weggeworfen und neu gezeichnet, weil sich die übergeordnete Komponente ändert.

Dies ist normales und erwartetes Verhalten von React. Es macht das, was du verlangst, du hast den Status geändert, es zeichnet die Komponenten neu.

Aber Ihre Frage ist, wie kann ich an die Liste der Komponenten meiner neuen Komponente ohne Neuzeichnen anhängen?

Ich denke, das Problem ist, dass Sie sich auf den eindeutigen Schlüssel von reagieren, um den Index des Array-Elements zu sein.

<Component key={`el-${index}`} 

Das wird für immer ändern, wenn Sie den Status aktualisieren. Was Sie tun müssen, ist etwas wie Name oder Zeichenfolge oder ein generierter Schlüssel oder etwas aus den Daten zu verwenden.

Sie verwenden nur map function index value und natürlich nach dem Hinzufügen eines neuen Elements zur Liste wird ein erneutes Rendern ausgelöst, da der Schlüsselwert für jede von ihnen geändert wurde.

, wenn Sie so etwas wie dies tun:

<Component key={`el-${item.id}`} 

Wo Artikel-ID ist eine Konstante, aber eindeutiger Wert, wie ein Primärschlüssel in einer Datenbanktabelle. Es würde nicht neu zeichnen. Der Schlüssel sollte einen deterministischen Wert haben.

Weitere Details finden Sie unter React Docs und dieser anderen post.