Redux: update nur ein Element in einer verschachtelten Liste

Question

Ich habe die Komponenten folgende Struktur:

<List> 

    <Item> 
     <DeepList> 

      <DeepItem> 
       <input type="text" /> 
      <DeepItem> 

      <DeepItem> 
       <input type="text" /> 
      <DeepItem> 

      // [More DeepItem...] 
     </DeepList> 
    </Item> 

    <Item> 
     <DeepList> 

      <DeepItem> 
       <input type="text" /> 
      <DeepItem> 

      <DeepItem> 
       <input type="text" /> 
      <DeepItem> 

      // [More DeepItem...] 
     </DeepList> 
    </Item> 

    // [More Item...] 

</List> 

wählte ich meine Daten zu glätten, wie here vorgeschlagen, so sieht es wie folgt aus:

items: { 
    "1": { 
     id: 1, 
     text: "texte item 1...." 
     deepItems: [1, 2] 
    }, 
    // [...] 
}, 

deepItems: { 
    "1": { 
     id: 1, 
     text: "texte deep item 1...." 
    }, 
    // [...] 
} 

Die Die DeepList-Komponente ist mit der Eigenschaft "deepItems" des Geschäfts verbunden.

const DeepList = React.createClass({ 

getDeepItems: function() { 

    return this.props.specificDeepItems 
     .map(id => { 
      return this.props.deepItems[id] 
     }) 
     .map((item, idx) => { 
      return (
       <DeepItem 
        text = { item.text } 
        id  = { item.id } 
        key  = { idx } 
       /> 
      ); 
     }); 
}, 

render: function() { 

    return (
     <div> 
      { this.getDeepItems() } 
     </div> 
    ); 
} 
}); 

const mapStateToProps = function(store) { 

    return { 
     deepItems: store.deepItems, 
    }; 
}; 

export default connect(mapStateToProps)(SimpleTestDeepList); 

Die specificDeepItems Eigenschaft wird durch die Eltern es weitergegeben (Punkt), dann ist es der deepItems Bereich des Items.

Der Wert der Eingabe ist das Textfeld des Deep Items. Wenn ich in diese Eingabe tippe, gibt eine "change" -Funktion eine Aktion aus, um das Textfeld des entsprechenden DeepItems im Store zu aktualisieren.

Dies funktioniert aber jedes Mal, wenn ich ein Zeichen tippe, werden alle DeepItems nicht nur neu gerendert und nicht nur die, die in demselben Item verschachtelt sind!

Ist das das erwartete Verhalten oder mache ich hier etwas falsch? Dies fühlt sich nicht leistungsmäßig richtig an.

Danke!

Answer 1

Here können Sie ausführlich über Ihre Frage lesen. Ich werde versuchen, Ihnen eine schnelle Antwort zu geben:

Es ist in Ordnung, dass alle Komponenten neu gerendert werden. Ja, Operationen mit DOM sind langsam, aber React verwendet virtuelles DOM. Deshalb bestimmt React, wenn Requisiten oder Status einer Komponente geändert werden, ob ein aktuelles DOM-Update erforderlich ist, indem ein neues virtuelles DOM erstellt und mit dem alten verglichen wird. Nur in dem Fall, dass sie nicht gleich sind, wird React das DOM abstimmen und so wenig Mutationen wie möglich anwenden.

Answer 2

hier ist eine schnelle Sache, die Sie tun können, und das wird auch die Leistung verbessern,

1. Listenelement-Komponente erstellen und jedes Element durch sie machen.
2. Hinzufügen sollte Komponente Update in Listenelement Komponente, so wird es nur aktualisiert, wenn Requisiten geändert werden.