応答のライフサイクル

フロントエンドでよく使われるAngularJS、Vue.jsなどのフレームワークはMVC,MVVMなどの設計モデルを採用している.最も代表的なMVCモードは、モデル、ビュー、およびコントローラの3つのコンポーネントから構成される.
各構成部品は次のように機能します.
モデル:アプリケーションで使用されるデータとロジックの管理
View:ユーザーが表示するレイアウトと画面の処理
Controller:ユーザーの入力と操作のコマンドをモデルとビュー部分にルーティングする
ReactはFrameworkではなくLibraryです
しかし,MVCの特性は拡張が困難であり,アプリケーションの規模が大きいほどデータストリームの複雑さが増す.
したがって、Reactは、従来のMVCモードのように、データが変化するたびにどのように変化するかを考慮するのではなく、データが変化するたびに、既存のビューを破棄して再レンダリングすることを考慮する.
Reactは、ユーザビュー(V)に特化して作成されたライブラリです.
Component
Reactは、UIを構成する独立したビューユニットコンポーネントを使用する.
各コンポーネントには、コンポーネントのライフサイクルというライフサイクルがあります.ライフサイクルとは、コンポーネントがページにレンダリングされる前に準備フェーズからページから消えるまでのプロセスです.
ライフサイクルは大きく3つのタイプに分けられます.
構成部品の作成時、構成部品の更新時、および構成部品の削除時にMount、Update、およびUnmountが実行されます.
LifeCycle Method
MountはDOMを作成し、Webブラウザに表示することを示します.
更新は主に次の4つの場合に発生します.

道具変換時

状態遷移時

親構成部品の再レンダリング時

this.forceUpdateを使用してレンダリングを強制トリガする場合

UnmountはDOMから削除することを意味します.

次は一つ一つ見てみましょう.
Mount
次の方法は、構成部品インスタンスを作成し、DOMに挿入するときに順次呼び出されます.

constructor()コンストラクション関数は、インストール前に構成部品を作成するときに初めて実行されます.
このメソッドでは、初期状態を直接割り当てることができます.

// Class
class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
}

// Hooks
const Example = () => {
    const [count,setCount] = useState(0);
}

static getDerivedStateFromProps(props, state)受信したprops値をステータスに同期するために使用します.
構成部品のマウントと更新時に呼び出されます.

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return { value: nextProps.value }
    }
    return null
  }
}

render()構成部品をレンダーするときに必要な方法.
関数構成部品では、()をレンダリングすることなく構成部品をレンダリングできます.

// Class
class Example extends React.Component {
  render() {
    return <div>Component</div>
  }
}

// Hooks
const example = () => {
  return <div>Component</div>
}

componentDidMount()構成部品を作成し、最初のレンダリングを完了した後に実行します.
関数型Hooksでは、UseEffectを利用して次の機能を実現できます.

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

Update
props、stateなどが変更されると、更新が発生します.
次の方法は、構成部品の再レンダリング時に順番に呼び出されます.

static getDerivedStateFromProps(props, state)

shouldComponentUpdate(nextProps, nextState)現在のpropsまたはstateの変化が素子の出力結果に影響するかどうかを知ることができる.
戻り値はtrue、falseのいずれかです.この戻り値は、構成部品が再レンダリングされるかどうかを決定します.
falseを返すと、render()、componentDidUpdate()は呼び出されません.
主にパフォーマンスを最適化する方法に使用されます.

// Class
class Example extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value
  }
}

// Hooks
const Example = React.memo(() => {
      ...
  },
  (prevProps, nextProps) => {
    return nextProps.value === prevProps.value
  }
)

レンダリングを防止するために使用すると、エラーが発生する可能性があります.
クラスに不要な更新をスキップさせる場合は、PureComponentを使用することをお勧めします.
Hookを使っているならReactmemo、useMemoを使用すると、レンダリング性能が向上します.

render()

getSnapshotBeforeUpdate(prevProps, prevState)最後のレンダリング結果がDOMに反映される前に呼び出されます.この方法では、スクロール位置などのレンダリング時に変化する情報を変更する前に取得できます.
ここで返される値は、パラメータとしてコンポーネントDidUpdate()に渡されます.

class Example extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current
      return list.scrollHeight - list.scrollTop
    }
    return null
  }
}

componentDidUpdate(prevProps, prevState, snapshot)素子更新後に呼び出され、更新後にDOMの操作に使用できます.

// Class
class Example extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    });
}

Unmount
以下の方法は、DOMから構成部品を除去するときに呼び出されます.

componentWillUnmount()構成部品がアンインストールされ、削除する前に呼び出されます.登録したイベントはcomponentDidMount()から削除できます.
この方法は、関数型素子において、userEffectのcleanUp関数によって実現することができる.

// Class
class Example extends React.Component {
    coomponentWillUnmount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        return () => {
            ...
        }
    }, []);
}

コメントドキュメント
React公式文書
React Lifecycle Git Repo
https://salgum1114.github.io/reactjs/2019-11-28-react-class-equivalents/