Wird reagieren alle alten Domänen in der Komponente zerstören, wenn der Zustand geändert wird?

Question

Ich habe eine Komponente, die eine Liste von Elementen, wie diese hat:

loadMore() { 
    const len = this.state.itemList.length; 
    if (len < 1000) { 

     const newItems = Array.from({length:10}, (v,i) => "item-" + (i+len)); 
     this.setState({itemList: this.state.itemList.concat(newItems)}); 
    } else { 
     alert("no more"); 
    } 
} 

render() { 
    return (
     <div> 
     <ul> 
      this.state.itemList.map((item, i) => 
       <li key={i}>item</li> 
      ) 
     </ul> 
     <a onClick={this.loadMore.bind(this)}>Loading</a> 
     </div> 
    ) 
} 

Also, wenn ich Loading klicken, alle alten doms reagieren entfernen Sie sie dann neu erstellen?

In der Tat, ich füge nur Elemente, nicht ersetzen sie, also wenn reagieren dies tun, ist die Leistung nicht so gut, Wie kann ich das vermeiden?

Answer 1

Große Frage.

Reagieren wird versuchen, das DOM wann immer möglich zu verwenden.

In Ihrem Beispiel verwenden Sie key, die in jeder Schleife wiederholen, weil es Index-basiert ist. Es wird in jeder Schleife von 0 bis n gehen. Wenn der Schlüssel wiederholt wird, wird das DOM wiederverwendet und der Inhalt aktualisiert.

Diese beiden Dokumente können Ihnen helfen, mehr darüber zu erfahren:

• Reconciliation
• Dynamic Children

Answer 2

Wie in den reagieren docs erwähnt:

ReactDOM.render () steuert den Inhalt des Containerknotens, den Sie übergeben in. Alle vorhandenen DOM-Elemente werden beim ersten Aufruf ersetzt. Spätere Aufrufe verwenden React's DOM Diffing-Algorithmus für effiziente Updates.

ReactDOM.render() ändert nicht den Container-Knoten (ändert nur die untergeordneten Elemente des Containers). In Zukunft kann es möglich sein, eine Komponente in einen vorhandenen DOM-Knoten einzufügen, ohne die vorhandenen untergeordneten Elemente zu überschreiben.

So ist klar, dass nicht reagiert alle alten Dom entfernen und neu erstellen sie eher einen DOM machen zwischen der Gegenwart auf die Unterschiede basieren und den vorherigen DOM

In SieFormal Ihnen die Groß- mit der Taste für die <li> Komponenten reaktiv prüft also auf die Schlüssel und wo immer es übereinstimmt, behält es den Teil des DOM und Updates für die neuen Einträge bei.

Resource

Answer 3

Wenn Sie Ihren Zustand dann ändern wird es nennen Methode der Komponente machen. Dann vergleicht es das neue DOM, das von der render-Methode erstellt wurde, und das bereits gerenderte DOM der geänderten Komponente und ersetzt/ersetzt/entfernt nur das geänderte Teil mithilfe des Diffing-Algorithmus.