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

Reactを使用する際の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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React サーバー レンダリング (SSR) の簡単なガイド
  • react-router4 オンデマンドロード(ピットを埋める)
  • React Native fetch で遭遇する落とし穴の詳細な説明
  • React Router v4 入門ガイド (概要)
  • ReactNative FlatList の使い方と落とし穴パッケージの概要
  • React Native パッケージング apk の落とし穴についての簡単な説明
  • react-native-fsプラグインの使用と遭遇した落とし穴の詳細な説明
  • react-router 4 のアップグレードに関する詳細なガイド
  • ReactNative は、デバッグポートソリューションを構成するためにピットに足を踏み入れます

<<:  MySQL 8.0.12 winx64 解凍バージョンのインストール グラフィック チュートリアル

>>:  Zookeeperスタンドアロン環境とクラスタ環境の構築

推薦する

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

アプレットにおけるwx.getUserProfileインターフェースの具体的な使用

最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...

新しい要素を作成する3つの方法のまとめ

1つ目: テキスト/HTML経由var txt1="<h1>テキスト。<...

ソフトウェア テスト - MySQL (VI: データベース関数)

1.MySQL関数1. 数学関数PI() # 円周率 (pi) の値を返します。デフォルトの小数点...

Linux でショートカットアイコンを設定する方法

序文Linux でショートカットを作成すると、アプリケーションをより速く開くことができます。ここで、...

MySQL で日付を保存するためのベスト プラクティス ガイド

目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...

MySQL インデックス障害の上位 10 の問題の概要

目次背景1. クエリ条件に「or」が含まれているため、インデックスが失敗する可能性があります。 2....

テーブル切り替えのための JavaScript プラグインのカプセル化

この記事では、テーブル切り替えプラグインを実装するためのJavaScriptのカプセル化コードを参考...

JavaScript における clientWidth、offsetWidth、scrollWidth の違い

1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...

Vue ページでよりエレガントに画像を紹介する方法

目次エラーのデモンストレーション計算により画像が変わらない場合は直接インポートするCSS変数による画...

JavaScript イベント委任 (プロキシ) の使用例の詳細

目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...

HTML内のフレームセットタグが正常に表示されない原因の解析と解決方法

<frameset></frameset>は皆さんもよくご存知のものです。こ...

Docker で Spring-boot プロジェクトをデプロイするためのサンプル コード

1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...