2016-09-16 4 views
2

childrenをレンダリングするコンポーネントがありますが、それらの子はreduxのコンポーネントまたはタイマーベースの更新コンポーネントです。親コンポーネントはそれを知らない。ただし、親コンポーネントはパフォーマンスの最適化のためにshouldComponentUpdateを実装します。shouldComponentUpdateは接続された子の更新を防ぎますか

class Container extends React.Component { 
    shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this, nextProps, nextState) } 

    render() { 
    return <div> 
     <h1>{this.props.title}</h1> 
     { children } 
    </div> 
    } 
} 

Clockは、自己更新/接続コンポーネントです。そして、この星座に:そのプロパティがその親コン​​ポーネントtitleにもかかわらず、原因redux状態の変化や内部のタイムアウト(しかし、それはその実装)に変更したときに

<Container title="Current Time"> 
    <Clock/> 
</Container> 

Clockはまだ変更決して更新されないであろう、したがって、componentShouldUpdate呼び出しがfalseを返します。 ?

答えて

4

ClockContainerから小道具を受信して​​いる、とContainerためshouldComponentUpdateで更新されない場合は、Clockは更新されません。店舗に接続されている場合は、小道具を直接受け取るため更新する必要があります。

+0

クロックがタイマーを使用し、ローカルコンポーネントの状態が更新される場合は、 – philk

+2

https://codepen.io/anon/pen/YGWVXv – Benjamin

+0

'shouldComponentUpdate'は' shouldComponentUpdate'でコンポーネントのレベルでレンダリングの変更をブロックするだけです。子供が親から 'shouldComponentUpdate'で更新された小道具を期待していて、更新がなければ、子どもも更新されません。子供(または 'connect'からパイプされた小道具)によって特別に扱われる状態の変更がある場合、それらは分離しています。 – Benjamin

関連する問題