Props と状態 React.JS

もちろんです! React の props と state をさらに深く掘り下げて、それらの役割と違いを調べ、より詳細な例を示してみましょう。

小道具 (プロパティ)

1.定義: Props はプロパティの略です。これらは、あるコンポーネントから別のコンポーネント、通常は親コンポーネントから子コンポーネントにデータを渡す方法です。

2.特徴:

読み取り専用: 一度設定されると、子コンポーネントはその props を変更できなくなります。これらは子コンポーネント内では不変です。
構成に使用: 小道具を使用すると、コンポーネントの動作と外観をカスタマイズできます。
データのフロー: Props は、コンポーネント階層の下位へのデータと関数のフローを可能にし、再利用性を促進します。
3.使用法: 文字列、数値、オブジェクト、配列、関数など、あらゆるタイプのデータを props 経由で渡すことができます。

小道具の例:

// ParentComponent.js
function ParentComponent() {
  const message = "Hello, Child!";

  return <ChildComponent greeting={message} />;
}

// ChildComponent.js
function ChildComponent(props) {
  return <h1>{props.greeting}</h1>;
}

この例では:

• ParentComponent は文字列「Hello, Child!」を渡します。 greeting.
というプロパティを介して ChildComponent に送信されます。
• ChildComponent はこの prop を受け取り、

  に表示します。タグ。

州

1.定義: State は、コンポーネントの現在の状態に関する情報を保持する組み込み React オブジェクトです。小道具とは異なり、状態はコンポーネント自体の中で管理されます。

2.特徴:

Mutable: 状態は、setState (クラス コンポーネントの場合) または useState フック (機能コンポーネントの場合) などの関数を使用して変更できます。
コンポーネントに対してローカル: 状態は、それが定義されているコンポーネントに固有であり、リフトアップしない限り、他のコンポーネントからアクセスできません。
反応性: 状態の変化によりコンポーネントの再レンダリングがトリガーされ、UI での動的な更新が可能になります。
3.使用法: 状態は通常、ユーザー入力の管理、コンポーネントのステータスの追跡、ユーザー操作への応答に使用されます。

状態の例:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

この例では:

• Counter コンポーネントは、0 に初期化された count と呼ばれる独自の状態を維持します。
• ボタンをクリックすると、setCount 関数がカウントの状態を更新し、コンポーネントが再レンダリングされて新しいカウントが表示されます。

まとめ

• Props はコンポーネント ツリーにデータを渡すためのもので、読み取り専用です。これらは、カスタマイズ可能な再利用可能なコンポーネントの作成に役立ちます。
• State はコンポーネントの内部状態を管理するためのもので、更新することができ、動的な動作とレンダリングにつながります。

プロパティと状態の区別を理解することは、効果的で組織化された React アプリケーションを構築するために不可欠です。さらに質問がある場合、または詳細な説明が必要な場合は、お気軽にお問い合わせください。

以上がProps と状態 React.JSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。