React のコンポーネントと Props を理解する: 再利用可能な UI の基礎

React のコンポーネントとプロップ: ユーザー インターフェイスのビルディング ブロック

React では、コンポーネント と プロップ は、開発者が再利用可能な動的なユーザー インターフェイスを作成できるようにする基本的な概念です。 UI をより小さく管理しやすい部分に分割し、これらの部分間でデータを受け渡すことで、アプリケーション開発を簡素化します。

---

1.コンポーネントとは何ですか?

React の

コンポーネント は、UI の一部を定義する再利用可能な独立したコード ブロックです。コンポーネントは、アプリケーションを構築するための構成要素と考えてください。

コンポーネントの種類

a.機能部品

最も単純なタイプの React コンポーネント。
小道具を受け入れて JSX を返す JavaScript 関数として定義されます。

例:

const Greeting = (props) => {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
};

b.クラスコンポーネント

ES6 クラスを使用して定義されています。
状態メソッドやライフサイクル メソッドなどの追加機能を含めます (React フックの前)。
通常、古い React プロジェクトで使用されます。

例:

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

---

コンポーネントを使用する理由

• 再利用性: 一度作成すれば、同じコンポーネントを複数の場所で使用できます。
• 保守性: UI の集中した小さな部分を管理およびデバッグします。
• 可読性: 複雑な UI をよりシンプルで理解しやすい部分に分割します。

---

2.小道具とは何ですか?

Props (properties の略) は、親コンポーネントから子コンポーネントにデータを渡すためのメカニズムです。 Props は読み取り専用です。つまり、子コンポーネントによって変更することはできません。

プロップの仕組み

引数としてコンポーネントに渡されます。
機能コンポーネントの props オブジェクトまたはクラス コンポーネントの this.props を介してアクセスできます。

例:

const UserCard = (props) => {
  return (
    <div>
      <h2 id="props-name">{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
};

// Usage
<usercard name="John Doe" email="john.doe@example.com"></usercard>

---

3.小道具の主な特徴

• 一方向フロー: プロップは、一方向のデータ フローで親から子に流れます。
• 不変: 受信コンポーネントはプロパティを変更できません。
• 動的: 親コンポーネントは、動的値または変数を子に渡すことができます。

動的プロップの例:

const Greeting = (props) => {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
};

---

4.コンポーネントとプロップを組み合わせる

React アプリケーションは通常、props を使用して通信する複数のコンポーネントで構成されます。この組み合わせにより、階層的で動的な構造を構築できます。

例: Props を含むネストされたコンポーネント

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

---

5.デフォルトのプロップとプロップのタイプ

a.デフォルトの小道具

defaultProps プロパティを使用して、プロパティのデフォルト値を設定できます。

例:

const UserCard = (props) => {
  return (
    <div>
      <h2 id="props-name">{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
};

// Usage
<usercard name="John Doe" email="john.doe@example.com"></usercard>

b.プロップのタイプ

コンポーネントに渡される props のタイプを検証するには、prop-types ライブラリを使用します。

例:

const App = () => {
  const user = { name: "Alice", email: "alice@example.com" };

  return <usercard name="{user.name}" email="{user.email}"></usercard>;
};

---

6. Props と State の違い

Aspect	Props	State
Definition	Passed from parent to child.	Local to the component.
Mutability	Immutable (read-only).	Mutable (can be updated).
Purpose	Share data between components.	Manage internal component data.

アスペクト

---

小道具

状態 定義

親から子に渡されます。 コンポーネントに対してローカル。

可変性

不変 (読み取り専用)。 変更可能 (更新可能)。

目的

コンポーネント間でデータを共有します。 内部コンポーネント データを管理します。

---

7.小道具を使用する場合

データを子コンポーネントに渡します。

1. 動的コンテンツ (ユーザー プロファイル、製品の詳細など) をレンダリングします。

   再利用可能でカスタマイズ可能な UI コンポーネント (ボタン、カードなど) を構築します。

   8.ベストプラクティス

2. コンポーネントを小さく集中的に保つ

   各コンポーネントは単一の目的を果たす必要があります。

3. デフォルトのプロップとプロップ タイプを使用する

   プロパティに適切なデフォルトが設定されていることを確認し、その型を検証します。

4. 小道具の使い過ぎを避ける

   子コンポーネントに大量のデータが必要な場合は、共有コンテキストで管理するか、状態管理ライブラリを使用することを検討してください。

---

命名規則に従ってください

コードの可読性を維持するには、プロップにわかりやすい名前を使用します。

9.結論 コンポーネント と プロップ は、React 開発のバックボーンを形成します。 UI を再利用可能なコンポーネントに分割し、props を使用してデータを動的に渡すことで、スケーラブルで保守性の高いインタラクティブなアプリケーションを作成できます。 React を使用して最新の Web アプリケーションを構築するには、これらの概念を習得することが重要です。

以上がReact のコンポーネントと Props を理解する: 再利用可能な UI の基礎の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。