レンダリングでコンポーネントを効率的に生成していますか？

Question

単純なコンポーネントには、子コンポーネントの配列があります。親のstate（とりわけ）で、私はオブジェクトの配列を保持し、render機能に私は子コンポーネントを構築：

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> 
); 

問題は、私はいくつかの他の状態の値を変更するたびに、機能をレンダリングすることです子のコンポーネントが呼び出されます。children配列で何も変更しないので、奇妙です。何か案は？このコードは非効率的ですか？

Answer 1

デフォルトでは、ReactはsetStateが呼び出されるたびにすべてのコンポーネントとサブコンポーネントを再描画します。

メソッドboolean shouldComponentUpdate（オブジェクトnextProps、オブジェクトnextState）があります。各コンポーネントにはこのメソッドがあり、コンポーネントの更新（実行レンダー関数）を決定する責任があります。あなたが状態を変えるか、親コンポーネントから新しい小道具を渡すたびに。

コンポーネントのshouldComponentUpdateメソッドの独自の実装を記述できますが、デフォルトの実装は常にtrueを返します。つまり、常にレンダリング関数を再実行します。デフォルトでは

、shouldComponentUpdate）は、常に状態が所定の位置に変異し​​ているとき 微妙なバグを防ぐためにtrueを返しますが、あなたは に注意している場合は、常に不変として状態を治療し、（レンダリング中に小道具や状態 から読み取り専用に古い小道具と状態を の代替品と比較する 実装でshouldComponentUpdateを上書きできます。 http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Answer 2

あなたはrender()方法の外にコードを移動し、それが

componentWillMountとcomponentWillReceivePropsになり、この場合のライフサイクルメソッドのいずれかにそれを置くことをお勧めします。 childrenアレイを作成してrender()に簡単に表示できます。

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