React.memo, useCallback

📕 コードの四捨五入の間、あなたはいくつかの非常に不思議で重要な内容を聞いたので、私たちはあなたが教室で共有したコードを使って、あなたの個人学習を簡単にまとめました.

React.memoの使用例

レンダリングを最適化する方法を簡単なコードで学習します.

import React, { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <Child data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

レンダリングのたびに、アプリケーションはconsole.log("App")を撮影し、ロードされたサブアセンブリconsole.log("Child")を実行して、再レンダリングが可能かどうかを確認します.
コードを実行すると、このようなウィンドウが表示されます.

コードを実行したら、2～3回ボタンを押すと、次の結果が表示されます.

Childは変化していませんが、レンダリングされています.
React.memoでchildを包んで

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <MemoChild data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

export const MemoChild = React.memo(Child);

結果は次のとおりです.

ご覧のようにchildはレンダリングされません.
授業中はちょっと不思議でしたか?最適化テスト方法があるので、記録して共有することができます.

Profilerを使用してレンダリングステータスを表示する

開発者ツールを開き、Profilerタブを開きます.

録画ボタンを押して、上のコードが表示されているページのボタンを4～5回押します.

右側のバーをクリックして、

がレンダリングされていることを確認します.

現在の反応.memoを書き込み中の場合は、Child構成部品が再レンダリングされていないことが表示されます.

useCallbackの使用例

clickHandlerという関数を作成し、MemoChildに配置します.

import React, { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();
  const clickHandler = () => console.log("Clicked");

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <MemoChild clickHandler={clickHandler} data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

export const MemoChild = React.memo(Child);

ちょっと反応するmemoが知っているから」😑これは同じ関数です~「再レンダリングは阻止されると思いますが、コンソールウィンドウを見るとそれほど機能しません.
これは、Memoで囲まれたコンポーネントのClickHandlerを比較し続けるが、アプリケーションをレンダリングするたびに新しいClickHandlerが生成され解放されるため、Childは再レンダリングを継続するためである
この問題を解決するために、useCallback包囲関数を使用します.
上のProfilerで再レンダリング方法を説明します.

Why did this render?で、Props changedは「clickHandlerが変更されたのでChildが再レンダリングされました~」
👀 備考:授業中になぜ私はそのWhy do this renderを表示しないのですか?そうかと思いましたが単独で設置すればいいのです~
ギアアイコンをクリックしてProfilerタブに入り、下に表示されるチェックをアクティブにします.

コードに戻り、useCallbackを適用してみます.

import React, { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();
  const clickHandler = useCallback(() => {
    console.log("Clicked!");
  }, []);

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <MemoChild clickHandler={clickHandler} data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

export const MemoChild = React.memo(Child);

再レンダリングできません~👏👏👏