React フック - パフォーマンス最適化フック

フックとは

フックは構文的には関数です。これらの関数を使用して、状態管理およびライフサイクルメソッドを機能コンポーネントに導入できます。

React フックの利点

簡潔
文法的に言えば、記述されるコードが少なくなります
始めるのはとても簡単です
- 関数型プログラミングの概念に基づいており、JavaScript の基本知識を習得するだけで済みます。
- React Hooks はライフサイクルに関する知識を学ぶ必要がなく、新しい概念を使用してコンポーネントの動作プロセスを管理します。
- HOC関連の知識を学ぶ必要はなく、HOCが解決したい問題をReact Hooksで完璧に解決でき、より確実です。
- Mobx は状態管理において Redux を置き換えます
コードの再利用性の向上
Typescript との統合が容易になりました

React フックの欠点

状態が同期していません
非同期操作関数でアクセスされた状態は、元の状態の値のままです
useEffect の依存関係の問題
useEffect がより多くのデータに依存すると、頻繁にトリガーされます

React Hooks に関する注意事項

命名規則
カスタムフックは、useXXX の形式で、プレフィックスとして use を使用して名前を付ける必要があります。
最外層の React Hook のみを呼び出す
反応関数からのみ反応フックを呼び出します
カスタムフックまたはコンポーネントでフックを呼び出します

メモを使用する

useMemo は主にパフォーマンスの最適化を目的として使用されます。

useMemo(コールバック,配列):

callback: ロジックの処理に使用されるコールバック関数
配列: 配列には、監視する必要がある依存関係が含まれています。依存関係の値が変更されると、コールバックが再実行されます。

useMemo() は、memoized という関数を返します。

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

const TestCom = React.memo(()=>{
    return <></>
});

function App(){
    const [user,setUser] = useState({
        name:'hello',
        userSex；1
    })
   const filterSex = useMemo(()=>{
        return user.userSex === 1 ? '男' : '女'
    },[user]);
    return <>
    <span>{filterSex}</span>
    <TestCom></TestCom>
    </>
}

ユーザーが更新をトリガーした場合にのみ、filterSex の内部計算が再トリガーされ、キャッシュパフォーマンスの最適化という目的が達成されます。

予防

useMemo は、キャッシュ関数コンポーネントでコンピューティングリソースが消費されるシナリオで使用する必要があります。useMemo 自体が一定量のキャッシュを占有するため、必要なシナリオで使用することはパフォーマンスの最適化にはつながりません。
処理量が少ないときに useMemo を使用すると、追加の使用オーバーヘッドが発生する可能性があります。

useコールバック

useCallback は関数をキャッシュするために使用されます。何度レンダリングされても、関数は同じ関数です。これにより、新しい関数を絶えず作成することによって引き起こされるパフォーマンスとメモリのオーバーヘッドの問題を軽減できます。

useCallback(コールバック,配列)：

コールバック: ロジックを処理するために使用される関数
配列: useCallback の再実行を制御する配列。useCallback は、配列内の状態が変化した場合にのみ再実行されます。

import {useCallback,useState} from 'react'
function App(){
    const [state,setState] = useState('');
    const input = useCallback((e)=>{
       setState(e.target.value); 
    },[]);
    return <>
    	<input onInput={(e)=>input(e)} />
    </>
}

予防

useCallback は useMemo と組み合わせて使用する必要があります。これは、React.memo メソッドが props の浅い比較を行うためです。小道具が変更されていない場合、再レンダリングされません。

カスタムフック

カスタムフックの最も重要な役割はロジックの再利用であり、データの再利用や UI の再利用ではありません。

フックのカスタマイズとは関数を宣言することです。関数名は命名規則に従って use で始まります。関数内では任意の組み込みフックを使用できます。

import {useEffect}from 'react'
export default function useDomTitle(title){
    useEffect(()=>{
		document.title = title;        
    },[]);
    return;
}

カスタムフックを使用する場合は、使用する必要があるコンポーネントにフックをインポートします。

import useDomTitle from './hooks/useDomTitle'
function APP(){
    useDomTitle('hello');
	return <></>
}

予防

useState の数を減らし、使用する useStates の数を減らすと、フックを返しやすくなり、コンポーネントへのフックの実装がより簡単になります。
読みやすさを優先する
状態オブジェクトの内容を適切に分割する
フックの戻り値の適切な使用
適度に分割されたフック