React.jsの親コンポーネントの再レンダリングを防止する方法

Question

コンポーネントProductListがあります。これは親コンポーネントです。メートルでは、この方法は、私がこのようなコード

return (
     <div> 
      <CustomBreadCrumbs routes={this.props.routes} params={this.props.params} /> 
      { this.props.children ? this.props.children : 
       <section className="content"> 
        Parent 
       </section> 
      } 
     </div> 
    ); 

私は子コンポーネントにおけるいくつかの情報私の親コンポーネントの再レンダリングを編集

を書いたレンダリングが、私はそれを阻止したいです。私はそれをどうやってできるの？

Answer 1

は、子コンポーネントの再レンダリングを再レンダリングする親コンポーネントの再レンダリング時にのみ可能です。

thereが表示されていますが、shouldComponentUpdateで現在の要素の再送出を防止すると、子レンダリングメソッドは採用されません。

しかし、心配しないでくださいReact Only Updates What's Necessary。したがって、親要素のhtmlが変更されない場合、実際のDOMは子のHTMLのみを更新します。

---

ショーケース

は、フォームを作成する方法の公式ドキュメント、中exampleがあります。いくつかの言葉では、あなたの主な問題は、あなたがどこにでもあなたの値を保存しないということです。私は、Reduxを使い、すべてのデータを小道具で渡しています。コードを変更して、コンポーネントの独自の状態でデータを保存してください。

BadRequestでエラーが発生した場合は、コードを実行し、メッセージ（エラー）などを確認してコンポーネントを更新しますが、現在の状態はすべてのユーザーのデータで変更されません。

shouldComponentUpdate(nextProps, nextState) { 
    //there you will get the new values and check it, if they not equal 
} 

componentDidUpdate(prevProps, prevState) { 
    //there you can do anything with your new values 
} 

Reduxを使用している場合は、Redux Formをご覧ください。