Preventが

Question

私の現在のリアクトサンプル実装のようなものに見えるレンダリング反応します。そのことは何度も何度も同じことをしています。 ReactChildComponentだけを最終的な配列インデックスに追加する方法がありますか？私はただ一度だけ、配列の最後のインデックスに値を割り当てることができますし、それだけが残っているので、私は毎回、配列を反復処理する必要がないように

var MyComponent = React.createClass({ 
    getInitialState: function() { 
     return {x: []}; 
    }, 

    ComponentWillReceiveProps: function() { 
     this.state.x.push(this.props.data); 
    }, 

    render: function() { 
     var x = this.state.x; 
     var xl = x. length; 

     x[xl - 1] = React.createElement(SomeChildComponent, {prop1: val1, prop2: val2}); 

     return (
       React.createElement('div', {}, xl)); 
    } 
}); 

：ような何か。私はこれを試しましたが、どういうわけかComponentWillReceivePropsは呼び出されず、配列は空になります（したがって、長さ1のインデックスを破るコードを選択します）。

これを実装するためのきちんとした方法はありますか？これは良い選択ですか？ほとんどの人は、たいていの場合、最初の例に示すように、mapを使用してループ全体にわたって繰り返しているのです。

私のアプリケーションでは、リアルタイムアプリケーションとして実現できるほどのパフォーマンスを提供しなければならないと想定しているため、毎回アレイを再確認する必要はありません。

Answer 1

ベストプラクティスは毎回アレイ全体を反復することです。これにより、コンポーネントのレンダリング時に状態が常に正確に表現されます。マップ関数は、パフォーマンスが向上する限り（配列に数十万または数十万のアイテムがない限り）、比較的安価である必要があります。

Reactのアイデアは、DOMを更新するときにjavascriptアプリケーションのパフォーマンスのボトルネックがしばしば発生するということです。 ReactはDOMをスマートに更新するため（https://facebook.github.io/react/docs/reconciliation.html）、パフォーマンスの問題を回避するのに役立ちます。この利点は、配列の変更に伴い要素の追加と削除を追跡する必要がないことです。反応があなたのためにそれを行います。

この後ろにさらに説明や推論が必要な場合は教えてください。もっと読むにはhttps://facebook.github.io/react/docs/rendering-elements.html#react-only-updates-whats-necessary