Reactライフサイクル - React用語キャンペーン10

React10-React-Life-Cycle

序文

前回の記事では、Reactの構文について詳しく説明した React JSX - Reactホワイトペーパーキャンペーン06 Reactコンポーネントの構築方法を学び、コンポーネント間に親子関係があることを学ぶ。この記事では、コンポーネントに焦点を当て、含まれるコンポーネントのライフサイクルを説明する:

  1. ライフサイクルの3つのステージ
  2. オブジェクト・クラスのライフサイクル
  3. 手紙オブジェクトのライフサイクル

リアクト・ライフサイクルの3つのフェーズ

ライフサイクルとは?

たとえば、作成、ユーザーによる更新、データ変更による更新、そしてコンポーネントが不要になったときの削除などである。通常、これらの状態は連続した順序であるため、ライフサイクルと呼ばれる。

通常、ライフサイクルは次の図で示され、ライフサイクルの3つの段階が明確に示されている。

リアクト・ライフサイクル - hogantech
リアクトのライフサイクル

ソースhttps://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

上の写真からわかるように、3つのブロックがある:

  1. Mounting
  2. Updating
  3. Unmounting

Reactコンポーネントでも、コンポーネントの読み込み、更新のレンダリング、削除の3段階を中心に展開する。

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

クラス・コンポーネントにはそれ自身のライフサイクルがあります。クラス・コンポーネントはそれ自体がオブジェクトであるため、オブジェクトの特性を備えています。

フックは理解しやすくするために導入されたが、現在は関数として使われている。

以下はカテゴリーのサンプルコードです:

				
					import React, { Component } from 'react' class Test extends Component {constructor(props) { super(props) this.state = { message: '' } this.setMessage = this.setMessage.bind(this) } setMessage() { this.setState({ メッセージ: 'Hello World!' }) } render() { return (
            <div>
                <button onclick="{this.setMessage}">クリック</button>
                <p>{この状態.メッセージ}</p>
            </div>
        )
    }
}

				
			

Mounting

  • constructor( ) は、オブジェクト指向プログラミングにおけるコンストラクタの概念に相当する。

  • 初期値を設定することができ、この関数でこれを設定し、バインドすることができる。

  • render( ) は、コンポーネントをページにレンダリングします。これは、JSXを値として返すことで、ページにコンテンツをレンダリングします。

Updating

  • setMessage( ) を使用すると、ボタンをクリックしたときにメッセージを更新することができます。
  • render( ) は、データの状態が更新されたときに一度だけトリガーされます。

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

機能コンポーネントは、ライフサイクルを持つために組み込みのReact Hookを必要とし、Hookは2018年にFacebookチームによってリリースされたばかりなので、2018年まではほとんどカテゴリー・コンポーネントを使用していました。

以下は、ファンクション・コンポーネントのサンプル・コードである。

				
					import React, { useState } from &#039;react&#039; function Test() { const [message, setMessage] = useState(&#039;&#039;) return (
        <main>
            <button onclick="{()" > setMessage(&#039;Hello World!&#039;)}&gt; クリック
            </button>
            <p>{メッセージ}</p>
        </main>
    )
}

				
			

Mounting

  • useState()は、データやステートを初期化するReactフックの関数です。

Updating

  • setMessage( ) は、クリックされたときにユーザーがメッセージを更新できるようにするもので、onClick で矢印関数を使用します。

これはオブジェクトのライフサイクルを示す簡単なコードに過ぎないが、ライフサイクルのシナリオは他にもたくさんある。

結語

この記事では、コンポーネントのライフサイクルについて説明し、単純なクラスと機能コンポーネントの観点からライフサイクルを説明する。

今後、主力機能部品のフックについて詳しく紹介していく。

ご意見、ご質問がございましたら、お気軽にコメントをお寄せください!

この連載が気に入ったら、より多くの人に見てもらえるよう、遠慮なく「いいね!」やシェアをお願いします!

リアクト・ヴァナキュラー・スポーツ・シリーズ

リアクト・プロップス - リアクト・バーナキュラー・キャンペーン 09

Reactプロジェクトの構築 - React Vernacularキャンペーン08

Babel & Webpack & NPM - Reactホワイトペーパーキャンペーン 07

React JSX - Reactホワイトペーパーキャンペーン06

リアクトの仕組み - リアクト用語キャンペーン 05

JavaScriptの高度な関数 - React Vernacular キャンペーン 04

JavaScript非同期待ち - React Whitepaper キャンペーン03

JavaScriptのES6オブジェクト - Reactホワイトペーパーキャンペーン02

JavaScript ES6 - Reactホワイトペーパーキャンペーン01

投稿メッセージ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ja日本語