導入

React.memo は、プロップの1つが変更された場合にのみ変更するコンポーネントのmemoizedされたバージョンを返します.と同じですPureComponent しかし、クラスの代わりにReact.memo は機能的なコンポーネントに使用されます.

なぜ使用する反応。メモ？

React.memo レンダリングされた出力を記憶し、不要なレンダリングをスキップします.これは、コンポーネントのレンダリングに必要なコンポーネントと計算の不要な再レンダリングを防ぐのに役立ちます.

反応する。行動のメモ

例の実装として、次のコンポーネントを作成できます

ユーザー挨拶

ユーザーが挨拶した回数を表示する

ボタンを使用してユーザーのgreet

の機能を追加しましょうGreetUser コンポーネントをレンダリングしながらいくつかの重い計算をシミュレートする作業を行うコンポーネントです.

// userGreeting.js

const UserGreeting = () => {
  const getUserName = () => {
    let i = 0;
    while (i < 3000000000) i++;

    return 'John Doe';
  };

  return <div>Hello {getUserName()},</div>;
};

GreetingCount and Button コンポーネントは、カウントとインクリメントgreetカウントをそれぞれクリックして表示されます.

// greetingCount.js

const GreetingCount = ({ count }) => (
  return <div>You greeted me {count} times.</div>;
);

// button.js

const Button = ({ title, onClick }) => (
  <button onClick={onClick}>{title}</button>
);

そして、親コンポーネントはこれらのすべてのコンポーネントをインポートし、挨拶カウントを更新するメソッドを持っています.

//App.js

const App = () => {
  const [greetCount, setGreetCount] = useState(0);
  const onGreet = () => {
    setGreetCount(greetCount + 1);
  };

  return (
    <div className='App'>
      <UserGreeting />
      <GreetingCount count={greetCount} />
      <Button title='Hi' onClick={onGreet} />
    </div>
  );
};

問題

ボタンがクリックされた後にUI更新前に特定の間隔の遅延があることがわかります.これは、ボタンをクリックすると、すべてのコンポーネントが再構築され、GreetUser コンポーネントが再構築されます.The getUserName メソッドの再レンダリングによって再度実行されますGreetUser コンポーネントは、UI更新の遅延を引き起こします.

解決策

したがって、上記の問題の解決策はReact.memo() . The React.memo() メソッドは、コンポーネントをメモし、コンポーネントの浅い比較を行いますGreetUser コンポーネントが変更されました、このコンポーネントの再レンダリングをスキップします.これは、レンダリング中に再計算を防ぐとUIをすばやく更新します.このため、コンポーネントをラップしますReact.memo() そしてそれをエクスポートします.

const UserGreeting = () => {
  // code here
};

export default React.memo(UserGreeting);

結果:

コンポーネントが再表示されないようになりましたGreetUser コンポーネントとUIの遅延なしで更新されます.
あなたは完全な例を見つけることができますCodeSandbox