React の再レンダリング: 最適なパフォーマンスのためのベストプラクティス-jsチュートリアル-php.cn

React の再レンダリング: 最適なパフォーマンスのためのベストプラクティス

DDD

リリース： 2024-09-12 22:33:02

オリジナル

856 人が閲覧しました

React Re-Rendering: Best Practices for Optimal Performance

React の効率的なレンダリングメカニズムは、その人気の主な理由の 1 つです。ただし、アプリケーションが複雑になるにつれて、コンポーネントの再レンダリングの管理がパフォーマンスを最適化するために重要になります。 React のレンダリング動作を最適化し、不必要な再レンダリングを回避するためのベストプラクティスを見てみましょう。

1. 機能コンポーネントに React.memo() を使用する

React.memo() は、機能コンポーネントのレンダリングをメモ化する高次コンポーネントです。現在のプロップと以前のプロップの浅い比較を実行することで、不必要な再レンダリングを防ぎます。プロパティが変更されていない場合、React はコンポーネントのレンダリングをスキップし、最後にレンダリングされた結果を再利用します。

import React from 'react';

const MemoizedComponent = React.memo(function MyComponent(props) {
  // Component logic
});

ログイン後にコピー

2. クラスコンポーネントの PureComponent の実装

クラスコンポーネントを使用している場合は、Component の代わりに PureComponent を拡張することを検討してください。 PureComponent は、プロパティと状態の浅い比較を実行して、コンポーネントを更新する必要があるかどうかを判断します。これにより、プロパティと状態が変更されていない場合の不要な再レンダリングを回避できます。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // Component logic
}

ログイン後にコピー

3. インライン関数定義を避ける

render メソッド内で関数を定義すると、不必要な再レンダリングが発生する可能性があります。代わりに、render メソッドの外側で関数を定義するか、簡潔なイベントハンドラーのアロー関数を使用してください。

class MyComponent extends React.Component {
  handleClick = () => {
    // Handle click
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

ログイン後にコピー

4. useCallback フックを使用して関数をメモ化する

useCallback フックは関数をメモ化するために使用されます。これにより、レンダリングごとに関数が不必要に再作成されるのを防ぎます。これにより、これらの関数に依存する子コンポーネントが不必要に再レンダリングされる可能性があります。

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // Handle click
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

ログイン後にコピー

5. 高コストの計算には useMemo フックを活用します

useMemo フックは、高価な計算をメモ化するために使用されます。これにより、レンダリングごとに値の不必要な再計算が防止され、特に複雑な計算のパフォーマンスが向上します。

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const filteredItems = useMemo(() => items.filter(item => item.visible), [items]);

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

ログイン後にコピー

6. リスト内でキーを正しく使用する

コンポーネントのリストをレンダリングするときは、常に一意のキープロパティを指定してください。 React はキーを使用して、調整中に要素を効率的に識別します。キーが間違っているか欠落していると、パフォーマンスの問題や予期しない動作が発生する可能性があります。

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

ログイン後にコピー

7. 動的インポートを使用したコード分割の実装

コード分割を使用すると、アプリケーションのコードをより小さなチャンクに分割できます。動的インポート (import()) を使用すると、アプリケーションの一部をオンデマンドでロードできるため、初期バンドルサイズが削減され、ロード時間が短縮されます。

import React, { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

ログイン後にコピー