Reactガイドを読んでいくその98

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

レンダープロップ

レンダープロップを 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>
    );
  }
}

これを回避するために、レンダープロップをインスタンスメソッドとして定義するような方法も可能。

今日はここまで。