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+Springbootでインターフェースシグネチャを実装するためのサンプルコード

1. 実装のアイデアインターフェース署名の目的は、リクエストパラメータが改ざんされていないか、リクエ...

HTML で margin:0 auto を使用するとページ全体が中央に配置されない問題の解決方法

今日、jsp ページを書きました。<div style="margin:0 auto...

Vueはプログレスバーの変更効果を実現します

この記事ではVueを使ってプログレスバーの変更を簡単に実装してみましたので参考にしてください。具体的...

スタイル属性 (element.style) で定義されたインライン スタイルを削除する方法

Magento を頻繁に変更する場合、element.style に遭遇することがあります。 これは...

キーフリーログインプロセスを実現するためのLinux構成の分析

1.sshコマンドLinux では、ssh コマンドを使用して別のサーバーにログインできます。 2 ...

CSS flex 複数列レイアウト

基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...

Docker で Redis センチネル モードを構成する方法 (複数のサーバー上)

目次序文状態DockerをインストールするRedisのマスターノードとスレーブノードを構成する序文以...

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...

MySql データ型チュートリアル例の詳細な説明

目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...

Centos8 でローカル Web サーバーを構築するための実装手順

1 概要システム Centos8 では、httpd を使用してローカル Web サーバーを構築します...

Windows に Docker をインストールする詳細なチュートリアル

ローカルの MySQL バージョンが比較的低いため、最近 MySQL のバージョンをアップグレードす...

html-cssタグのスタイル設定が機能しない2つの理由

1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...

5分でReactルーティングについてお教えします

目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...

MySQL解凍版のインストール手順の詳しい説明

1. 公式サイトにアクセスします: D:\mysql-5.7.21-winx64\bin をダウンロ...

フロントエンドの面接でよく聞かれる JavaScript の質問の完全なリスト

目次1. 手書きのインスタンス2.配列のマップメソッドを実装する3. Reduceは配列のmapメソ...