コンポーネントのライフサイクル：チュートリアルに反応

1、ライフサイクルの概念

1.1の概念

コンポーネントのプロパティを更新し、作成するためのコンポーネントで、コンポーネントは、プロセス中に破壊され、常に特定の期間内にこれらのコンポーネントを実行するために様々な機能を伴って、機能を一括コンポーネントのライフサイクルの関数と呼ばれる、実行トリガー。

3つの段階で1.2、コンポーネントのライフサイクル

1. ローディング段階（取付）：コンポーネントの初期化を行い、顕著な特徴がある：ライフサイクル機能を作成アセンブリ一生に一度だけ実行されます。

2. 更新段階（更新）：プロパティを実行し、状態が状態及び組立小道具の変化に応じて変化し、選択が0回以上のトリガー。

3. 搬出相（アンマウント）：コンポーネントオブジェクト破壊寿命は一度だけ実行されたときに実行されます。

2、古いライフサイクル

2.1、マウント（負荷相は：フック関数6に関する）

コンストラクタ（）

ロードされた後に呼び出されると、それは状態を初期化することができます

getDefaultProps（）

設定されたデフォルトの小道具は、また、デフォルトプロパティのdufaultPropsコンポーネントを使用することができます。

getInitialState（）

初期化状態は、this.stateのコンストラクタで直接定義することができます

componentWillMount（）

コンポーネントがロードされたときにコンポーネントのアップデートが呼び出されていない後にのみ、と呼ばれる、ライ​​フサイクル全体を一度だけ呼ばれる、あなたは状態を変更することができます

レンダリング（）

仮想DOMを作成するための最も重要なステップを反応させ、この中に差分アルゴリズム更新DOMツリーました

componentDidMount（）

コンポーネントの呼び出しをレンダリングした後、一度だけ呼び出します

2.2、アップデート（更新段階：5フック関数を含みます）

componentWillReceivePorps（nextProps）

コンポーネントがロードされたときにコールが呼び出されていない場合は、コンポーネントが新しい小道具を受け入れます

shouldComponentUpdate（nextProps、nextState）

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）

componentWillUpdata(nextProps, nextState)

组件加载时不调用，只有在组件将要更新时才调用，此时可以修改state

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

componentDidUpdate()

组件加载时不调用，组件更新完成后调用

2.3、Unmounting（卸载阶段：涉及1个钩子函数）

componentWillUnmount()

组件渲染之后调用，只调用一次

2.4、生命周期函数代码示例

import React, { Component } from 'react'

export default class OldReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
    }
    state = {

    }
    componentWillMount() { // 组件挂载前触发

    }
    render() {
        return (
            <h2>Old React.Component</h2>
        )
    }
    componentDidMount() { // 组件挂载后触发

    }
    componentWillReceivePorps(nextProps) { // 接收到新的props时触发

    }
    shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
        return true
    }
    componentWillUpdate(nextProps, nextState) { // 组件更新前触发

    }
    componentDidUpdate() { // 组件更新后触发

    }
    componentWillUnmount() { // 组件卸载时触发

    }
}

3、新的生命周期

3.1、Mounting（加载阶段：涉及4个钩子函数）

constructor()

加载的时候调用一次，可以初始化state

static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

componentDidMount()

组件渲染之后调用，只调用一次

3.2、Updating（更新阶段：涉及5个钩子函数)

static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

getSnapshotBeforeUpdate(prevProps, prevState)

トリガー時間：レンダリング後の時間更新は、コンポーネントのレンダリングDOMの前に、発生しました。componentDidUpdate三番目のパラメータとして、値を返します。componentDidUpdateと、すべての使用componentWillUpdateをカバーすることができます

componentDidUpdate（）

コンポーネントが呼び出しの完了後にコンポーネントのアップデートをロードされたときに呼び出されません

3.3、マウント解除（アンロード相：フック関数に関する）

componentWillUnmount（）

コンポーネントの呼び出しをレンダリングした後、一度だけ呼び出します

3.4、エラー処理（エラー処理）

componentDidCatch（エラー、情報）

トリガーのいずれかでのJavaScriptのエラー

3.5、新しいライフサイクル関数のコードサンプル

import React, { Component } from 'react'

export default class NewReactComponent extends Component {
    constructor(props) {
        super(props)
        // getDefaultProps：接收初始props
        // getInitialState：初始化state
    }
    state = {

    }
    static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
        return state
    }
    componentDidCatch(error, info) { // 获取到javascript错误

    }
    render() {
        return (
            <h2>New React.Component</h2>
        )
    }
    componentDidMount() { // 挂载后

    }   
    shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发

    }
    componentDidUpdate() { // 组件更新后触发

    }
    componentWillUnmount() { // 组件卸载时触发

    }
}

4、要約

昔の生活サイクル

新しいライフサイクル

1. React16新しいライフサイクルはcomponentWillMount、componentWillReceivePorps、componentWillUpdateを放棄しました
2. 三の新しいフック関数getDerivedStateFromProps、getSnapshotBeforeUpdate代わりに捨てられた（componentWillMount、componentWillReceivePorps、componentWillUpdate）
3. React16は、これら三つのフック関数を削除しないが、フック関数を追加することはできません（getDerivedStateFromProps、getSnapshotBeforeUpdate）ミックスは、React17は削除させていただきますcomponentWillMount、componentWillReceivePorps、componentWillUpdate
4. エラーの取り扱いを追加しました（componentDidCatch）