NativeReactにてコンポーネントをClassで定義した際の、コンポーネントで利用できるライフサイクルメソッドをメモしておきます。つかうメソッドですが、覚えられないのでここにまとめて記録しておきます。ドキュメントコンポーネントライフサイクルの図クラスによるコンポーネント定義React.Componentを継承して作成します。}}マウント時のメソッドconstructorコンポーネントのマウントの最初に呼ばれます。stateの初期化や、イベントハンドラーにメソッドをバインドするときはここに記述します。setStateはここでは使わない。super(props)は最初に記述します。};}getDerivedStateFromProps()renderメソッドの直前に実行されます。<Transition>コンポーネントなどの実装の際に利用しますが、利用する機会は少ないです。state)render特に詳しい説明は必要無いでしょうか。コンポーネントをレンダリングします。この中ではstateを更新しないように注意。componentDidMountコンポーネントがマウントされた直後に動作。DOMに対する初期化はここで行います。イベントリスナーの登録などを行いますが、その場合はunmountで解除することを忘れないように注意。});}更新時のメソッドgetDerivedStateFromPropsマウント時のメソッドと同様です。更新時にも実行されます。shouldComponentUpdate更新が必要かどうかを判定できるメソッドです。パフォーマンスの改善の目的で利用することがあります。stateやpropsを更新前と後で比較して、更新が必要かどうかの判定を追加します。trueを返せば更新を行い、falseを返せば更新をスキップできます。具体的にはfalseを返したときcomponentWillUpdate、render、componentDidUpdateがスキップされます。nextState)render()マウント時と同様です。getSnapshotBeforeUpdate()更新の直前に呼ばれます。使う機会はありませんが、更新直前のスクロール位置とか画面の情報を保持する、または更新後に利用する場合に使います。prevState)componentDidUpdateコンポーネントの更新後に呼ばれます。フォームなどの内容が更新された時にサーバへ変更を送信する場合とかに利用します。アプリではそれほど出番は無いかもしれません。stateの更新を行う場合は無限ループが起きないように注意。}}アンマウント時のメソッドcomponentWillUnmountコンポーネントがアンマウントされる直前に呼ばれます。イベントリスナーの解除とか、バックグラウンドで動いているタイマーの解除などを実行します。this.focusListener.remove();}エラーハンドリングメソッドgetDerivedStateFromError子コンポーネントでエラーがスローされた後によばれます。エラーがあった場合に何らかのメッセージを表示するといった用途で使えそうです。phase”中で呼ばれます。componentDidCatchこちらもエラーがスローされた後に呼ばれます。phase”中で呼ばれます。おわりによく使うものは限られていますし、それぞれ主なその用途は決まっています。処理の順番の前後とか、state更新の可否などに気をつければ問題無く使いこなせます。パフォーマンス改善などで大きく役に立つので、そのへんのノウハウやよくあるパターンも今度記録しておこうと思います。editerマークダウン特化エディタアプリマークダウンのプレビュー・よく使う記号を入力するボタンが利用できます。野々市市コミュニティバスのっティ時刻表アプリルートとバス停を選択して時刻表が確認できます石川県野々市市に住むフリーランスエンジニア。応用情報とDBスペシャリストの資格を保有。Webシステムの構築、スマホアプリ、プログラミングメンターなどの依頼に対応できます。