Reactを使用する際の7つの落とし穴のまとめ

1. コンポーネントの肥大化
2. 状態を直接変更する
3. プロパティは数値を渡す必要があるが文字列が渡される、またはその逆
4. リストコンポーネントでキーが使用されていない
5. setStateは非同期操作です
6. Reduxの頻繁な使用
7. コンポーネント名は大文字で始まっていない
あとがき

React は非常に人気のあるフロントエンドフレームワークです。今日は、React 開発者が注意すべき 7 つのポイントについて説明します。

1. コンポーネントの肥大化

React 開発者は必要なだけのコンポーネントを作成しません。この問題は React 開発者に限らず、多くの Vue 開発者にも影響を及ぼします。

もちろん、ここでは React について話しています。

React では、さまざまなタスクを実行するために多くのコンテンツを含むコンポーネントを作成できますが、コンポーネントを簡潔に保つことが最適です。つまり、1 つのコンポーネントは 1 つの関数に関連付けられます。これにより、時間を節約できるだけでなく、問題を正確に特定するのにも役立ちます。
たとえば、以下の TodoList コンポーネント:

// ./components/TodoList.js

'react' から React をインポートします。

'../hooks/useTodoList' から useTodoList をインポートします。
'../hooks/useQuery' から useQuery をインポートします。
'./TodoItem' から TodoItem をインポートします。
'./NewTodo' から NewTodo をインポートします。

定数TodoList = () => {
  定数 getQuery, setQuery } = useQuery();
  定数todos = useTodoList();
  戻る （
    <div>
      <ul>
        {todos.map(({ id, title, 完了 }) => (
          <TodoItem キー={id} id={id} タイトル={title} 完了={完了} />
        ))}
        <新しいTodo />
      </ul>
      <div>
        不完全な項目のクエリを強調表示します:
        <入力値={getQuery()} onChange={e => setQuery(e.target.value)} />
      </div>
    </div>
  );
};

デフォルトの TodoList をエクスポートします。

2. 状態を直接変更する

React では、状態は不変である必要があります。状態を直接変更すると、修正が困難なパフォーマンスの問題が発生します。
たとえば、次の例をご覧ください。

constmodifyPetsList = (要素、ID) => {
  ペットリスト[id].checked = 要素.target.checked;
  ペットリストを設定します。
}

上記の例では、配列オブジェクト内のチェックされたキーを変更します。しかし、問題があります。同じ参照を使用してオブジェクトが変更されたため、React はそれを監視できず、再レンダリングをトリガーできません。

この問題を解決するには、setState() メソッドまたは useState() フックを使用する必要があります。

前の例を useState() メソッドを使用して書き直します。

constmodifyPetsList = (要素、ID) => {
  const { チェック済み } = 要素.target;
  setpetsList((ペット) => {
    戻り値: pets.map((pet, index) => {
      if (id === インデックス) {
        pet = { ...pet、チェック済み };
      }
      ペットを返す;
    });
  });
};

3. プロパティは数値を渡す必要があるが文字列が渡される、またはその逆

これは非常に小さなエラーであり、発生するはずがありません。
たとえば、次の例をご覧ください。

クラスArrivalはReact.Componentを拡張します。
  与える（） {
    戻る （
      <h1>
        こんにちは！ {this.props.position === 1 ? "first!" : "last!"} に到着しました。
      </h1>
    );
  }
}

ここで、=== は文字列 '1' に対して無効です。この問題を解決するには、props 値を渡すときに {} でラップする必要があります。
修正内容は以下のとおりです。

// ❌
const要素 = <到着位置='1' />;

//✅
const要素 = <到着位置={1} />;

4. キーはリストコンポーネントで使用されていません

次のリスト項目をレンダリングする必要があるとします。

const リスト = ['cat', 'dog', 'fish'];

与える（） {
  戻る （
    <ul>
      {リスト.map(リスト番号 =>
        <li>{リスト番号}</li>)}
    </ul>
  );
}

もちろん、上記のコードは機能します。リストが大きく、変更する必要がある場合、レンダリングの問題が発生します。

React は、ドキュメントオブジェクトモデル (DOM) 上のすべてのリスト要素を追跡します。リストに何が起こったかを React に伝える記録はありません。

この問題を解決するには、リスト要素にキーを追加する必要があります。キーは各要素に一意の ID を与え、React がどの項目が追加、削除、または変更されたかを判断するのに役立ちます。
次のように：

<ul>
  {リスト.map(リスト番号 =>
    <li キー = {リスト番号} > {リスト番号}</li>)}
</ul>

5. setStateは非同期操作です

React の状態は非同期的に動作することを忘れがちです。値を設定した直後にアクセスしようとすると、すぐに値を取得できない可能性があります。
次の例を見てみましょう。

ハンドルペット更新 = (ペット数) => {
  this.setState({ petCount });
  this.props.callback(this.state.petCount); // 古い値
};

これを処理するためのコールバック関数である setState() の 2 番目のパラメータを使用できます。例えば：

ハンドルペット更新 = (ペット数) => {
  this.setState({ petCount }, () => {
    this.props.callback(this.state.petCount); // 更新された値
  });
};

6. Reduxの頻繁な使用

大規模な React アプリでは、多くの開発者が Redux を使用してグローバル状態を管理します。
Redux は便利ですが、すべての状態を管理するために Redux を使用する必要はありません。
アプリケーションに情報を交換する必要がある並列レベルのコンポーネントがない場合、プロジェクトに追加のライブラリを追加する必要はありません。たとえば、コンポーネント内のフォームボタンの状態を変更する場合は、state メソッドまたは useState フックを優先します。

7. コンポーネント名は大文字で始まっていない

JSX では、小文字で始まるコンポーネントは HTML 要素にコンパイルされます。

したがって、次のことは避けるべきです。

クラスdemoComponentNameはReact.Componentを拡張します{
}

これによりエラーが発生します: React コンポーネントをレンダリングする場合は、大文字で始める必要があります。
次に、次のように記述します。

クラスDemoComponentNameはReact.Componentを拡張します。
}

あとがき

上記の内容は、React を使用する際に避けるべき 10 の間違いから抜粋したものです。言い換えアプローチを使用して、さらに実用的な 7 つの内容を抽出しています。

これで、React を使用する際に陥りやすい落とし穴 7 つについての記事は終了です。React の落とし穴に関する関連記事については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: