React パーツのコンポーネント、状態、プロパティの入門-jsチュートリアル-php.cn

React パーツのコンポーネント、状態、プロパティの入門

DDD

リリース： 2024-10-24 11:08:01

オリジナル

622 人が閲覧しました

Getting Started with React Part Components, State, and Props

React.js への旅へようこそ!前回の投稿では、React の基本を紹介し、動的なユーザーインターフェイスを構築するためのライブラリとしての React の強みを強調しました。今日は、React アプリケーションの作成に不可欠な 3 つの基本的な概念 (コンポーネント、状態、プロパティ) をさらに詳しく掘り下げていきます。これらの概念を詳しく見てみましょう!

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

React コンポーネントは、React アプリケーションの構成要素です。これらは、UI の特定の部分がどのように表示され、どのように動作するかを定義する再利用可能なコードです。コンポーネントはカスタム HTML 要素と考えることができ、機能コンポーネントとクラスコンポーネントという 2 つの主なタイプがあります。

1.機能部品
機能コンポーネントは、React 要素を返す単純な JavaScript 関数です。多くの場合、そのシンプルさと読みやすさにより好まれます。

機能コンポーネントの例:

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

ログイン後にコピー

2.クラスコンポーネント
クラスコンポーネントはより複雑です。これらは React.Component を拡張する ES6 クラスとして定義されます。クラスコンポーネントは独自の状態を保持し、ライフサイクルメソッドを利用できます。

クラスコンポーネントの例:

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

ログイン後にコピー

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

再利用性: コンポーネントはアプリケーション全体で再利用できるため、コードの重複が減少します。
懸念事項の分離: UI をより小さな部分に分割することで、複雑さをより簡単に管理できます。
テスト容易性: コンポーネントが小さいほど、個別にテストするのが簡単です。

小道具を理解する

Props (プロパティの略) は、あるコンポーネントから別のコンポーネントにデータを渡すためのメカニズムです。これらは不変です。つまり、コンポーネントはそれ自身の props を変更できません。

プロップの使用
属性を HTML 要素に渡すのと同じように、プロパティをコンポーネントに渡すことができます。

小道具を渡す例:

function App() {
    return <Greeting name="John" />;
}

ログイン後にコピー

この例では、App コンポーネントは Greeting コンポーネントをレンダリングし、値 "John" を持つ名前プロパティを渡します。

プロップへのアクセス
コンポーネント内では、props オブジェクトを介して props にアクセスできます。

Props へのアクセス例:

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

ログイン後にコピー

状態の管理

状態は、コンポーネントが独自のデータを保持および管理できるようにする組み込みオブジェクトです。小道具とは異なり、状態は変更可能であり、時間の経過とともに、多くの場合ユーザーのアクションに応じて変化する可能性があります。

機能コンポーネントでの状態の使用
機能コンポーネントでは、useStatehook を使用して状態を管理できます。

useStateHook の使用例:

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

ログイン後にコピー

この例では、useState は count 状態変数を 0 に初期化し、setCount は状態を更新する関数です

クラスコンポーネントでの状態の使用

クラスコンポーネントでは、状態は this.state オブジェクトと setState メソッドを使用して管理されます。

クラスコンポーネントでの状態の使用例:

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

ログイン後にコピー

状態 vs プロップ

状態: コンポーネント内で管理されます。通常はユーザーのアクションに応じて、時間の経過とともに変更される可能性があります。
Props: 親によってコンポーネントに渡されます。コンポーネント内で不変です。

この投稿では、React の基本的な概念であるコンポーネント、状態、プロパティについて説明しました。コンポーネントは React アプリケーションの構成要素として機能し、コードの再利用性とより適切な編成を可能にすることを学びました。関数コンポーネントはシンプルさと明確さを提供し、クラスコンポーネントは状態メソッドやライフサイクルメソッドなどの追加機能を提供します。

また、コンポーネント間でデータを受け渡しできるようにする props についても詳しく調べ、保守性を高める一方向のデータフローを促進しました。プロパティを効果的に使用する方法を理解することで、より動的で応答性の高いインターフェイスを作成できます。

最後に、コンポーネントがユーザーインタラクションを管理し、応答できるようにする React の重要な側面である状態について説明しました。機能コンポーネントの useState フックとクラスコンポーネントの setState メソッドを利用して、開発者は時間の経過に伴うデータの変更を反映する対話型アプリケーションを構築できます。

React を使い続ける中で、これらの概念をマスターすると、洗練されたアプリケーションを作成するための強固な基盤が築かれます。次回の投稿では、イベント処理とフォーム管理について詳しく説明し、React ツールキットをさらに充実させます。乞うご期待!

以上がReact パーツのコンポーネント、状態、プロパティの入門の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。