React コンポーネントのlifecycleメソッド

ReactにてコンポーネントをClassで定義した際の、コンポーネントで利用できるライフサイクルメソッドをメモしておきます。
React Native でもとてもよくつかうメソッドですが、覚えられないのでここにまとめて記録しておきます。

参考

React ドキュメント
コンポーネントライフサイクルの図

クラスによるコンポーネント定義

React.Componentを継承して作成します。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

マウント時のメソッド

constructor

コンポーネントのマウントの最初に呼ばれます。

stateの初期化や、イベントハンドラーにメソッドをバインドするときはここに記述します。
setStateはここでは使わない。直接代入を行います。
super(props)は最初に記述します。

constructor(props) {
  super(props);
  this.state = { counter: 0 };
}

getDerivedStateFromProps()

renderメソッドの直前に実行されます。
<Transition>コンポーネントなどの実装の際に利用しますが、利用する機会は少ないです。

static getDerivedStateFromProps(props, state)

render

特に詳しい説明は必要無いでしょうか。コンポーネントをレンダリングします。 この中ではstateを更新しないように注意。

componentDidMount

コンポーネントがマウントされた直後に動作。DOMに対する初期化はここで行います。
イベントリスナーの登録などを行いますが、その場合はunmountで解除することを忘れないように注意。

componentDidMount(){
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    this.loadData();
  });
}

更新時のメソッド

getDerivedStateFromProps

マウント時のメソッドと同様です。更新時にも実行されます。

shouldComponentUpdate

更新が必要かどうかを判定できるメソッドです。パフォーマンスの改善の目的で利用することがあります。

stateやpropsを更新前と後で比較して、更新が必要かどうかの判定を追加します。 trueを返せば更新を行い、falseを返せば更新をスキップできます。

具体的にはfalseを返したときcomponentWillUpdate、render、componentDidUpdateがスキップされます。

shouldComponentUpdate(nextProps, nextState)

render()

マウント時と同様です。

getSnapshotBeforeUpdate()

更新の直前に呼ばれます。 あまり使う機会はありませんが、更新直前のスクロール位置とか画面の情報を保持する、または更新後に利用する場合に使います。

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate

コンポーネントの更新後に呼ばれます。
フォームなどの内容が更新された時にサーバへ変更を送信する場合とかに利用します。アプリではそれほど出番は無いかもしれません。

stateの更新を行う場合は無限ループが起きないように注意。

componentDidUpdate(prevProps) {
  if (this.props.text !== prevProps.text) {
    this.save(this.props.text);
  }
}

アンマウント時のメソッド

componentWillUnmount

コンポーネントがアンマウントされる直前に呼ばれます。
イベントリスナーの解除とか、バックグラウンドで動いているタイマーの解除などを実行します。

componentWillUnmount() {
  this.focusListener.remove();
}

エラーハンドリングメソッド

getDerivedStateFromError

子コンポーネントでエラーがスローされた後によばれます。
エラーがあった場合に何らかのメッセージを表示するといった用途で使えそうです。

static getDerivedStateFromError(error) {
  return { hasError: true };
}

“Render phase”中で呼ばれます。

componentDidCatch

こちらもエラーがスローされた後に呼ばれます。

引数は以下

• error
  スローされたエラー
• info
  どのコンポーネントがエラーをスローしたかについての情報を含む componentStack キーを持つオブジェクト

componentDidCatch(error, info){
  logComponentStackToMyService(info.componentStack);
}

“Commit phase”中で呼ばれます。

おわりに

よく使うものは限られていますし、それぞれ主なその用途は決まっています。 処理の順番の前後とか、state更新の可否などに気をつければ問題無く使いこなせます。

パフォーマンス改善などで大きく役に立つので、そのへんのノウハウやよくあるパターンも今度記録しておこうと思います。