序文
前回の記事では、Reactの構文について詳しく説明した React JSX - Reactホワイトペーパーキャンペーン06 Reactコンポーネントの構築方法を学び、コンポーネント間に親子関係があることを学ぶ。この記事では、コンポーネントに焦点を当て、含まれるコンポーネントのライフサイクルを説明する：
- ライフサイクルの3つのステージ
- オブジェクト・クラスのライフサイクル
- 手紙オブジェクトのライフサイクル
リアクト・ライフサイクルの3つのフェーズ
ライフサイクルとは？
たとえば、作成、ユーザーによる更新、データ変更による更新、そしてコンポーネントが不要になったときの削除などである。通常、これらの状態は連続した順序であるため、ライフサイクルと呼ばれる。
通常、ライフサイクルは次の図で示され、ライフサイクルの3つの段階が明確に示されている。
ソースhttps://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
上の写真からわかるように、3つのブロックがある：
- Mounting
- Updating
- 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 'react' function Test() { const [message, setMessage] = useState('') return (
<main>
<button onclick="{()" > setMessage('Hello World!')}> クリック
</button>
<p>{メッセージ}</p>
</main>
)
}
Mounting
- useState()は、データやステートを初期化するReactフックの関数です。
Updating
- setMessage( ) は、クリックされたときにユーザーがメッセージを更新できるようにするもので、onClick で矢印関数を使用します。
これはオブジェクトのライフサイクルを示す簡単なコードに過ぎないが、ライフサイクルのシナリオは他にもたくさんある。
結語
この記事では、コンポーネントのライフサイクルについて説明し、単純なクラスと機能コンポーネントの観点からライフサイクルを説明する。
今後、主力機能部品のフックについて詳しく紹介していく。
ご意見、ご質問がございましたら、お気軽にコメントをお寄せください！
この連載が気に入ったら、より多くの人に見てもらえるよう、遠慮なく「いいね！」やシェアをお願いします！
リアクト・ヴァナキュラー・スポーツ・シリーズ
リアクト・プロップス - リアクト・バーナキュラー・キャンペーン 09
Reactプロジェクトの構築 - React Vernacularキャンペーン08
Babel & Webpack & NPM - Reactホワイトペーパーキャンペーン 07
React JSX - Reactホワイトペーパーキャンペーン06
JavaScriptの高度な関数 - React Vernacular キャンペーン 04
JavaScript非同期待ち - React Whitepaper キャンペーン03
日本語 
繁體中文 
English 
简体中文 
한국어 
Español