2021/8/16

React + Node.js

第３章

コンポーネントのライフサイクル

[コンポーネントの生成とDOMへのマウント]
コンポーネントが生成されて、DOMにマウント(追加)されると順番にメソッドが呼ばれる。以下に示すのは、初回のみ実行される。

• constructor(props)・・・オブジェクトが生成される
• componentWillMount()・・・コンポーネントがDOMにマウントされる直前
• render()・・・コンポーネントが描画される
• componentDidMount()・・・コンポーネントがDOMにマウントされた直後

[コンポーネントの更新]
コンポーネントのプロパティが変更されると次の順序でメソッドが呼び出される

• componentWillReceiveProps(nextProps)・・・コンポーネントのプロパティが変更されたとき
• shouldComponentUpdate(nextProps, nextState)・・・コンポーネントの外観を変更して良いかどうか判断するとき
• componentWillUpdate()・・・コンポーネントが更新される直前
• render()・・・コンポーネントの描画
• componentDidUpdate()・・・コンポーネントが更新された直後

setState()をよびだすと、更新イベントが再帰的に呼び出されてしまうので使うのはcomponentWillReceiveProps()メソッドの中だけからにすると良い

[DOMからのアンマウント]
コンポーネントがDOMからアンマウント(削除)されたときは以下のメソッドが呼び出される
- componentWillUnmount()

このライフサイクルの名前は廃止になっているので、また勉強し直す。

メモ

• HMTLのclassに該当するJSXの記法は「className」