React：親コンポーネントは、状態変更時に変更されていない子を含むすべての子を再レンダリングします。

Question

私はこれに対して明確な答えを見つけることができませんでした。

私はReact + Reduxを簡単なチャットアプリに使用しています。このアプリケーションは、InputBar、MessageList、およびContainerコンポーネントで構成されています。コンテナ（あなたが想像しているように）は、他の2つのコンポーネントをラップし、ストアに接続します。私のメッセージの状態と現在のメッセージ（ユーザーが現在入力しているメッセージ）は、Reduxストアで保持されます。簡略化された構造：

class ContainerComponent extends Component { 
    ... 
    render() { 
    return (
     <div id="message-container"> 
     <MessageList 
      messages={this.props.messages} 
     /> 
     <InputBar 
      currentMessage={this.props.currentMessage} 
      updateMessage={this.props.updateMessage} 
      onSubmit={this.props.addMessage} 
     /> 
     </div> 
    ); 
    } 
} 

現在のメッセージを更新するときに発生している問題が発生します。現在のメッセージを更新すると、ストアを更新するアクションがトリガーされます。ストアは、コンテナーを通過して、InputBarコンポーネントに戻るように更新します。

これはうまくいきますが、これが起こるたびにMessageListコンポーネントが再レンダリングされるという副作用があります。 MessageListは現在のメッセージを受信せず、更新する理由もありません。 MessageListが大きくなると、現在のメッセージが更新されるたびにアプリが著しく遅くなるため、これは大きな問題です。

InputBarコンポーネント内で現在のメッセージ状態を直接設定して更新しようとしましたが（Reduxアーキテクチャを完全に無視する）、問題を「修正」することができましたが、可能ならばReduxデザインパターンに固執したいと思います。

私の質問は以下のとおりです。親コンポーネントが更新され

• 場合は、必ずそのコンポーネント内のすべての直接の子を更新し反応しませんか？

• 正しいアプローチは何ですか？

Answer 1

親コンポーネントが更新される場合は、必ずそのコンポーネント内のすべての直接の子を更新リアクトのでしょうか？

No. shouldComponentUpdate()がtrueを返した場合、リアクションはコンポーネントを再レンダリングしません。デフォルトでは、新規メソッドの微妙なバグを避けるために、このメソッドは常にtrueを返します（ウィリアムBが指摘したように、何か変更が加えられなければDOMは実際には更新されません）。

サブコンポーネントが不必要に再描画されないようにするには、データが実際に変更されたときにtrueを返すようにshouldComponentUpdateメソッドを実装する必要があります。 this.props.messagesが常に同じ配列である場合、それはこのような単純なことができます：あなたはまた、深い比較やメッセージIDか何かの比較のいくつかの並べ替えを行うことをお勧めします

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

、それはあなたの要件に依存します。