React コード最適化ガイド: フロントエンドアプリケーションの実行効率を向上させる方法-jsチュートリアル-php.cn

React コード最適化ガイド: フロントエンドアプリケーションの実行効率を向上させる方法

WBOY

リリース： 2023-09-28 11:34:41

オリジナル

1062 人が閲覧しました

React コード最適化ガイド: フロントエンドアプリケーションの実行効率を向上させる方法

React コード最適化ガイド: フロントエンドアプリケーションの運用効率を向上させる方法

フロントエンド開発では、パフォーマンスの最適化が常に重要な問題となっています。 JavaScript のライブラリとフレームワークの中で、現在最も広く使用されているのは React ですが、コードの最適化が正しく行われていない場合、パフォーマンスの問題により React アプリケーションの動作が遅くなる可能性があります。この記事では、React コードの最適化方法をいくつか紹介し、具体的なコード例を示します。

PureComponent の使用:

React では、関数コンポーネントとクラスコンポーネントという 2 つのよく使用されるコンポーネントがあります。機能コンポーネントはステートレスであり、一般にクラスコンポーネントよりもパフォーマンスが優れています。クラスコンポーネントは、React のライフサイクルメソッドと状態を使用して、コンポーネントのレンダリングを管理できます。パフォーマンスを向上させるために、React が提供する PureComponent を使用できます。 PureComponent は、浅い比較を通じてコンポーネントのプロパティと状態が変更されたかどうかを比較し、コンポーネントを再レンダリングするかどうかを決定します。

class MyComponent extends React.PureComponent {
  // ...
}

ログイン後にコピー

不必要な再レンダリングを避ける:

React では、コンポーネントの再レンダリングは、プロパティまたは状態の変更によってトリガーされます。ただし、すべてのプロパティや状態の変更でコンポーネントを再レンダリングする必要があるわけではありません。 shouldComponentUpdate メソッドまたは React.memo を使用することで、不必要な再レンダリングを回避できます。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较props或state是否有变化，返回布尔值决定是否重新渲染
  }
}

ログイン後にコピー

const MyComponent = React.memo(function MyComponent(props) {
  // 组件的渲染
});

ログイン後にコピー

バッチ更新を使用する:

React では、状態が変更されるたびに、コンポーネントの再レンダリングがトリガーされます。パフォーマンスを向上させるために、setState コールバック関数を使用してバッチ更新を実装できます。

this.setState((prevState) => ({ count: prevState.count + 1 }), () => {
  // 在回调函数中进行其他操作
});

ログイン後にコピー

コンポーネント構造を簡素化します:

コンポーネント構造が複雑になるほど、レンダリングのオーバーヘッドが大きくなります。パフォーマンスを向上させるために、コンポーネントの構造を可能な限り単純化し、不要なネストを削除できます。

React フラグメントの使用:

React では、コンポーネントを div でラップするのが非常に一般的です。ただし、余分な div によりレンダリングレベルが増加し、パフォーマンスが低下する可能性があります。 div の代わりに React Fragment を使用すると、不必要なレンダリングレベルを減らすことができます。

return (
  <React.Fragment>
    <Component1 />
    <Component2 />
  </React.Fragment>
);

ログイン後にコピー

遅延読み込みを使用する:

React では、React.lazy と Suspense を使用してコンポーネントの遅延読み込みを実装できます。遅延読み込みによりコンポーネントの読み込みが遅れる可能性があるため、最初のレンダリングの時間が短縮されます。

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

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

ログイン後にコピー

仮想化テクノロジーを使用する:

リスト内の要素の数が多い場合、React のレンダリングパフォーマンスに影響が出る可能性があります。この時点で、react-virtualized や React-window などの仮想化テクノロジを使用してパフォーマンスを最適化できます。仮想化テクノロジーは、目に見える要素のみをレンダリングすることでパフォーマンスを向上させます。

上記は、フロントエンドアプリケーションの動作効率を向上させることができる一般的な React コード最適化方法の一部です。ただし、パフォーマンスの最適化は静的ではないため、プロジェクトごとに異なる最適化戦略が必要になる場合があります。したがって、開発者は、特定のプロジェクトのニーズとパフォーマンスの問題に基づいて、React アプリケーションのパフォーマンスを向上させる適切な最適化方法を選択する必要があります。

参考資料: