React アプリケーションを最適化してパフォーマンスを最大化する

導入

私は 3 年以上 React コードを書いています。ただし、私が当初焦点を当てていなかったのは、React のパフォーマンスの最適化でした。ほとんどの場合、技術的負債が蓄積され、パフォーマンスを最適化することが困難になります。

最初から最適化に集中するのは非常に困難ですが、多大な技術的負債を避けるために、時々最適化をスケジュールすることができます。

React の最適化テクニックのいくつかを見ていきます。これはコードを書きながら実装できます。別の方法ではなくこの方法を選択することが問題です。

それでは、始めましょう。

1. 大きなリストの最適化

React にはコンポーネントがあるため、リストのレンダリングは非常に一般的です。大きなリストをレンダリングすることは、レンダリングが遅くなり、メモリ使用量が遅くなる可能性があるため、困難です。仮想化は、このような問題に対処する最良の方法です。表示されているリストのみを単純にレンダリングし、他の項目は必要に応じてレンダリングされます。

React Window と React Virtualized は、仮想化リストの人気のあるライブラリです。ビューポートに表示される項目のみをレンダリングするため、一度にレンダリングされる DOM ノードの数が大幅に減少します。

これは React Window を使用した例です:

    import { FixedSizeList as List } from 'react-window';

    const MyList = ({ items }) => (
      <List
        height={500} // Height of the container
        itemCount={items.length} // Total number of items
        itemSize={35} // Height of each item
        width={300} // Width of the container
      >
        {({ index, style }) => (
          <div style={style}>
            {items[index]}
          </div>
        )}
      </List>
    );

---

2.メモを使用する

useMemo は、計算の結果を記憶する React フックです。したがって、依存関係に変更がない限り、計算の複数の処理は許可されません。これは、関数または計算が高価であり、レンダリングのたびに再実行する必要がないシナリオでパフォーマンスを最適化するのに役立ちます。

useMemo の構文は次のとおりです:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

ご覧のとおり、useMemo は 2 つの引数を取ります。

• 記憶できるように値を返す関数。
• 記憶された値をいつ再計算するかを決定する依存関係の配列。

useMemo の例は次のとおりです:

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

    const ExpensiveComponent = ({ a, b }) => {
      const computeExpensiveValue = (a, b) => {
        console.log('Computing expensive value...');
        return a + b;
      };

      const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

      return (
        

          
Computed Value: {memoizedValue}
        
      );
    };

    const ParentComponent = () => {
      const [a, setA] = useState(1);
      const [b, setB] = useState(2);
      const [count, setCount] = useState(0);

      return (
        

          
           setCount(count + 1)}>Increment Count
        
      );
    };

---

3. コード分割

従来のセットアップでは、アプリケーションのすべてのコンポーネントが 1 つのファイルにバンドルされます。コード分​​割は、アプリケーションをより小さなチャンクに分割するための最適化手法です。より小さなコンポーネントをロードし、他の不要なコンポーネントを回避することで、アプリケーションのロード時間が短縮されます。

コード分割の例を次に示します:

    import React, { useState } from 'react';

    function App() {
      const [component, setComponent] = useState(null);

      const loadComponent = async () => {
        const { default: LoadedComponent } = await import('./MyComponent');
        setComponent(<LoadedComponent />);
      };

      return (
        <div>
          <h1>Code Splitting Example</h1>
          <button onClick={loadComponent}>Load Component</button>
          {component}
        </div>
      );
    }

    export default App;

---

4.遅延ロードに反応する

React.Lazy は、コンポーネントの読み込みを最適化するための重要なメソッドです。これにより、コンポーネントを遅延ロードできるようになります。これは、そのコンポーネントが必要な場合にのみロードされることを意味します。これを使用すると、アプリケーションをより小さなコンポーネントに分割し、オンデマンドでロードできます。

React.lazy() はコンポーネントを動的にインポートするために使用されます。コンポーネントが必要になると、非同期でロードされ、それまではフォールバック UI (ロード スピナーなど) を表示できます。

遅延ロードの例を次に示します:

    import React, { Suspense } from 'react';

    const LazyComponent = React.lazy(() => import('./MyComponent'));

    const App = () => {
      return (
        <div>
          <h1>My App</h1>
          <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
          </Suspense>
        </div>
      );
    };

    export default App;

---

スロットリングとデバウンス

これは React に特有のものだけでなく、関数を呼び出すときの一般的なプログラミングにも当てはまります。スロットリングは、関数が実行される頻度を定義する手法です。関数が調整されている場合、イベントがトリガーされた回数に関係なく、指定された時間間隔内で関数の実行が許可されるのは 1 回だけです。たとえば、ボタンが頻繁に呼び出されないようにするために、ボタンのクリックにスロットリングを追加します。

スロットルの例:

    import React, { useState } from 'react';

    function ThrottledButton() {
      const [count, setCount] = useState(0);

      const throttle = (func, delay) => {
        let lastCall = 0;
        return () => {
          const now = new Date().getTime();
          if (now - lastCall >= delay) {
            lastCall = now;
            func();
          }
        };
      };

      const incrementCount = () => {
        setCount((prevCount) => prevCount + 1);
      };

      const throttledIncrement = throttle(incrementCount, 2000);

      return (
        <div>
          <h1>Count: {count}</h1>
          <button onClick={throttledIncrement}>Click Me</button>
        </div>
      );
    }

    export default ThrottledButton;

デバウンスは、関数の呼び出し後、一定の時間が経過した後に関数が実行されるようにするために使用されます。イベントが繰り返し発生する場合、デバウンス関数は、指定された遅延期間にわたってイベントの発生が停止した後にのみ実行されます。たとえば、ユーザーが検索入力を入力し、候補を提供する場合、ユーザーが入力を完了するまで関数を呼び出す前に数ミリ秒待機します。

デバウンスの例:

    import React, { useState } from 'react';

    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    const DebouncedSearch = () => {
      const [query, setQuery] = useState('');

      const handleSearch = (event) => {
        setQuery(event.target.value);
        console.log('Searching for:', event.target.value);
        // Here you would typically trigger an API call or filter a list based on the query
      };

      const debouncedSearch = debounce(handleSearch, 500);

      return (
        <div>
          <h1>Search</h1>
          <input
            type="text"
            placeholder="Type to search..."
            onChange={debouncedSearch}
          />
          <p>Search Query: {query}</p>
        </div>
      );
    };

    export default DebouncedSearch;

私とつながってください

テクノロジー、イノベーション、その他あらゆることについてつながり、最新情報を入手しましょう! ?

• ツイッター
• リンクトイン

結論

React アプリケーションの最適化は、特に複雑さとサイズが増大するにつれて、アプリケーションがスムーズかつ効率的に実行されるようにするために重要です。リストの仮想化、useMemo によるメモ化、コード分割、遅延読み込み、スロットル、デバウンスなどのテクニックを組み込むことで、React アプリケーションのパフォーマンスを大幅に向上させることができます。

この方法が React アプリケーションのパフォーマンスの最適化に役立つことを願っています。記事をお読みいただきありがとうございます。

以上がReact アプリケーションを最適化してパフォーマンスを最大化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。