Reactライフサイクル：概要

Reactのライフサイクルは、マウント、更新、アンマウントの3つの異なるフェーズで考えることができます。マウントは、ReactコンポーネントがDOM（ドキュメントオブジェクトモデル）にレンダリングされるときに発生します。そのコンポーネントに変更が加えられると、コンポーネントは更新フェーズに入ります。

ライフサイクルの更新フェーズでは、一連の内部メソッドが実行されて、新しい情報を確認し、そのコンポーネントを再レンダリングします。アンマウントとは、コンポーネントがDOMから削除されたときのことです。

この記事のコースでは、ライフサイクルの幅広い意味と一般的に使用される方法のいくつかについて説明します。ここでは説明しない、使用できるライフサイクルメソッドが他にもあります。他のライフサイクル方法の詳細については、この概要を参照してください。

Reactライフサイクルとは何ですか？

コンポーネントがDOMにロードされると、3つのフェーズの最初のフェーズまたはライフサイクルに入ります。この最初のフェーズはマウントと呼ばれます。このフェーズでは、コンポーネントは最初に定義されたとおりにレンダリングされます。これで、ユーザーと対話して第2フェーズに入る準備が整いました。

2番目のフェーズでは、ユーザーがコンポーネントを操作し、いくつかの変更を加えました。ほとんどの場合、ユーザーはコンポーネントの状態を変更するアクションを実行しました。現在、ライフサイクルの更新フェーズにあります。

更新フェーズでは、Reactはコンポーネントを再レンダリングして変更を表示します。更新フェーズをトリガーするために状態を変更する上記の例では、setState() メソッドが呼び出されて初期状態が変更され、再レンダリングプロセスが開始されます。 setStateの詳細については、この紹介記事をお読みください。

最後に、特定のコンポーネントから離れるときに、DOMからそのコンポーネントをクリアできます。これはアンマウントと呼ばれ、ライフサイクルの3番目のフェーズです。このフェーズは必須ではありませんが、コンポーネントが多いアプリに推奨されます。

一般的なライフサイクルメソッド

Reactコンポーネントのライフサイクルシーケンスについて説明したので、次に、いくつかの一般的なライフサイクルメソッドを見てみましょう。ライフサイクルメソッドは、さまざまなライフサイクルステージで呼び出されるReactメソッドです。それらのいくつかは必須ですが、いくつかはオプションです。必須で一般的に使用されるオプションのメソッドを見ていきます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

取り付け

クラスコンポーネントをマウントする場合、最初に一般的に使用されるオプションのメソッドはconstructor()です。 方法。コンポーネントの初期状態を直接宣言できるのは、コンストラクターメソッドです。

class App extends React.Component {
  constructor(props) {
    super(props);
  this.state= {
      currentUser : " "
    }

  }
}

この例では、現在のユーザーのオブジェクトとして初期状態を設定しています。 constructor() メソッドにはボイラープレートsuper()が必要です 方法。基本コンストラクターの詳細については、super() 、setStateガイドをお読みください。

この目的のために、このコンポーネントがマウントされている場合、まだ誰もログインしていないと想定します。ユーザーがログインするには、ログインフォームが必要です。これにより、最初に必要なメソッドであるrender()が表示されます。 。

コンポーネントをマウントするために必要なメソッドは、render()です。 方法。クラスコンポーネントが初期状態セットで構築された後、別のコンポーネントまたはHTMLのいずれかをレンダリングできます。

render(){
    return (
     <LoginForm />
    )
  }

render()の構文 そしてそのreturnステートメントは他のメソッドとは少し異なります。中括弧ではなく、戻り後に括弧を使用していることに注意してください。ここのreturnステートメントでは、LoginFormコンポーネントをレンダリングしています。

ユーザーがログインすると、資格情報にアクセスできるようになります。機能しているアプリでは、ログインするには、一致するクレデンシャルを取得するためにサーバーへのフェッチ要求が必要です。このライフサイクルの紹介記事のコンテキストでは、状態を直接設定します。

この簡単な例では、ユーザーJohnがいます。彼は自分のパスワードを入力し、ログインボタンを押します。これにより、フェッチリクエストがサーバーに送信され、サーバーはJohnの資格情報で応答します。 Johnがログインしたので、彼がログアウトすることを決定するまで、彼はログインしたままにしておく必要があります。

これを行うには、別の非常に一般的なオプションのメソッドであるcomponentWillMount()を使用できます。 。このライフサイクルメソッドが呼び出されると、コンポーネントがレンダリングされた後に実行されます。これは、新しい状態を設定するのに適した場所です。

componentWillMount() {
    this.setState({
     currentUser: "John"
    })
  }

これで、コンポーネントをレンダリングした後、マウントする前に、コンポーネントの状態がJohnの現在のユーザーで設定されます。ページが更新されても、状態はJohnで設定されるため、ユーザーはログインしたままになります。

seState()の使用 メソッドはまた、ライフサイクルの更新フェーズに入ります。 setState()の場合 と呼ばれ、コンポーネントに変更が加えられたことをReactに通知します。 Reactはコンポーネントを再レンダリングして、ユーザーに加えられた変更を表示します。この場合、Johnがログインしていることが表示されます。

更新

ライフサイクルの更新段階には、この紹介の範囲を超えるオプションのライフサイクルメソッドがかなりあります。変更が検出されると（通常はsetStateで）、Reactは必要なrender()を呼び出すという目的で十分です。 再びメソッド。次に、コンポーネントは、加えられた変更を反映するために再レンダリングされます。

アンマウント

コンポーネントのライフサイクルの最終段階は、アンマウントと呼ばれます。ここで、コンポーネントがDOMから削除されます。必須ではありませんが、コンポーネントの重いアプリをより効率的に実行するのに役立ちます。

アンマウントには、オプションのメソッドcomponentWillUnmount()が1つだけあります。 。ユーザーのジョンがログアウトしたいと考えています。彼がログアウトボタンをクリックすると、componentWillUnmount()を使用できます。 彼のユーザープロファイルをDOMから削除します。

この例は少し工夫されていますが、ライフサイクルの各段階で何が起こっているかを明確に示しています。

class UserContainer extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     currentUser: " "
   }
 }
 componentWillMount() {
   this.setState({
     currentUser: "John"
   })
 }
 
 logout = () => {
  this.setState({
    currentUser: " "
  })
 }

 
 render() {
  if this.state.currentUser === "John" {
  return (
     <UserProfile />
      <button type="button" onclick={this.logout}>Logout</button>
    )

  } else {
    return(
     <button type="button>">Login</button>
    )
  }
 }
}

class UserProfile extends React.Component {
  componentWillUnmount() {
    alert("Logged Out")
  }
  render() {
   return (
    <h1>Welcome back, John!</h1>
   )
  }
}

2つのコンポーネントがあります。 1つ目はUserContainerで、コンポーネントUserProfileを保持するだけです。 UserProfileには、ユーザー情報が含まれています。

UserContainerでは、コンポーネントを作成し、前と同じように初期状態を設定します。コンポーネントは、ログインボタンで非常に短時間レンダリングされます。コンポーネントをマウントする直前に、Johnにログインします。これにより、Reactはコンポーネントを更新し、Johnのクレデンシャルで再レンダリングします。

Johnがログインしたので、UserProfileコンポーネントをレンダリングします。これにはジョンのすべてのユーザー情報が含まれているため、ジョンがログアウトしたらすぐにDOMから削除する必要があります。

ログアウトボタンをクリックすると、現在のユーザーを空の文字列の初期状態に戻すだけのログアウト関数が実行されます。ログアウト関数がsetStateを呼び出すため、Reactはコンテナーコンポーネントを再レンダリングします。これで、UserProfileコンポーネントは表示されず、ユーザーがログアウトしたことを通知するポップアップアラートが表示されます。

結論

Reactのライフサイクルには、ここで説明されている以上のことがたくさんあります。この記事の目的は、いくつかの簡単なコード例を使用して基本的な概念を紹介することです。ライフサイクルの概念が導入されたので、公式のReactドキュメントはより明確になります。

このガイドとリンクされている補足記事を読んだ後、Reactのライフサイクルを把握し、自分でさらに深く理解することができます。プログラミングのすべての複雑な概念と同様に、毎日の練習は詳細を理解するのに役立ちます。