React | ライフサイクルについて

■ライフサイクル
■3種類のライフサイクル
■なぜライフサイクルを使うのか
■各サイクルの主要メソッド
■参考元

■ライフサイクル

・コンポーネントの時間の流れ
・生まれて、成長して、死ぬまで
・それぞれの段階でに必要な処理を記述

■3種類のライフサイクル

・mounting
コンポーネントが配置される(生まれる)期間

・updating
コンポーネントが変更される(成長する)期間

・Unmounting
コンポーネントが破棄される(死ぬ)期間

■なぜライフサイクルを使うのか

・関数の外に影響を与える関数を記述するため
DOM変更、API通信、ログ通信、setState()…

・副作用=適切な場所に配置すべき処理

■各サイクルの主要メソッド

Mount

・constructor()
初期化(stateなど)

・render()
Vdomを描画

・componentDidMount()
render()後に一度だけ呼ばれる
リスナーの設定やAPI通信に使われる

Updating

・render()
VDOMの再描画

・componentDidUpdate
再render()後に呼ばれる。
スクロールイベント条件付きイベント。

ある条件を付けてイベントを実行したい。

Unmount

・componentWillUnmount()
コンポーネントが破棄される直前
リソース解放するため

import React from "react";
import Article from "./Article";

class Blog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPublished: false,
      count: 0,
    }
  }

  componentDidMount() {
    document.getElementById("counter").addEventListener("click", this.countUp);
  }

  componentDidUpdate() {
    if (this.state.count >= 10) {
      this.setState({ count: 0 })
    }
  }
    
  togglePublished = () => {
    this.setState({
      isPublished: !this.state.isPublished,
    })
  };

  countUp = () => {
    this.setState({ count: this.state.count + 1 })
  }
    

  render() {
    return (
      <React.Fragment>
        <Article
          title={"reactの使い方"}
          isPublished={this.state.isPublished}
          toggle={() => this.togglePublished()}
          count={this.state.count}
        />
      </React.Fragment>
    );
  }
}

export default Blog;

import React from "react";

import Article from "./Article";

class Blog extends React.Component {

constructor(props) {

super(props);

this.state = {

isPublished: false,

count: 0,

}

componentDidMount() {

document.getElementById("counter").addEventListener("click", this.countUp);

}

componentDidUpdate() {

if (this.state.count >= 10) {

this.setState({ count: 0 })

}

togglePublished = () => {

this.setState({

isPublished: !this.state.isPublished,

})

};

countUp = () => {

this.setState({ count: this.state.count + 1 })

}

render() {

return (

<React.Fragment>

<Article

title={"reactの使い方"}

isPublished={this.state.isPublished}

toggle={() => this.togglePublished()}

count={this.state.count}

</React.Fragment>

);

}

export default Blog;

import React from "react";
import LikeButton from "./LikeButton";

const Article = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
      <label htmlFor="check">公開状態</label>
          <input type="checkbox" checked={props.isPublished} id="check" onClick={() => props.toggle()} />
          <LikeButton count={props.count} />
    </div>
  )
};

export default Article;

import React from "react";

import LikeButton from "./LikeButton";

const Article = (props) => {

return (

<div>

<h2>{props.title}</h2>

<input type="checkbox" checked={props.isPublished} id="check" onClick={() => props.toggle()} />

</div>

)

};

export default Article;

import React from "react";

const LikeButton = (props) => {
    return (
        <button id={"counter"}>いいね数:{props.count}</button>
    )
}

export default LikeButton

import React from "react";

const LikeButton = (props) => {

return (

<button id={"counter"}>いいね数:{props.count}</button>

)

}

export default LikeButton

■参考元

お勧め過ぎます。