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

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 サイトの他の関連記事を参照してください。