Reactガイドを読んでいくその155

5## これは Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React.Component

よく使われるライフサイクルメソッド

componentDidUpdate()

更新直後に呼び出されるメソッド。
「更新」から分かるように初回では呼び出されず、2回目のレンダーから呼び出される。

コンポーネント更新によってDOM操作をしたい場合、componentDidUpdate()を使用すると良い。
ネットワークリクエストを行うのにも適しており、前回と現在のpropsを比較する場合には便利に使うことができる。

setState() を使うことができるが、使う場合は注意してあげないといけない。
例えば以下のような例に挙げられていたコードのようにラップされないといけない。

componentDidUpdate(prevProps) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

このラップをうまく使ってあげないと、無限ループになってしまいうまく動かなかったり、
レンダー処理が何度も行われてしまいパフォーマンスの低下を招く。

今日はここまで。