React Native がコンポーネントをレンダリングする方法を理解することは、効率的でパフォーマンスの高いアプリケーションを構築するために不可欠です。コンポーネントの状態やプロパティが変更されると、React はそれらの変更を反映するためにユーザー インターフェイス (UI) を自動的に更新します。その結果、React はコンポーネントの render メソッドを再度呼び出して、更新された UI 表現を生成します。

この記事では、3 つの React フックと、React での不必要なレンダリングを防ぐ方法について説明します

• メモを使用
• コールバックを使用
• useRef

これらのツールを使用すると、不必要な再レンダリングを回避し、パフォーマンスを向上させ、値を効率的に保存することでコードを最適化できます。

この記事が終わるまでに、これらの便利な React フックを使用して React アプリケーションを高速化し、応答性を高める方法をよりよく理解できるようになります。

ReactのuseMemoを使う

React では、useMemo を使用して不必要な再レンダリングを防ぎ、パフォーマンスを最適化できます。

useMemo フックを使用して、React コンポーネントでの不必要な再レンダリングをどのように防ぐことができるかを見てみましょう。

関数の結果を記憶し、その依存関係を追跡することにより、useMemo は必要な場合にのみプロセスが再計算されるようにします。

次の例を考えてみましょう:

import { useMemo, useState } from 'react';

    function Page() {
      const [count, setCount] = useState(0);
      const [items] = useState(generateItems(300));

      const selectedItem = useMemo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateItems(count) {
        const items = [];
        for (let i = 0; i 
          
Count: {count}
          
Selected Item: {selectedItem?.id}
           setCount(count   1)}>Increment
        
      );
    }

    export default Page;

上記のコードは、useMemo を使用して selectedItem の計算を最適化する Page という React コンポーネントです。

説明は次のとおりです:

• コンポーネントは、useState フックを使用して状態変数カウントを維持します。
• アイテムの状態は、generateItems関数の結果を使用してuseStateフックを使用して初期化されます。
• selectedItem は、items.find 操作の結果を記憶する useMemo を使用して計算されます。カウントまたは項目が変更された場合にのみ再計算されます。
• generateItems 関数は、指定された数に基づいて項目の配列を生成します。
• コンポーネントは、現在の count 値、selectedItem ID、およびカウントを増やすボタンをレンダリングします。

useMemo を使用すると、items.find 操作の結果をメモ化することでパフォーマンスが最適化されます。これにより、依存関係 (数または項目) が変更された場合にのみ selectedItem の計算が実行されるようになり、後続のレンダリングでの不必要な再計算が防止されます。

メモ化は、レンダリング プロセスに追加のオーバーヘッドをもたらすため、計算集約型の操作に選択的に使用する必要があります。

ReactのuseCallbackの使用

React の useCallback フックを使用すると関数のメモ化が可能になり、各コンポーネントのレンダリング中に関数が再作成されるのを防ぎます。 useCallback を利用する。パーツは一度だけ作成され、その依存関係が変更されない限り、後続のレンダリングで再利用されます。

次の例を考えてみましょう:

import React, { useState, useCallback, memo } from 'react';

    const allColors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    };

    const Filter = memo(({ onChange }) => {
      console.log('Filter rendered!');

      return (
         onChange(e.target.value)}
        />
      );
    });

    function Page() {
      const [colors, setColors] = useState(allColors);
      console.log(colors[0])

      const handleFilter = useCallback((text) => {
        const filteredColors = allColors.filter((color) =>
          color.includes(text.toLowerCase())
        );
        setColors(filteredColors);
      }, [colors]);


      return (
        

        

           setColors(shuffle(allColors))}>
            Shuffle
          
          
        
        

          {colors.map((color) => (
            
{color}
          ))}
        
      
      );
    }

    export default Page;

上記のコードは、React コンポーネントでの単純なカラー フィルタリングとシャッフル機能を示しています。ステップバイステップで見てみましょう:

• 色の初期配列は allColors として定義されます。
• シャッフル関数は配列を受け取り、その要素をランダムにシャッフルします。 Fisher-Yates アルゴリズムを使用してシャッフルを実現します。
• Filter コンポーネントは、入力要素をレンダリングするメモ化された機能コンポーネントです。 onChange プロパティを受け取り、入力値が変化したときにコールバック関数をトリガーします。
• ページ コンポーネントは、カラー フィルタリングおよびシャッフル機能をレンダリングする主要なコンポーネントです。
• 状態変数の色は、useState フックを使用して初期化され、初期値は allColors に設定されます。これは、フィルタリングされた色のリストを表します。
• handleFilter 関数は useCallback フックを使用して作成されます。テキスト パラメータを受け取り、指定されたテキストに基づいて allColors 配列をフィルタリングします。次に、フィルターされた色は、useState フックの setColors 関数を使用して設定されます。依存関係配列 [colors] により、色の状態が変化した場合にのみ handleFilter 関数が再作成され、不必要な再レンダリングを防ぐことでパフォーマンスが最適化されます。
• Page コンポーネント内には、色をシャッフルするためのボタンがあります。ボタンをクリックすると、シャッフルされた allColors.
の配列を使用して setColors 関数が呼び出されます。
• Filter コンポーネントは、handleFilter 関数に設定された onChange プロパティを使用してレンダリングされます。
• 最後に、カラー配列がマッピングされて、カラー項目のリストが
としてレンダリングされます。
• 要素。

useCallback フックは、handleFilter 関数をメモ化するために使用されます。つまり、関数は一度だけ作成され、依存関係 (この場合は色の状態) が同じであれば、その後のレンダリングで再利用されます。

この最適化により、Filter コンポーネントなど、prop として handleFilter 関数を受け取る子コンポーネントの不必要な再レンダリングが防止されます。
これにより、色の状態が変更されていない場合にはフィルター コンポーネントが再レンダリングされなくなり、パフォーマンスが向上します。

React の useRef を使用する

React アプリケーションのパフォーマンスを向上させ、不必要な再レンダリングを回避するためのもう 1 つのアプローチは、useRef フックを使用することです。 useRef を使用すると、レンダリング間で持続する可変値を保存できるため、不必要な再レンダリングを効果的に防ぐことができます。

この手法を使用すると、値が変更されたときにコンポーネントの更新をトリガーせずに、値への参照を維持できます。参照の可変性を活用することで、特定のシナリオでパフォーマンスを最適化できます。

次の例を考えてみましょう:

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

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    

       setName(e.target.value)}
        ref={inputRef}
      />
      Focus
    
  );
}

上の例には、単純な入力フィールドとボタンがあります。 useRef フックは、inputRef という名前の ref を作成します。ボタンをクリックするとすぐに handleClick 関数が呼び出され、inputRef ref オブジェクトの現在のプロパティにアクセスして入力要素に焦点を当てます。そのため、入力値が変更されたときにコンポーネントが不必要に再レンダリングされるのを防ぎます。

useRef を最適に使用するには、コンポーネントのレンダリングに影響を与えない変更可能な値のみに useRef を予約してください。変更可能な値がコンポーネントのレンダリングに影響を与える場合は、代わりにその値をその状態内に格納する必要があります。

結論

このチュートリアル全体を通じて、React の再レンダリングの概念と、それがアプリケーションのパフォーマンスに与える潜在的な影響について調査しました。不必要な再レンダリングを軽減するのに役立つ最適化テクニックを詳しく掘り下げました。 React は、アプリケーションのパフォーマンスを向上させるためのさまざまなフックを提供します。これらのフックを活用することで、レンダー間で値と関数を効果的に保存できるため、React アプリケーションのパフォーマンスが大幅に向上します。