避けるべき間違い (およびその修正方法)

React 開発者は、最初は便利そうに見えても、最終的には問題を引き起こす可能性がある特定のコーディング パターンに陥りがちです。このブログ投稿では、React によくある 5 つの間違いを検討し、それらを回避してコードの効率性、保守性、拡張性を確保する方法について説明します。

1. キープロップの悪用

間違い:

{myList.map((item, index) => <div key={index}>{item}</div>)}

リスト内のキーとしてインデックスを使用すると、特にリストが変更される可能性がある場合、パフォーマンスの問題やバグが発生する可能性があります。

正しい方法:

{myList.map(item => <div key={item.id}>{item.name}</div>)}

ID フィールドなど、データの一意の識別子をキー プロパティとして使用します。

2. 使いすぎの状態

間違い:

function MyComponent() {
  const [value, setValue] = useState(0);
  // Doesn't change
  return <div>{value}</div>;
}

すべてのデータを状態に置くと、変更されない場合でも、不必要な再レンダリングや複雑さが生じる可能性があります。

正しい方法:

function MyComponent({ value }) {
  return <div>{value}</div>;
}

実際に変更されるデータに対してのみ状態を使用します。静的データにはプロパティまたはコンテキストを使用します。

3. useEffectを正しく活用していない

間違い:

useEffect(() => {
  fetchData();
}, []);

useEffect の依存関係の指定を忘れると、予期しない動作や無限ループが発生する可能性があります。

正しい方法:

useEffect(() => {
  fetchData();
}, []);

いつエフェクトを実行するかを制御するには、たとえ空であっても依存関係配列を常に指定してください。

4. プロペラの穴あけ

間違い:

<Grandparent>
  <Parent>
    <Child prop={value} />
  </Parent>
</Grandparent>

複数のコンポーネント層に props を渡すと、コードの保守が困難になります。

正しい方法: (コンテキスト API の例)

const ValueContext = React.createContext();
<ValueContext.Provider value={value}>
  <Child />
</ValueContext.Provider>

function Child() {
  const value = useContext(ValueContext);
  return <div>{value}</div>;
}

コンテキスト API または状態管理ライブラリを使用して、プロップドリルを回避します。

5. 構成を無視する

間違い:

function UserProfile({ user }) {
  return (
    <div>
      <Avatar src={user.avatar} />
      <Username name={user.name} />
      {/* More user details */}
    </div>
  );
}

コンポーネントを再利用可能にするのではなく、単一の柔軟性のない構造でコンポーネントを作成します。

正しい方法:

function UserProfile({ children }) {
  return <div>{children}</div>;
}

<UserProfile>
  <Avatar src={user.avatar} />
  <Username name={user.name} />
  {/* More user details or different layout */}
</UserProfile>

柔軟性を高めるために、子を受け入れるかプロップをレンダリングするようにコンポーネントを設計します。

これら 5 つの React コーディングの間違いを理解して回避することで、より効率的で保守可能でスケーラブルな React アプリケーションを作成できるようになります。 React スキルの向上を続ける際には、これらの教訓を念頭に置いてください。復習が必要な場合には、いつでも遠慮せずにこのブログ投稿に戻ってください。

結論
これらのよくある React の間違いを回避することで、より効率的で保守性が高く、スケーラブルなコードを作成できます。一意のキーを使用し、状態を賢く管理し、useEffect を正しく利用し、プロップドリルを避け、柔軟な UI デザインのためのコンポジションを採用することを忘れないでください。これらのベスト プラクティスを適用すると、React アプリケーションはより堅牢になり、操作が容易になります。

以上が避けるべき間違い (およびその修正方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。