コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > アプリのパフォーマンスを損なう小道具の間違い

アプリのパフォーマンスを損なう小道具の間違い

DDD
リリース： 2024-11-21 08:20:14
オリジナル
615 人が閲覧しました

eact Props Mistakes That Are Hurting Your App

React の Props は簡単に思えるかもしれませんが、扱いを誤るとアプリの速度が大幅に低下する可能性があります。時間が経つにつれて、いくつかの React プロジェクトをコーディングして確認した後、props 関連の 10 個の間違いが繰り返し発生していることに気づきました。これらの問題はコードにも潜んでいる可能性があります。

でも心配しないでください。私たちはそれらを一緒に解決するためにここにいます。 React アプリをより高速かつ効率的に実行してみましょう!

1} 特定のプロパティのみが必要な場合にオブジェクト全体を渡すのを停止します

コンポーネントに必要なプロパティが 2 つだけである場合に、オブジェクト全体を props として渡すと、使用している値が同じであっても、オブジェクトが更新されるたびに不必要な再レンダリングが行われることになります。

// Not ideal
function UserProfile({ user }) {
  // Only uses name and email
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Better
function UserProfile({ name, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}
ログイン後にコピー
ログイン後にコピー

必要なものだけを渡します。プロパティを重点的に最小限に抑えることで、コンポーネントが再レンダリングされる頻度が減り、アプリのパフォーマンスが大幅に向上します。

2} レンダリングのたびにプロップ内に新しいオブジェクトを作成しないようにします

もう 1 つの隠れた原因は、props でのインライン オブジェクトの作成です。これを行うと、コンポーネントがレンダリングされるたびに新しいオブジェクト参照が作成されます。これらの新しい参照により、値が同じであっても、子コンポーネントが強制的に再レン​​ダリングされます。

// Not efficient
function ParentComponent() {
  return (
    <ChildComponent 
      styles={{ margin: '20px', padding: '10px' }}
      config={{ theme: 'dark', animate: true }}
    />
  );
}

// Smarter approach
const styles = { margin: '20px', padding: '10px' };
const config = { theme: 'dark', animate: true };

function ParentComponent() {
  return (
    <ChildComponent 
      styles={styles}
      config={config}
    />
  );
}
ログイン後にコピー
ログイン後にコピー

オブジェクト定義をコンポーネントの外部に取り出すか、動的に作成されるオブジェクト定義に useMemo を使用します。これは単純な調整ですが、不必要なレンダリングを大幅に減らし、すべてをスムーズに実行し続けることができます。

3} 小道具を不必要に拡散しないようにします

プロップ スプレッド (...props) を使用すると便利に感じるかもしれませんが、多くの場合、良いことよりも害の方が多くなります。不要なプロパティを渡し、コンポーネントのデバッグを困難にし、不要な再レンダリングを引き起こす可能性さえあります。

// Inefficient
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard {...props} />;
}

// A better way
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard name={props.name} email={props.email} />;
}
ログイン後にコピー
ログイン後にコピー

必要な props のみを指定することで、コンポーネントがよりクリーンで予測可能になります。これにより、アプリがより高速になり、メンテナンスが容易になります。

4} コールバック Props を常にメモ化します

メモ化されていないコールバック関数は、静かにパフォーマンスを損なう可能性があります。コンポーネントが再レンダリングされるたびに、新しい関数インスタンスが作成されます。これにより、React.memo を使用した子コンポーネントの最適化が中断されたり、不必要な再レンダリングが発生したりする可能性があります。

// Not optimal
function TodoList() {
  const handleClick = (id) => {
    // handle click
  };

  return <TodoItem onClick={handleClick} />;
}

// Optimal approach
function TodoList() {
  const handleClick = useCallback((id) => {
    // handle click
  }, []); // Include dependencies if needed

  return <TodoItem onClick={handleClick} />;
}
ログイン後にコピー
ログイン後にコピー

コールバック プロパティをメモ化されたコンポーネントに渡すとき、または useEffect で使用するときに、コールバック プロパティを useCallback でラップします。これにより、安定した参照が保証され、不必要な更新が回避されます。

5} 複数のレベルにわたるプロップのドリルを停止します

小道具を使用しない複数のコンポーネントに小道具を渡すことは、不必要な再レンダリングと乱雑なコードを作成する確実な方法です。これはプロップドリルと呼ばれ、アプリが成長するにつれて管理が難しくなる可能性があります。

// Not ideal
function UserProfile({ user }) {
  // Only uses name and email
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Better
function UserProfile({ name, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}
ログイン後にコピー
ログイン後にコピー

すべてのレイヤーにプロパティを渡す代わりに、React Context などのツールや Zustand などのライブラリを使用して、深くネストされたデータを管理します。このアプローチにより、コードがクリーンに保たれ、不必要なレンダリングが回避されます。

6} 配列インデックスをキーとして使用しないでください

配列インデックスをキーとして使用することは無害に見えるかもしれませんが、特に項目が並べ替えられたり削除されたりするリストでは、微妙なバグやパフォーマンスの問題を引き起こす可能性があります。

// Not efficient
function ParentComponent() {
  return (
    <ChildComponent 
      styles={{ margin: '20px', padding: '10px' }}
      config={{ theme: 'dark', animate: true }}
    />
  );
}

// Smarter approach
const styles = { margin: '20px', padding: '10px' };
const config = { theme: 'dark', animate: true };

function ParentComponent() {
  return (
    <ChildComponent 
      styles={styles}
      config={config}
    />
  );
}
ログイン後にコピー
ログイン後にコピー

常に安定した一意の識別子をキーとして使用してください。これにより、React がコンポーネントを適切に追跡し、スムーズな更新と状態の正確な維持が保証されます。

7} 未使用の小道具の譲渡をやめる

不要な props を渡すと、コンポーネントが肥大化し、回避可能な再レンダリングが引き起こされる可能性があります。コンポーネントで使用されていない場合でも、追加の prop はすべてオーバーヘッドに追加されます。

// Inefficient
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard {...props} />;
}

// A better way
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard name={props.name} email={props.email} />;
}
ログイン後にコピー
ログイン後にコピー

コンポーネントを定期的にリファクタリングし、必須ではないプロパティを削除します。コンポーネントがスリムになると、再レンダリングが減り、アプリが高速化されます。

8} 常に適切な Prop タイプを使用する

PropType または TypeScript をスキップすることは、バグやランタイム エラーにつながる可能性があるよくある間違いです。これらのツールは、開発中にプロップ関連の問題を検出するのに役立ち、アプリをより堅牢にしてデバッグしやすくします。

// Not optimal
function TodoList() {
  const handleClick = (id) => {
    // handle click
  };

  return <TodoItem onClick={handleClick} />;
}

// Optimal approach
function TodoList() {
  const handleClick = useCallback((id) => {
    // handle click
  }, []); // Include dependencies if needed

  return <TodoItem onClick={handleClick} />;
}
ログイン後にコピー
ログイン後にコピー

TypeScript または PropTypes を使用すると、問題を早期に発見できるだけでなく、コンポーネントの予測可能性と保守性が向上します。

9} 小道具を直接変更しないでください

プロパティを直接変更することは React の不変原則に反し、予期せぬバグや更新の見逃しにつながることがよくあります。

// Not ideal
function GrandParent({ user }) {
  return <Parent user={user} />;
}

function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  return <span>{user.name}</span>;
}

// Smarter solution
function App() {
  const [user] = useState(userData);

  return (
    <UserContext.Provider value={user}>
      <GrandParent />
    </UserContext.Provider>
  );
}

function Child() {
  const user = useContext(UserContext);
  return <span>{user.name}</span>;
}
ログイン後にコピー

代わりに関数または状態更新を使用して、プロパティを不変に保ちます。これにより、React が変更を適切に追跡し、必要に応じてコンポーネントを再レンダリングできるようになります。

結論

これらのプロパティの間違いは小さいように思えるかもしれませんが、積み重なると時間の経過とともに深刻なパフォーマンスの問題を引き起こします。 React アプリをスムーズに実行し続けるには:

  • コンポーネントが実際に必要とする props のみを渡します。
  • useCallback を使用して関数をメモ化し、不必要なレンダリングを回避します。
  • プロップをドリルする代わりに、Context や Zustand などの状態管理ツールを利用します。
  • プロパティを直接変更しないでください。常に不変の更新を使用してください。
  • TypeScript または PropTypes を使用して、タイプ セーフティを強制し、バグを早期に発見します。

最適化に役立つツール:

  • React DevTools のパフォーマンス タブ: パフォーマンスのボトルネックを特定します。
  • why-did-you-render: 不要なレンダリングを自動的に検出します。
  • ESLint React Hooks プラグイン: フックが適切に使用されていることを確認します。
  • TypeScript: 信頼性を高めるために静的型付けを追加します。

これらの問題を今すぐ修正してください。そうすれば、アプリがより高速になり、応答性が向上し、メンテナンスが容易になることに気づくでしょう。

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

以上がアプリのパフォーマンスを損なう小道具の間違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：JavaScript で「new」ではなく「Object.create」を使用する必要があるのはどのような場合ですか? 次の記事：JavaScript で 2 つのオブジェクト配列を結合するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2275
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2409
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2026
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1914
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1981
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート