useMemo、React.memo、useCallback

1. useMemoの基本的な使い方

データをキャッシュし、Vue で計算されたプロパティをシミュレートします。

同様に、useMemo は vue のコンポーネントと同じであり、これもキャッシュされ、結果もキャッシュされます。

import React, { useMemo, useState } from 'react';

export default function UseMemo() {
    const [count, setCount] = useState(0);
    
    缓存 sum 的值
   useMemo  使用的时候，第二个参数是个数组，里面必须要传递所依赖的值，才可实现计算属性的功能
   例如上面此生依赖count 那么就需要把 count传递到数组里面去
   
   注意：
   1、如果第二个参数不传递，useMemo也能执行，也会实现技术属性的效果，但是建议还是传递，这样会更加准确一点
   
   2、如果依赖了两个值 比如：number1  number，但是数组里面只传递number1的话 
         如果number2 也发生变化 此时useMemo是不会执行的，因为没有传递number2告诉useMemo依赖了它
         就是说
        
    
    const sum = useMemo(() => {
        return count + count;
    }, [count]) 

    return (
        <>
            <p>父组件：{sum}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </>
    )
}

最初のパラメータ（コールバック関数）	2 番目のパラメータ (依存関係)
1. コンポーネントが初めてレンダリングされ (関数が初めて実行され)、DOM がマウントされる前に実行されます; 2. 各コンポーネントが更新される前に (関数が再実行されます)、useMemo が最初に実行されます。、その後 DMO が更新されます	ヌル
1. コンポーネントが初めてレンダリングされ (関数が初めて実行され)、DOM がマウントされる前に実行されます。	[]
1. コンポーネントが初めてレンダリングされ (関数が初めて実行され)、DOM がマウントされる前に実行されます; 2. 依存関係が更新されるたびに、各コンポーネントが更新される前に (関数が再実行されます)実行される)、useMemo が最初に実行され、次に DMO が更新されます	[状態]

二、React.memo()

React では、デフォルトで、親コンポーネントが更新されると、子コンポーネントが変更されたかどうかに関係なく、子コンポーネントも更新されます。

ただし、子コンポーネントで使用されるデータが変更されていない限り、親コンポーネントが更新されても、子コンポーネントは更新されないことを推奨します。

子コンポーネントを React.memo でラップできます。

function Child(props) {
    
    

}
export default React.memo(Child);

React.memo :

1.コンポーネントのキャッシュに使用できます: メモメソッドは、サブコンポーネント内のデータ (状態、プロパティ) が変更されたかどうかを判断します。サブコンポーネント内のデータが変更された場合にのみ、サブコンポーネントが更新されます。。

2.ただし、子コンポーネントに渡された値に関数がある場合、親コンポーネントが更新され、子コンポーネントの props の値に関係なく、子コンポーネントの更新が引き続きトリガーされます。その理由は次のとおりです。反応関数コンポーネントで、親コンポーネントの値が変更されると、すべての親コンポーネントが更新されます。これは、更新時に子コンポーネントに渡される関数を再作成することと同じなので、React.memo は props 内の関数を検出します。現時点では変更されており、通常は子コンポーネントが更新されるようにトリガーされます。したがって、useCallback フックの機能は、以下の 3 番目の点に反映されています。

3、コールバックを使用する

useCallback は関数をキャッシュするために使用されます。基本的な構文は次のとおりです。

import React, { useCallback } from 'react';

export default function UseMemo() {
       const sayHello = () => {
        console.log('hello')
    }
    const cbSayHello = useCallback(sayHello, [])

    return (
        // ...
    )
}

なぜキャッシュ機能が必要なのかというと、これがReact.memo()関係しています。

React.memo()サブコンポーネントが不必要な更新を回避できることを期待して、サブコンポーネントをでラップします。ただし、親コンポーネントから渡されたpropsが関数の場合、親コンポーネントが再レンダリングするたびにmemoはpropsの関数が新しい関数であると判断し、子コンポーネントを更新します。

useCallback()したがって、現時点では、関数を親コンポーネントにキャッシュし、キャッシュされた関数を子コンポーネントに渡すことができます。

import React, { useCallback } from 'react';

export default function UseMemo() {
       const sayHello = () => {
        console.log('hello')
    }
    const cbSayHello = useCallback(sayHello, [])

    return (
        <Child sayHello={cbSayHello}></Child>
    )
}

この処理後は、親コンポーネントが変更されても、子コンポーネントで使用するデータやメソッドが変更されていない限り、子コンポーネントは更新されません。

04-useMemo、React.memo、useCallback

useMemo、React.memo、useCallback

1. useMemoの基本的な使い方

二、React.memo()

3、コールバックを使用する

おすすめ