Wie einzigartig sollte ein React Component Key sein?

Question

Das ist eine schnelle Frage: In welchem ​​Umfang müssen die Kinderschlüssel eindeutig sein? Ist das nur die Elternkomponente oder die ganze App?

Wenn letzteres zutrifft, bedeutet das, dass der diff diff-Algorithmus ein Element behält, wenn es sich über die übergeordneten Komponenten bewegt?

Answer 1

Einzigartig innerhalb seiner Geschwister, also das Niveau direkt unter seinem Elternteil. Die untergeordneten Elemente der übergeordneten Komponente können jedoch denselben Schlüssel erneut verwenden, da react schließlich den vollständigen Schlüssel aus dem Schlüssel der aktuellen Komponente und aller seiner Vorfahren zusammensetzt. Das folgende Beispiel enthält nur automatisch generierte Schlüssel. Wenn Sie jedoch einen eigenen Schlüssel angeben, wird dieser stattdessen verwendet.

Sie können die erstellten IDs in Chrome-Entwicklertools (Registerkarte Elemente) sehen.

Answer 2

Ja, sieht aus wie es ..., wenn Sie wieder Eltern es, wird es eine andere reactid geben (z. B. http://webcloud.se/react-sortable/nested.html)

und aushängen/Wieder wieder montieren. ...

http://jsfiddle.net/46x0j6uq/1/

,componentWillUnmount: function() { 
//console.log("unmounted:", this.props); 
clearInterval(this.state.intervalId); 
clearTimeout(this.state.timeoutId); 
} 
,componentDidMount: function(){ 
    // console.log("mounted:", this.props); 
    this.state.intervalId = setInterval(this.incrementCount, 1000); 
this.state.timeoutId = setTimeout(this.setColorToBlack, 300); 
} 

Also besser nicht Zustand in der Ansicht Komponente selbst zu speichern, da sie sich selbst zurück könnte. Die obige Geige ist nur eine Demo, um einen Punkt zu beweisen.

Weitere Links zum Thema: Using keys to identify nested components in React.js

Ich wollte React etwas prüfen scoped/verschachtelte Schlüsselstaaten über das gleiche Niveau hatte, aber ich denke, die Leistung von Aushängen/Wiedermontage wieder sollte hoffentlich nicht allzu schädlich .