Generiert Komponenten in render effizient?

Question

In einer einfachen Komponente habe ich ein Array von untergeordneten Komponenten. Im Eltern state (unter anderem), halte ich ein Array von Objekten und in der render Funktion konstruieren ich die untergeordneten Komponenten wie:

const children = []; 
let i = 1; 
for(let child of this.state.children){ 
    children.push(<Decoration key={i++} {...child} />); 
} 
return (
    <div>{children} {this.state.something_else}</div> 
); 

Das Problem ist, dass, wenn ich einige andere Zustandswerte ändern, die Funktion machen der Kind Komponente wird aufgerufen, was seltsam ist, da ich nichts in der children Array ändern. Irgendwelche Ideen? Ist dieser Code ineffizient?

Answer 1

Standardmäßig Reagieren Sie alle Komponenten und Unterkomponenten jedes Mal erneut, wenn setState aufgerufen wird.

Es gibt eine Methode boolean sollteComponentUpdate (Objekt nextProps, Objekt nextState), jede Komponente hat diese Methode und ihre verantwortlich zu bestimmen "sollte Komponente update (run render function)?" Jedes Mal, wenn Sie den Status ändern oder neue Props von der übergeordneten Komponente übergeben.

Sie können Ihre eigene Implementierung der Methode sollteComponentUpdate für Ihre Komponente schreiben, aber die Standardimplementierung gibt immer true zurück - was bedeutet, dass die Renderfunktion immer erneut ausgeführt wird.

standardmäßig shouldComponentUpdate gibt immer wahr geringfügige Fehler zu verhindern, wenn Zustand an Ort und Stelle mutiert ist, aber wenn Sie vorsichtig sind zu immer Zustand als unveränderlich behandeln und nur von Requisiten und Zustand in render() zu lesen Dann können Sie shouldComponentUpdate mit einer Implementierung überschreiben, die die alten Requisiten und den Zustand mit ihren Ersetzungen vergleicht. http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Answer 2

Sie könnten den Code aus dem render() Methode verschieben möchten, und steckte es in eine der Lifecycle-Methoden in diesem Fall wäre es

componentWillMount und componentWillReceiveProps sein. Sie können Ihr children Array dort aufbauen und einfach in der render() z.

render(){ 
    return (
     <div>{children} {this.state.something_else}</div> 
); 
}