Reactコンポーネント–例を含むReactJSの小道具と状態



Reactコンポーネントに関するこのブログでは、コンポーネントの基本、コンポーネントの作成方法、およびすべてのReactコンポーネントのライフサイクルについて説明しています。

「Reactでは、すべてがコンポーネントです」

Reactに精通している場合は、このフレーズを何度も聞いたり読んだりしたことがあるはずです。しかし、それが正確に何を意味し、どのように使用されるか知っていますか?そうでない場合は、このブログを読んで、Reactコンポーネントとライフサイクルのさまざまなフェーズについてすべて学んでください。あなたが終わる頃にはきっと このブログを読むと、Reactコンポーネントとそれを取り巻く概念について完全に理解できます。ただし、先に進む前に、これから説明するトピックを簡単に確認してください。

doubleをintjavaにキャストする方法

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

以前の開発者は、単純なシングルページアプリケーションを開発するために1000行のコードを作成する必要がありました。これらのアプリケーションのほとんどは、従来のDOM構造に従っており、それらに変更を加えることは、開発者にとって非常に困難で退屈な作業でした。変更が必要な要素を手動で検索し、それに応じて更新する必要がありました。小さなミスでもアプリケーションの失敗につながります。さらに、DOMの更新には非常に費用がかかりました。したがって、コンポーネントベースのアプローチが導入されました。このアプローチでは、アプリケーション全体がコンポーネントと呼ばれる論理チャンクに分割されます。 Reactは、このアプローチを選択したフレームワークの1つでした。あなたがウェブ開発であなたのキャリアを築くことを計画しているなら、早いスタートはあなたのためにたくさんの機会を開くでしょう。





これらのコンポーネントが何であるかを理解しましょう。

Reactコンポーネントは、ユーザーインターフェイスの構成要素と見なされます。これらの各コンポーネントは同じスペース内に存在しますが、互いに独立して実行されます。 Reactコンポーネントには、独自の構造、メソッド、およびAPIがあります。それらは再利用可能であり、必要に応じてインターフェースに注入できます。理解を深めるために、UI全体をツリーと見なしてください。ここで、開始コンポーネントがルートになり、独立した各部分がブランチになり、さらにサブブランチに分割されます。



UIツリー-Reactコンポーネント-Edurekaこれにより、UIが整理され、データと状態の変更がルートからブランチ、そしてサブブランチに論理的に流れるようになります。コンポーネントはクライアント側から直接サーバーを呼び出します。これにより、ページを更新せずにDOMを動的に更新できます。これは、reactコンポーネントがAJAXリクエストの概念に基づいて構築されているためです。各コンポーネントには、サーバーを呼び出して更新できる独自のインターフェイスがあります。これらのコンポーネントは互いに独立しているため、他のコンポーネントやUI全体に影響を与えることなく更新できます。

を使用しております React.createClass() コンポーネントを作成するメソッド。このメソッドには、Reactコンポーネントを定義するオブジェクト引数を渡す必要があります。各コンポーネントには、1つだけが含まれている必要があります render() 方法。これは、JavaScriptでHTMLを解析するコンポーネントであるJSXの最も重要なプロパティです。この render() コンポーネントのHTML表現をDOMノードとして返します。したがって、すべてのHTMLタグは、内部の囲みタグで囲む必要があります。 render()

以下は、コンポーネントを作成するためのサンプルコードです。



import React from'react 'import ReactDOM from'react-dom' class MyComponent extends React.Component {render(){return(

あなたのIDは{this.state.id}です

)}} ReactDOM.render(、document.getElementById( 'content'))

州と小道具

Reactコンポーネントのライフサイクル

Reactは、コンポーネントのライフサイクルの特定の段階が発生したときに通知するさまざまなメソッドを提供します。これらのメソッドはライフサイクルメソッドと呼ばれます。 これらのライフサイクルメソッドはそれほど複雑ではありません。これらのメソッドは、コンポーネントのライフサイクルのさまざまな時点で呼び出される特殊なイベントハンドラーと考えることができます。これらのメソッドに独自のコードを追加して、さまざまなタスクを実行することもできます。コンポーネントのライフサイクルについて言えば、ライフサイクルは4つのフェーズに分かれています。彼らです:

  1. 初期段階
  2. 更新フェーズ
  3. 小道具の変更フェーズ
  4. アンマウントフェーズ

これらの各フェーズには、それらにのみ固有のライフサイクルメソッドがいくつか含まれています。それでは、これらの各フェーズで何が起こるかを見てみましょう。

a。初期段階– Reactコンポーネントのライフサイクルの最初のフェーズは、初期フェーズまたは初期レンダリングフェーズです。このフェーズでは、コンポーネントは、その旅を開始し、DOMに到達しようとしています。このフェーズは、事前定義された順序で呼び出される次のメソッドで構成されます。

  1. getDefaultProps(): このメソッドは、のデフォルト値を指定するために使用されます this.props 。コンポーネントが作成される前、または親からの小道具が渡される前に呼び出されます。
  2. getInitialState(): この方法は、指定する のデフォルト値 this.state コンポーネントが作成される前。
  3. componentWillMount(): これは、コンポーネントがDOMにレンダリングされる前に呼び出すことができる最後のメソッドです。しかし、あなたが呼び出す場合 setState() このメソッド内では、コンポーネントは再レンダリングされません。
  4. render(): Th isメソッドは、単一のルートHTMLノードを返す役割を果たし、すべてのコンポーネントで定義する必要があります。あなたは戻ることができます ヌル または false 何もレンダリングしたくない場合に備えて
  5. componentDidMount(): コンポーネントがレンダリングされてDOMに配置されると、これは メソッドが呼び出されます。ここでは、任意のDOMクエリ操作を実行できます。

b。更新フェーズ– コンポーネントがDOMに追加されると、状態の変化が発生した場合にのみ、コンポーネントを更新および再レンダリングできます。状態が変化するたびに、コンポーネントは render() 再び。このコンポーネントの出力に依存するコンポーネントは、 render() 再び。これは、コンポーネントがそれ自体の最新バージョンを表示していることを確認するために行われます。したがって、コンポーネントの状態を正常に更新するには、次のメソッドが指定された順序で呼び出されます。

  1. shouldComponentUpdate(): このメソッドを使用すると、コンポーネントがそれ自体を更新する動作を制御できます。このメソッドからtrueを返す場合、コンポーネントが更新されます。それ以外の場合、このメソッドがfalse、コンポーネントは更新をスキップします。
  2. componentWillUpdate(): T彼の方法は jコンポーネントが更新される直前。このメソッドでは、を呼び出してコンポーネントの状態を変更することはできません this.setState
  3. render(): 経由でfalseを返す場合 shouldComponentUpdate() 、内部のコード render() コンポーネントが正しく表示されるように、が再度呼び出されます。
  4. componentDidUpdate(): コンポーネントが更新およびレンダリングされると、このメソッドが呼び出されます。このメソッド内には、コンポーネントの更新後に実行する任意のコードを配置できます。

c。小道具変更フェーズ–コンポーネントがDOMにレンダリングされました。状態の変更を除いて、コンポーネントが更新されるのは、そのprop値が変更されたときだけです。実際には、このフェーズは前のフェーズと同様に機能しますが、状態の代わりに小道具を扱います。したがって、このフェーズには、更新フェーズからの追加のメソッドが1つだけあります。

  1. componentWillReceiveProps(): このメソッドは、コンポーネントに割り当てられようとしている新しいprop値を含む1つの引数を返します。
    残りのライフサイクルメソッドは、前のフェーズで見たメソッドと同じように動作します。
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

d。アンマウントフェーズ–これは、コンポーネントが破棄されてDOMから完全に削除されるコンポーネントライフサイクルの最後のフェーズです。これには、次の1つのメソッドのみが含まれます。

  1. componentWillUnmount(): このメソッドが呼び出されると、コンポーネントはDOMから完全に削除されます。この方法では、 Yイベントリスナーの削除、タイマーの停止など、クリーンアップ関連のタスクを実行できます。

以下は、ライフサイクル図全体です。

これで、Reactコンポーネントに関するブログは終わりです。このブログで、Reactコンポーネントとは何か、それらがどのように使用されているかを明確に説明できたと思います。あなたは私のブログを参照することができます 、ReactJSについてもっと知りたい場合に備えて。

Reactのトレーニングを受けて、独自に興味深いUIを開発したい場合は、 25万人以上の満足した学習者のネットワークを持つ信頼できるオンライン学習会社であるEdurekaが世界中に広がっています。

質問がありますか?コメント欄にご記入ください。折り返しご連絡いたします。