React.Memoでグリップする

投稿日: 2022-04-20 2022-10-08
タグ: React

React.memo Reactの純粋なコンポーネントの機能を提供しますが、クラスベースのコンポーネントではなく機能ベースのコンポーネントに使用できます。

memoization はコンピュータサイエンスの専門用語です。これは、高価な関数呼び出しの結果をキャッシュし、引数が同じ場合にキャッシュされたバージョンを返すことを意味します。

Reactの用語で：

欲しくない MyNewComponent ときに再レンダリングする props 渡されるのは同じです。

簡単なカウンターの例

React.memoがどのように機能するかを頭に入れておくために、Codesandboxで次の例を作成しました。

ボタンがクリックされた回数をカウントするシンプルなアプリです。下のスクリーンショットから、ページの上部にバナーが表示されていることがわかります。

想像してみてください Banner はさまざまなタイプを持つことができるUIコンポーネントです。この場合、 info バナーを入力して、 Banner 次のように：

<Banner type="info" />

私たちの CounterComponent このように見えます：

class CounterComponent extends Component {
  state = { buttonPressedCount: 0 };
  render() {
    const { buttonPressedCount } = this.state;
    return (
      <div className="new-component">
        <h4>Button Pressed Count: {buttonPressedCount}</h4>
        <button
          onClick={() =>
            this.setState({ buttonPressedCount: buttonPressedCount + 1 })
          }
        >
          Increase Count
        </button>
        <Banner type="info" />
      </div>
    );
  }
}

そして私たちの Banner コンポーネントは次のようになります。

const Banner = props => {
  const { type } = props;

  if (type === "info") {
    return <div className="info-banner">I am an info banner</div>;
  }
};

私たちの中で CounterComponent、ボタンをクリックするたびに、 buttonPressedCount あなたが期待するものである再レンダリングを引き起こす変数。これに伴う問題は、 Banner コンポーネントは、 props それに渡されることは変わっていません。

これを回避するために、 memo のように動作します PureComponent が再レンダリングを停止するという事実で props 変わっていません。更新されたコードは次のようになります。

const Banner = memo(props => {
  const { type } = props;

  if (type === "info") {
    return <div className="info-banner">I am an info banner</div>;
  }
});

今私たちの Banner コンポーネントは、 props それに変わった。

これがReactメモの基本的な考え方です。

は同じ

では、もう少し進んで、カスタムの平等について話しましょう。デフォルトでは、 memo のみ shallow 小道具と小道具のオブジェクトの比較。 2番目の引数を渡して、カスタムの同等性チェックを示すことができます。

React.memo(Component, [areEqual(prevProps, nextProps)]);

これはに似ています shouldComponentUpdate しかし、その逆、すなわち戻る true の shouldComponentUpdate 別のレンダリングを引き起こしますが areEqual 反対です。

私たちが持っていたと想像してください Person 受け入れたコンポーネント prop オブジェクトである人は、 name 同じです。

const areEqual = (prevProps, nextProps) => {
  return (prevProps.name === nextProps.name)
};
React.memo(Person, areEqual);

結論

これはReactへの本当に素晴らしい追加であり、不必要な再レンダリングを心配することなく機能コンポーネントを使用することができます。いつものように、この投稿で何か良いことを学んだことを願っています！

getdocs

13036