React アプリケーションの最適化: パフォーマンスを向上させるためのシンプルなテクニック

React はユーザー インターフェイスを構築するための人気のあるツールですが、アプリが大きくなるにつれて速度が低下する可能性があります。この記事では、React アプリを最適化するために使用できるさまざまなテクニックを説明します。

1. React.memo で不必要な再レンダリングを回避します

常に更新する必要がないコンポーネントがある場合は、React.memo でラップします。これにより、React は最後の出力を記憶し、何も変更されていない場合は再レンダリングをスキップします。

import React from 'react';

const MyComponent = React.memo((props) => {
  // Your component logic
});

2. PureComponent による余分な作業を防止

クラスコンポーネントを使用している場合は、React.Component の代わりに React.PureComponent を拡張します。これは、プロパティまたは状態が実際に変更された場合にのみ再レンダリングするように React に指示します。

import React from 'react';

class MyComponent extends React.PureComponent {
  // Your component logic
}

3. useCallback と useMemo を使用して作業を保存します

React フック useCallback と useMemo は、関数と値を記憶することで作業を節約するのに役立ちます。これにより、コンポーネントがレンダリングされるたびに新しいコンポーネントを作成する必要がなくなります。

• useCallback: 関数を記憶します。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• useMemo: 値を記憶します。

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

4. React.lazy と Suspense を使用してコードをオンデマンドでロードする

React.lazy と Suspense を使用して、必要な場合にのみコードの一部を読み込みます。これにより、初期ロードが速くなります。

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

5. ルートごとにコードを分割

コードをルートごとに分割して、各ページに必要なコードのみをロードします。これにより、初期ロード時間が短縮されます。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <switch>
          <route path="/" exact component="{Home}"></route>
          <route path="/about" component="{About}"></route>
        </switch>
      </suspense>
    </router>
  );
}

6. イメージとコンポーネントの遅延読み込み

必要になるまで画像とコンポーネントの読み込みを遅らせます。これにより、初期ロード時間とパフォーマンスが向上します。

• 画像の遅延読み込み: オフスクリーン画像を延期するには、img タグのloading属性を使用します。

<img src="image.jpg" alt="React アプリケーションの最適化: パフォーマンスを向上させるためのシンプルなテクニック" loading="lazy">

• 遅延ロードコンポーネント: コンポーネントには React.lazy と Suspense を使用します。

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

7. JSX ではインライン関数を避ける

JSX のインライン関数は毎回新しいインスタンスを作成するため、処理速度が低下する可能性があります。 render メソッドの外側で定義するか、useCallback.
を使用してください。

// Instead of this
<button onclick="{()"> doSomething()}>Click me</button>

// Do this
const handleClick = useCallback(() => {
  doSomething();
}, []);
<button onclick="{handleClick}">Click me</button>

8. React Virtualization を使用して大きなリストを最適化する

大きなリストを扱う場合は、react-window や React-virtualized などのライブラリを使用して、画面に表示されているものだけをレンダリングして負荷を軽減します。

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

const MyList = ({ items }) => (
  <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
    {({ index, style }) => (
      <div style="{style}">
        {items[index]}
      </div>
    )}
  </list>
);

9. スロットルイベントとデバウンスイベント

頻繁に使用する関数をスロットルまたはデバウンスして、実行頻度を制御します。これは、スクロールや入力などのイベントに特に役立ちます。

import { useCallback } from 'react';
import { debounce } from 'lodash';

const handleInputChange = useCallback(
  debounce((value) => {
    // Handle the change
  }, 300),
  []
);

10. リストに一意のキーを使用する

各リスト項目に一意のキー プロパティがあることを確認してください。これにより、React がアイテムを追跡し、効率的に更新できるようになります。

const items = list.map((item) => (
  <listitem key="{item.id}"></listitem>
));

11. 本番ビルドをデプロイする

縮小やデッドコードの削除などの最適化のメリットを得るには、常に React アプリの実稼働ビルドを使用してください。

# Create a production build
npm run build

これらのテクニックを使用すると、React アプリケーションをより高速かつ効率的に実行でき、ユーザーにより良いエクスペリエンスを提供できます。最適化は継続的なプロセスであるため、アプリのプロファイリングと改善を定期的に続けてください。

コーディングを楽しんでください。

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