「React」のコンポーネント(エレメント)として、「Reactコンポーネント」「Reactエレメント」「ステートレスコンポーネント指向」「ステートフルコンポーネント」について紹介します。

「React」のコンポーネント(エレメント)

「React」のコンポーネント(エレメント)として、「Reactコンポーネント」「Reactエレメント」「ステートレスコンポーネント指向」「ステートフルコンポーネント」について紹介します。

■関連する比較ページ

「React」のコンポーネント(エレメント)

■Reactコンポーネント

コンポーネントとは「UIを独立した再利用可能な部分に分割したもの」と捉えることができます。分割することで各部分について個別に考えることができます。

Reactアプリケーションでは、「ボタン」「フォーム」「ダイアログ」「画面」などのすべての項目について、コンポーネントとして表現されます。

概念的には、コンポーネントは「JavaScript関数のようなもの」で、任意の入力を受け入れ、何が画面に表示されるべきかを記述するReactエレメントを返します。

コンポーネントは、出力において他のコンポーネントを参照できます。これにより、どのレベルであっても同じコンポーネント抽象化を使用できます。

■Reactエレメント

「エレメント」とは「コンポーネントをインスタンス化したもの」を表し、Reactアプリケーションの最小ビルディングブロックとなります。

■ステートレスコンポーネント指向

Reactでは、コンポーネントを組み合わせてUIを構築していきます。

Reactには「コンポーネントを極力ステートレス(状態不保持)にすることで、コンポーネントを管理しやすくする」「ステート(状態)を保持するコンポーネントを最小限にして、ステートレスコンポーネントを組み上げていく」という特徴があります。

各コンポーネントは親コンポーネントからデータを渡され、それを元にViewを構築します。コンポーネント自身はステート(状態)を持たずに、入力されたデータによって一意な表示を出力します。

このステートレスコンポーネント指向により、「高メンテナンス性」「高い再利用性」を持つコンポーネント群を構築できます。

■ステートフルコンポーネント

Reactは、ステートフルコンポーネントの構築も可能です。

状態管理ロジックをJavaScriptで記述して、独自の状態を管理するカプセル化されたコンポーネントを構築することで、複雑なUI群の状態管理を行えます。

React最新TOPICS

【OSS】UI構築用JavaScriptライブラリ「React 16.0」リリース---コアアーキテクチャ「Fiber」、「MIT License」で公開する初のメジャーリリース(2017年10月04日 11:03)

FacebookのReact開発チームは、9月26日、 UI構築用JavaScriptライブラリ「React 16.0」を公開した。 【Reactとは】 https://www.ossnews.jp/oss_info/React 【ポイント】 ・新しいコアアーキテクチャ「Fiber」 ・多数の機能強化 ・エラー処理改善 ・高速化 ・議論になっていたライセンスの変更も実施(...

React最新CLOSEUPコラム

イベント情報

セミナー講演資料

無料資料プレゼント

2021/03/04 セキュリティDAYS Keyspider資料

講演資料を見るには、 プライバシーポリシーに同意して、送付先メールアドレスをご入力しご請求ください。

またご入力いただきました情報は、当該資料の作成・提供企業とも共有させていただき、当社及び各社のサービス、製品、セミナー、イベントなどのご案内に使用させていただきます。

本資料を見るには次の画面でアンケートに回答していただく必要があります。



セミナー講演資料公開中

CI/CDが開発ガバナンスの弱体化を招く?回避する方法とは ~複数ツールの組み合わせで生じる問題を、統合プラットフォーム「GitLab」で解決~

エンジニアにとって「情報発信」は重要なのか? ~テックピット DEVELOPERS RESKILLING CONFERENCE クロージングセッション~

リアルタイム性の高いIoTの課題とは?スマートシティを支えるMQTT ~IoTメッセージングプラットフォームを活用し、セキュリティ確保や通信到達保障を簡単に実現~

  • オープソース書籍(サイド)
  • OSSNEWSに広告を掲載しませんか?

facebook

twitter