Reactガイドを読んでいくその98
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
レンダープロップ
レンダープロップを React.PureComponent で使うときの注意点
renderメソッド内で関数を作成していると、React.PureComponentを使う利点が相殺される。
renderは毎回レンダープロップとして新しい値を生成し、浅い比較は新しいpropsの値に対して常にfalseを返すため。
例えば以下のような例の場合、MouseTrackerがレンダーされるたびにMouse renderプロパティの値として新しい関数が生成されるので、MouseがReact.PureComponentを継承している効果がそもそもなくなってしまう。
class Mouse extends React.PureComponent { // Same implementation as above... } class MouseTracker extends React.Component { render() { return ( <div> <h1>Move the mouse around!</h1> {/* This is bad! The value of the `render` prop will be different on each render. */} <Mouse render={mouse => ( <Cat mouse={mouse} /> )}/> </div> ); } }
これを回避するために、レンダープロップをインスタンスメソッドとして定義するような方法も可能。
今日はここまで。