Reactでコンポーネントを作成する方法

序文

このセクションでは、React のコンポーネントの種類と、コンポーネントの作成方法と使用方法を紹介します。

この記事では、次の内容を紹介します。

クラスコンポーネントの作成
関数コンポーネントの作成
レンダリングコンポーネント
合成成分
コンポーネントの抽出
プロパティは読み取り専用です

コンポーネントの紹介

コンポーネントを使用すると、ユーザーインターフェイスを独立した再利用可能なウィジェットに分割し、各ウィジェットを個別に設計できます。

定義上、コンポーネントは JavaScript 関数のようなものです。コンポーネントは任意の入力 (「props」と呼ばれる) を受け取り、画面に表示する内容を記述する React 要素を返すことができます。

Props、つまりプロパティはコード内で props と記述されるため、props を使用してプロパティを参照できます。
Reactにはクラスコンポーネントと関数コンポーネントの2種類のコンポーネントがあります。

クラスコンポーネントの作成

クラスコンポーネントの定義には次の要件があります。

クラスコンポーネントはReact.Componentから継承する必要がある
クラスコンポーネントはレンダリング関数を実装する必要がある

ES6 より前は、create-react-class モジュールを使用してクラスコンポーネントを定義できましたが、公式 Web サイトでは、現在 ES6 クラス定義を使用することが推奨されています。

クラスを使用してコンポーネントを定義します。

クラスAppはComponentを拡張します{
  コンストラクタ() {
    素晴らしい（）
    this.state = {}
  }

  与える（） {
    <h2>Hello App</h2> を返す
  }
}

クラスコンポーネントの各部分を詳しく分析してみましょう。

コンストラクター: これはクラスコンポーネントのコンストラクターです。これはオプションです。通常、コンストラクターでいくつかのデータを初期化します。
this.state: コンストラクターでクラスコンポーネントに状態プロパティを追加します。これは、コンポーネント内のデータを維持するためのさまざまなプロパティを含む、コンポーネント内の状態オブジェクトとして理解できます。同時に、this.state.<プロパティ名> を通じてプロパティにアクセスすることもできます。
render(): このメソッドは、クラスコンポーネントで実装する必要がある唯一のメソッドです。クラスコンポーネントは、render() を通じてコンポーネントの表示コンテンツを返します。

状態について

this.state を通じてクラスコンポーネントにデータオブジェクトを追加でき、this.state.<property name> を通じて setState 内のプロパティにアクセスできます。

コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      名前:"xhs-rookies"
    }
  }

与える（）{
    <h2>{this.state.name}</h2> を返します
  }

ただし、上記の例で name 属性を変更する場合は、react で指定された setState() メソッドを使用して、状態の値を追加または変更する必要があります。

this.state.name = 'new xhs-rookies' //間違った方法、許可されていません this.setState({ name: 'new xhs-rookies' }) //正しい方法

簡単に言うと、React では、データに基づいてページがレンダリングされます。setState() を使用してデータを更新することで、React は render() を実行してページを更新し、ページ上の状態で使用されるすべてのデータを更新するのに役立ちます。

レンダリングについて

render が呼び出されると、this.props と this.state の変更がチェックされ、さまざまな型が返されます。多くの場合、このメソッドに React 要素を返させ、React にレンダリングさせて表示させることを選択します。

反応要素:

通常は JSX 経由で作成されます。
たとえば、<div/> は React によって DOM ノードとしてレンダリングされ、<MyComponent/> は React によってカスタムコンポーネントとしてレンダリングされます。
<div/> と <MyComponent/> はどちらも React 要素です。

render() メソッドの詳細については、React.Component - Render を参照してください。

関数コンポーネントの作成

関数コンポーネントは、function を使用して定義された関数ですが、この関数はクラスコンポーネントの render 関数と同じコンテンツを返します。

クラスコンポーネントと比較して、関数コンポーネントには独自の特性があります。

ライフサイクルはありません。更新されマウントされますが、ライフサイクル機能はありません。
this (コンポーネントインスタンス) はありません。
内部状態なし。

関数コンポーネントを定義しましょう。

デフォルト関数App()をエクスポートする{
  <div>xhs ルーキー</div> を返す
}

レンダリングコンポーネント

前回の記事では、DOM タグを表す React 要素のみを取り上げました。

定数要素 = <div />

ただし、要素はユーザー定義のコンポーネントを表すこともできます。

const 要素 = <Welcome name="xhs rookies" />

React は、ユーザー定義コンポーネントを表す要素に遭遇すると、別のオブジェクト内の対応するコンポーネントに JSX 属性を渡します。これを「props」オブジェクトと呼びます。

たとえば、次のコードはページに「xhs rookies」をレンダリングします。

関数 Welcome(props) {
  戻り値 <h1>こんにちは、{props.name}</h1>
}

const 要素 = <Welcome name="xhs rookies" />
ReactDOM.render(要素、document.getElementById('root'))

上記の例を簡単に説明しましょう。

ReactDOM.render() メソッドを呼び出し、<Welcome name="xhs rookies" /> 要素を渡しました。
React は Welcome コンポーネントを呼び出し、それを props オブジェクトとして {name: 'xhs rookies'} に渡します。
Welcome コンポーネントは <h1>xhs rookies</h1> を返します。
React DOM は DOM を素早く更新して <h1>xhs rookies</h1> を表示します。

注意: コンポーネント名は常に大文字で始まります。

たとえば、<div/> は DOM タグを表しますが、<Welcome/> はコンポーネントを表し、スコープ内に Welcome コンポーネントが必要です。

この理由の詳細については、「Dive into JSX」を参照してください。

合成成分

コンポーネントは出力内で他のコンポーネントを参照できます。これにより、どの抽象化レベルでも同じコンポーネントを使用できるようになります。ボタン、フォーム、ダイアログ、画面: React アプリケーションでは、これらはすべて通常コンポーネントとして記述されます。

たとえば、 App コンポーネントを作成し、その中に Welcome を複数回レンダリングすることができます。

関数 Welcome(props) {
  戻り値 <h1>こんにちは、{props.name}</h1>
}

関数App() {
  戻る （
    <div>
      <ようこそ name="rookie-Sara" />
      <ようこそ name="rookie-Cahal" />
      <ようこそ name="rookie-Edite" />
    </div>
  ）
}

 
ReactDOM.render(<App />, document.getElementById('root'))

通常、新しい React アプリには、トップレベルの App コンポーネントが 1 つあります。ただし、React を既存のアプリケーションに統合する場合は、Button などの小さなコンポーネントから始めて、徐々にビューレイヤーの最上位レベルに統合していくという、下から上への作業が必要になる場合があります。

コンポーネントの抽出

コンポーネントを複数の小さなコンポーネントに分割することを恐れないでください。

たとえば、コメントコンポーネントを考えてみましょう。

関数コメント(props) {
  戻る （
    <div className="コメント">
      <div className="ユーザー情報">
        <img className="アバター" src={props.author.avatarUrl} alt={props.author.name} />
        <div className="UserInfo-name">{props.author.name}</div>
      </div>
      <div className="コメントテキスト">{props.text}</div>
      <div className="コメント日付">{formatDate(props.date)}</div>
    </div>
  ）
}

author (オブジェクト)、text (文字列)、date (日付) をプロパティとして受け入れます。

このコンポーネントはネストされているため変更が難しく、一部を再利用することも困難です。そこからいくつかのコンポーネントを抽出してみましょう。

まず、アバターを抽出します。

関数アバター(props) {
  <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> を返します。
}

Avatar コンポーネントは、Comment 内でどのようにレンダリングされるかを気にしません。このため、プロパティには、author ではなく user というより一般的な名前を付けました。

プロパティの命名は、使用されるコンテキストではなく、コンポーネント自体の観点から行うことをお勧めします。

Comment コンポーネントを少し簡略化することができます。

関数コメント(props) {
  戻る （
    <div className="コメント">
      <div className="ユーザー情報">
        <アバターユーザー={props.author} />
        <div className="UserInfo-name">{props.author.name}</div>
      </div>
      <div className="コメントテキスト">{props.text}</div>
      <div className="コメント日付">{formatDate(props.date)}</div>
    </div>
  ）
}

次に、ユーザー名の横にアバターを表示するために使用される UserInfo コンポーネントを抽出します。

関数UserInfo(props) {
  戻る （
    <div className="ユーザー情報">
      <アバターユーザー={props.user} />
      <div className="UserInfo-name">{props.user.name}</div>
    </div>
  ）
}

これにより、コメントコンポーネントをさらに簡素化できます。

関数コメント(props) {
  戻る （
    <div className="コメント">
      <UserInfo ユーザー = {props.author} />
      <div className="コメントテキスト">{props.text}</div>
      <div className="コメント日付">{formatDate(props.date)}</div>
    </div>
  ）
}

コンポーネントの抽出は面倒な作業のように思えるかもしれませんが、大規模なアプリでは、再利用可能なコンポーネントを大量に得られるというメリットがあります。経験則としては、UI の一部が複数回使用される場合 (ボタン、パネル、アバター)、または十分に複雑な場合 (アプリ、フィードストーリー、コメント)、それを再利用可能なコンポーネントにするのが最善です。

プロパティは読み取り専用です

コンポーネントを関数として宣言するかクラスメソッドとして宣言するかに関係なく、コンポーネント自体のプロパティを変更することはできません。次の sum 関数を考えてみましょう。

関数 sum(a, b) {
  a + bを返す
}

このような関数は、入力を変更しようとせず、同じ入力に対して常に同じ結果を生成するため、「純粋関数」と呼ばれます。

一方、次の関数は入力の値を変更するため、不純な関数です。

関数 withdraw(アカウント, 金額) {
  アカウント合計 -= 金額
}

React は柔軟性に優れていますが、厳格なルールが 1 つあります。

注意: すべての React コンポーネントは純粋な関数である必要があり、独自のプロパティを変更することは禁止されています。
もちろん、アプリケーション UI は常に動的であり、いつでも変更される可能性があります。

UI を動的に変更したい場合は、上で説明した状態が関係します。状態を動的に変更することでページ全体をレンダリングしますが、これについては後述します。詳細については、setStateの詳細な理解を参照してください。

React でコンポーネントを作成する方法についての記事はこれで終わりです。React でコンポーネントを作成する方法についての詳細な内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: