リフレッシュのみ、私はリストで反応する成分を持つ親

Question

から変更コンポーネントは、のは、リストを呼び出してみましょう、それはフォームのオブジェクトの配列である状態という名前の項目があります。

{ id: String, name: String } 

そのレンダリング機能は、反応成分でもある項目ももちろん、

render() { 
    return (
     <ul> 
      { items.map((item) => { 
      return (
       <Item key={item.id} item={item} /> 
      ); 
      })} 
     </ul> 
    ); 
} 

のようなものです。

私の質問：ある時点で、データが変更されたことはわかっています（もちろん名前の変更のみになります）。親からのキーに基づいてアイテムをリフレッシュする方法を教えてください？

私は、これまで2つの解決策を見つけた：

1. は、全体の状態をリフレッシュするが、それはやり過ぎのようだ原因私はそれを好きではありません。
2. 子コンポーネントへの参照の配列を維持していますが、メモリが浪費されているように感じます。

これを行うにはどうしたらいいですか？

Answer 1

1ワード：Redux。これがあなたの必要性を感じ始める場所です。アイテムをストアにサブスクライブし、対応するアイテムを更新する名前変更アクションをディスパッチできます。項目配列は、次に呼び出されParentのレンダリング変更した場合Item成分が同じであるキーので、the official docs

Answer 2

を参照して、コンポーネントが再作成されていないが、そのcomponentWillReceiveProps関数が呼び出され、項目コンポーネントが再レンダリングされます。

最適化としてできることは、React.PureComponentを拡張して行うことができる純粋なコンポーネントとしてアイテムコンポーネントを作成することです。 React.PureComponent’sshouldComponentUpdate()オブジェクトを浅くしか比較しないので、小道具が変更されていない場合、子の再レンダリングが呼び出されません。 DOCSによると

：あなたは、コンポーネントのrender（）関数に反応した場合

が同じ小道具や状態を考慮同じ結果 をレンダリングし、あなたには、いくつかに パフォーマンスの向上のためにReact.PureComponentを使用することができますケース。

React.PureComponent’sshouldComponentUpdate() はオブジェクトを比較します。これらに複雑なデータ構造が含まれている場合は、 より深い違いのために偽陰性を生成することがあります。シンプルな小道具や状態が必要な場合は、 PureComponentを延長するか、深いデータ構造が変更されたことがわかっている場合は forceUpdate()を使用してください。または、 は、入れ子にされたデータ の高速比較を容易にするために不変オブジェクトを使用することを検討してください。

さらに、React.PureComponent’sshouldComponentUpdate()スキップ コンポーネント全体のサブツリーの更新情報をスキップします。 子コンポーネントもすべて「純粋」であることを確認してください。

Answer 3

ReactコンポーネントにshouldComponentUpdate(nextProps, newState)を実装すると、コンポーネントの更新が必要かどうかを計算できます。したがって、完全に新しいオブジェクトを送信した場合、デフォルトの実装で既にトリガーされています（詳細比較は行いません）。プロパティーinput.nameが変更された場合、これは検出されません。ですから、このようにこの身を実現することができます。

shouldComponentUpdate(nextProps, newState) { 
    return this.props.name == nextProps.name; 
} 

今私はJavaScriptを（私は活字体を好む）のビットさびたので、私は、これは文字列を比較するための正しい方法であるかどうかわからないです。 shouldComponentUpdate（）メソッドを使用して

Answer 4

、あなたがコンポーネントが現在の小道具として提供される新しい小道具に基づいて更新する必要があるかどうかを指定することができます。

shouldComponentUpdate(nextProps){ 
    return this.props.item.name !== nextProps.item.name; 
} 

ここデモでJsFiddleです：https://jsfiddle.net/Vorcan/Lakj6qwb/

通常、Object.assign()のようなものを使用して新しいオブジェクトインスタンスを作成する必要があります。

ドキュメント以外

、shouldComponentUpdateをチェックアウトする別の良いリソースがhttps://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/using_should_component_update.html