USEMMEOとUSECOLLACKを使用するときには?

これらの2つの反応フック.useMemo and useCallback あなたが高価な操作を扱うときに便利です(つまり、非常に複雑で、CPUのように多くの時間とリソースを取ります).
あなたが反応コンポーネントの中のそれらの高価な操作のうちの1つを含むならば、これらの高価な仕事はコンポーネントを再貸し出すたびに実行されます.そして、アプリケーションを遅くします.
これらの2つのフックは、高価な操作を実行し、キャッシュ内の結果を格納することによって、アプリケーションを最適化するのに役立ちます.次のコンポーネントの再レンダリング、それは操作を実行しません.代わりに、キャッシュから結果を返します.

これがusememoの仕組みです

この高価な操作とそれを使う反応コンポーネントを持っていると仮定しましょう.

function uselessExpensiveOperation(input) {
    const someBigArray = [];
    for (let i = 0; i < 5_000_000; i++) {
        someBigArray.push(input * i);
    }
    return someBigArray;
}

function SomeReactComponent() {
    const expensiveOperationResult = uselessExpensiveOperation(3);
    const output = expensiveOperationResult
        .slice(0, 5)
        .map(number => <li key={ number }>{ number }</li>);

    return <ul>{ output }</ul>;
}

この例の関数は、実行するのに数秒かかることがあります.これは、各数の値が引数として渡す数に依存して500万の数字の配列を返します.あなたが使うならばuselessExpensiveOperation 反応コンポーネントにおいて、直接反応が毎回、レンダリング・プロセスの間、そのコンポーネントを呼ぶときに、それは高価な操作を実行する.
今、これはあなたが使用する場合に起こることですuseMemo キャッシュに値を格納するフック

function SomeReactComponent() {
    const expensiveOperationResult = useMemo(
        function() {
            return uselessExpensiveOperation(3);
        },
        []
    );
    const output = expensiveOperationResult
        .slice(0, 5)
        .map(number => <li key={ number }>{ number }</li>);

    return <ul>{ output }</ul>;
}

最初の引数useMemo は、高価な操作を含む関数で、2番目の引数は依存関係の配列です.依存関係のいずれかの値が変更された場合、Replyはキャッシュを削除し、高価なタスクを実行します.
依存配列のアイデアは、高価なオペレーションが必要とする変数を含めるべきです.この例では、高価な操作に依存関係がないので、配列は空です.

usecallbackフックの使い方

このフックはとても似ているuseMemo , しかし、キャッシュに関数を格納します.あなたはそれを使用できるuseMemo , しかし、構文は少し簡単ですuseCallback :

function SomeReactComponent() {
    const cachedFunction = useCallback(
        function originalFunction() {
            return "some value";
        },
        []
    );

    return <div>{ cachedFunction() }</div>
}

さて、いつそれを使うべきですか.まず、特殊反応関数を説明します.React.memo . この関数はuseMemo , しかし、ストアは不必要なレンダリングを防ぐためにキャッシュにコンポーネントを反応させます.以下のようになります.

const cachedComponent = React.memo(
    function SomeReactComponent(props) {
        return <div>Hello, { props.firstName }!</div>
    }
);

いくつかの小道具が変わるまで、コンポーネントはキャッシュに格納されます.それが起こるならば、それは再レンダリングして、再びキャッシュにそれを保存します.
しかし、プロップのうちの1つが親コンポーネントでつくられた関数であるなら、問題があります.親コンポーネントが再レンダリングされるたびに、内部関数が再び作成され、コードが変更されていない場合でも、異なる関数と見なされます.
したがって、キャッシュされたコンポーネントにプロップとして“異なる”関数を渡すと、不要な再レンダリングをトリガします.
を使用する場合useCallback フック、コンポーネントがレンダリングされる最初の関数を作成します.コンポーネントが再びレンダリングされると、それはちょうどキャッシュから機能を取得します、そして、今度は、それは同じ機能です、そして、それは子要素でre - renderingを誘発しません.

最適化しない

いくつかの開発者が行う一般的な間違いは、これらのフック(および他の最適化手法)を使用することです.しかし、それがコードをより複雑にする(したがって、維持するのが難しい)ので、それは推薦されません、そして、場合によっては、より悪い実行さえします.
あなたがパフォーマンスの問題を見つけた後、これらのテクニックを適用する必要があります.何かがあなたが望むほど速く走らないとき、ボトルネックがどこにあるかについて調査して、その部分を最適化してください.
無料JavaScriptニュースレター!すべての他の月曜日、簡単に、あなたのJavaScriptスキルをレベルに対応できる手順.Click here to subscribe