コードの品質とパフォーマンスを向上させるためのトリックを実装する

React は、ユーザー インターフェイスを構築するための強力な JavaScript ライブラリであり、いくつかのトリックを使用するだけで、よりクリーンで効率的で保守しやすいコードを作成できます。この記事では、よりパフォーマンスが高く読みやすいコードを作成するのに役立つ、React の 5 つの重要なテクニックを紹介します。

---

1. AND (&&) 演算子の代わりに三項演算子を使用して要素をレンダリングします

React では、特定の条件に基づいてコンポーネントや要素を条件付きでレンダリングするのが一般的です。ただし、条件付きレンダリングに && 演算子を使用するのは、評価された式の結果が偽の値 (例: false、null、未定義、0、または '') になる場合に注意が必要な場合があります。意図しないレンダリング動作を回避するには、三項演算子の使用を優先します。

&& 動作の例:

条件付きレンダリングでの && の使用:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

• 最初の例 ({0 &&

  Hello world 5

  }) は、JavaScript では 0 が偽の値であり、React はこれを false として解釈するため、UI に 0 をレンダリングします。ただし、React は何もレンダリングするのではなく、偽の値 (0) 自体をレンダリングします。

• 2 番目の例 ({0 ?

  Hello world 6

  : null}) は 何も表示しません。条件が 0 (偽) であるため、三項演算子は null と評価され、React は何もレンダリングしません。

三項演算子を使用したより良いアプローチ:

&& 演算子に依存する代わりに、三項演算子を使用すると、特に条件が false の場合に、正しいフォールバック コンテンツを確実にレンダリングできます。

{0 ? <h1>Hello world 5</h1> : null}

この場合、条件が false (0) の場合、React は null をレンダリングします。その結果、何もレンダリングされず、より予測可能で意図した動作が提供されます。

---

2. useState を使用した遅延イニシャライザ

React の useState フックは関数を初期値として受け取ることができるため、状態を遅延初期化できます。これは、初期状態の計算にコストがかかる場合、または 1 回だけ実行する必要がある計算に依存している場合に特に便利です。

遅延初期化を使用する理由

• パフォーマンスの向上: 初期状態にコストのかかる計算やデータのフェッチが含まれる場合、遅延初期化により、実際に必要になるまでそのコストを遅らせることができます。
• 不必要な計算を避ける: 初期値として useState に渡す関数は、コンポーネントのマウント中に 1 回だけ実行され、その後のレンダリング中に再計算されません。

例:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

この例では:

• useState(() => Math.random()) は、最初のレンダリング時に 1 回だけ関数を呼び出します。
• これにより、乱数の生成が 1 回だけ行われるようになり、計算に負荷がかかる場合のパフォーマンスが向上します。

---

3.遅延読み込みコンポーネントを使用してパフォーマンスを向上させる

React の React.lazy() と Suspense は、コンポーネントの遅延読み込みに最適なツールです。これにより、JavaScript を小さなバンドルに分割し、必要な場合にのみ読み込むことができます。これにより、初期ロード時間が大幅に短縮され、アプリのパフォーマンスが向上します。

例:

{0 ? <h1>Hello world 5</h1> : null}

この例では:

• React.lazy() を使用すると、LazyComponent.
を動的にインポートできます。
• Suspense コンポーネントは、遅延読み込みコンポーネントが完全にレンダリングされるまで読み込み状態を表示するために使用されます。

遅延読み込みを使用すると、アプリは最初のレンダリングに必要なコンポーネントのみを読み込み、その他のコンポーネントをオンデマンドでフェッチするため、特に大規模なアプリケーションのパフォーマンスが向上します。

---

4. JavaScript でのオプションのチェーンの使用

JavaScript を使用している場合、オプションのチェーン (?.) は、オブジェクトの深くネストされたプロパティにアクセスする際の救世主です。これにより、未定義または null のプロパティにアクセスしようとしたときに発生するエラーが防止されます。最新の JavaScript ではオプションのチェーンを使用でき、null または未定義を手動でチェックすることなく、プロパティに安全にアクセスできます。

例:

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

この例では:

• data?.info?.address は、data または info が未定義または null の場合にエラーをスローすることなく、address プロパティに安全にアクセスします。
• ??アドレスが未定義の場合、演算子はデフォルト値を提供します。

オプションのチェーンを使用しないと、各レベルを手動でチェックする必要があり、すぐにコードが乱雑で読みにくくなる可能性があります。オプションのチェーンにより、クリーンでエラーのない状態が保たれます。

---

5.再レンダリングを避けるためにフォームに useRef を使用する

React でフォームを操作し、入力が変更されるたびにコンポーネントを再レンダリングする必要がない場合は、useState の代わりに useRef を使用することをお勧めします。 useRef は入力フィールドの値を直接保存し、値が変更されたときに再レンダリングをトリガーしないため、大きなフォームのパフォーマンスが向上します。

例:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

この TypeScript の例では:

• useRef は、入力が変更されるたびにコンポーネントを再レンダリングせずに、入力値を追跡するために使用されます。
• nameRef.current は、フォームの送信時に入力値に直接アクセスするために使用されます。

useRef の使用は、フォームの値が検証や動的更新のために再レンダリングをトリガーする必要がない場合に特に便利で、パフォーマンスが重視されるフォームにとって優れた選択肢となります。

---

結論

これら 5 つの React トリックをコードに適用すると、パフォーマンス、可読性、保守性を大幅に向上させることができます。ここで簡単に要約します:

1. 条件付きレンダリングには && の代わりに三項演算子を使用します。
2. useState で遅延初期化を利用します。
3. コンポーネントの遅延読み込みを実装して、初期読み込み時間を短縮します。
4. JavaScript でより安全にプロパティにアクセスするには、オプションのチェーンを使用します。
5. フォームで useRef を使用して、不必要な再レンダリングを回避します。

これらのテクニックを使用すると、React アプリケーションの効率が向上し、保守が容易になり、ユーザー エクスペリエンスが向上し、開発がよりスムーズになります。コーディングを楽しんでください!

以上がコードの品質とパフォーマンスを向上させるためのトリックを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。