React アプリを高速化するためのヒント!

皆さん、こんにちは。このブログ投稿では、React アプリケーションを思ったよりも速くするためのヒントをいくつか紹介します。これらのベスト プラクティスに従うことで、React アプリケーションのスケーラビリティと保守性を確保しながら、パフォーマンスを大幅に向上させることができます。エンタープライズ アプリケーションにおける優れたアプローチをいくつか紹介しましょう:

React.memo の素晴らしい使い方

React.memo を使用して機能コンポーネントをラップし、プロパティが変更されていない場合に不要な再レンダリングを防ぎます。

<code class="language-javascript">import React from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('Rendered Child');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount((p) => p + 1)}>Increment</button>
      <ChildComponent count={count} />
    </div>
  );
};</code>

ステータスを適切に管理する✅

状態のプロモーション: 深くネストされたコンポーネントでの冗長な状態を避けるために、必要な場所にのみ状態を配置します。

<code class="language-javascript">const Child = ({ onIncrement }) => (
  <button onClick={onIncrement}>Increment</button>
);

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount((p) => p + 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Child onIncrement={increment} />
    </div>
  );
};</code>

サスペンスと React.lazy、コード分割の力

コンポーネントを動的にインポートし、必要な場合にのみロードして、初期パッケージのサイズを削減します。

<code class="language-javascript">import React, { Suspense } from 'react';
import Loader from './Loader';

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

const App = () => (
  <Suspense fallback={<Loader />}>
    <ProductsList />
  </Suspense>
);</code>

キーの重要性!

レンダリングされたすべての配列要素を一意にすることで、React が変更を認識できるようにします。

<code class="language-javascript">const ProductsList = ({ products }) => (
  <ul>
    {products.map((p) => (
      <li key={p.id}> - {p.name}</li>
    ))}
  </ul>
);</code>

仮想化はあなたの良い助っ人です

大量のデータをレンダリングする場合は仮想化を使用します。

<code class="language-javascript">import { FixedSizeList as List } from 'react-window';

const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

const Row = ({ index, style }) => (
  <div style={style}>
    <p>{items[index]}</p>
  </div>
);

const MyList = () => (
  <List height={300} width={300} itemSize={35} itemCount={items.length}>
    {Row}
  </List>
);</code>

上記の方法を使用すると、React アプリが超高速になり、目立つようになり、より多くのチャンスを掴むことができるようになります。読んでいただきありがとうございます。この記事が役に立った場合は、「いいね！」をお願いします。

以上がReact アプリを高速化するためのヒント!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。