react-reduxは親を更新せずに子スマートコンポーネントを更新できますか？

Question

は、次のような構造を反応させるの想像：

SmartComponentA - > DumbComponentB - > SmartComponentC

またSmartComponentAとSmartComponentCそれぞれが自分のmapStateToProps機能状態の異なるスライスに接続して取得することを想像してみてください。

最後に、console.logをこれらのコンポーネントのそれぞれのレンダリングメソッドに配置したとします。

これを実際に試してみると、最初のレンダリングですべてのコンポーネントが期待どおりにログに記録されることがわかります。しかし、SmartComponentCのデータを変更すると、単一のログメッセージ（Cのログメッセージ）しか表示されず、SmartComponentAまたはDumbComponentBのログは表示されません。そんなことがあるものか？ react-reduxは親を更新せずにReactを取得して子供を更新する方法はありますか？

私は（状態のそのスライスが変更されていないので）connectメソッドの内部shouldComponentUpdateのthe overridingがSmartComponentAが再描画されませんでした意味であろうと想定しているだろう、したがって、その希望短絡の原因となりますSmartComponentCが再レンダリングされることを防ぎます。 connectの実装は純粋なレンダリングミックスインと同じではありませんが、両方ともshouldComponentUpdateを変更して動作しますが、純粋なレンダリングドキュメントでは、親が再作成する必要がない場合-comlder：

C2のサブツリーとC7については、shouldComponentUpdateに救済しても仮想DOMを計算する必要はありませんでした。私の質問はまだ明確でない場合は

source

、ここで私はCの入力でタイピングを保つことができ、それが唯一のCさんをログに記録し、なぜ私が求めているセットアップのための擬似コードの一種である、とAとBのメッセージではなく、コンソールへのメッセージ（なぜそれは短絡していないのですか）？オン

////////////////////////////////////////////// 

const SmartComponentA = (props) => { 
    console.log('rendering SmartComponentA'); 

    return <DumbComponentB bData={props.bData} />; 
}; 

const mapStateToProps = (state) => { bData: state.bData }; 

export default connect(mapStateToProps)(SmartComponentA); 

////////////////////////////////////////////// 

const DumbComponentB = (props) => { 
    console.log('rendering DumbComponentB'); 

    return (
    <div> 
     {props.bData} 
     <SmartComponentC /> 
    </div> 
); 
} 

export default DumbComponentB; 

////////////////////////////////////////////// 

const SmartComponentC = (props) => { 
    console.log('rendering SmartComponentC'); 

    return (
    <div> 
     <input value={props.cValue} onChange={props.changeCValue} /> 
    </div> 
); 
} 

const mapStateToProps = (state) => { cValue: state.cValue }; 

export default connect(mapStateToProps, { changeCValue })(SmartComponentC); 
////////////////////////////////////////////// 

は最初、私は入力に入力を続けるならば、私は唯一のCのログメッセージIキーを押すたびに参照、すべてのログメッセージを参照してくださいレンダリングします。

Answer 1

プロップ変更は、通常、各子コンポーネントのライフサイクルをトリガーするReactコンポーネントのライフサイクルをトリガーします。ただし、あなたが観察したように、shouldComponentUpdateによってプロセスが短絡する可能性がある場合を除きます。

しかし、小道具の変更は、コンポーネントライフサイクルを引き起こすものではなく、状態の変更もあります。そしてそれがconnect関数がどのように機能するかです。 Connectコンポーネントsubscribes to the storeおよび任意のストアで、スマートコンポーネントのプロップを更新する場合はchecks to seeを変更します（mapStateToPropsに基づいて）。その場合、set it's own stateはConnectコンポーネントとその子コンポーネントのライフサイクル機能を起動します。