React(5) ライフサイクル (古い)

will を含むすべてのライフサイクル フックには、componentWillUnmount を除く UNSAFE_ を追加する必要があります

1. 部品実装ステージ

1. まずコンストラクターconstructorを実行します。

2. 再度componentWillMountを実行します（コンポーネントがマウントされます）

3. レンダリングフェーズの初期化

4. 再度componentDidMountを実行します(コンポーネントがマウントされます)。

 // 构造器
    constructor(props) {
        console.log('构造器', 'constructor');
        super(props);
    }
    componentWillMount() {
        console.log("组件将要挂载", "componentWillMount");
    }
    // 组件挂完成挂载
    componentDidMount() {
        console.log("组件完成挂载", "componentDidMount");
    }
    // 初始化渲染,状态更新后
    render() {
        console.log("渲染", "render");
        return (
            <div id="hahah"></div>
        )
    }

2. コンポーネント更新フェーズ 更新をトリガーする必要がある場合

1. shouldComponentUpdate()

setState メソッドが呼び出されると、この関数がトリガーされて更新が必要かどうかが判断されます。記述されていない場合はデフォルトで true が返されます。false が返された場合は更新されません。

2.componentWillUpdate() コンポーネントが更新されます

3.render() レンダリングの更新

4.componentDidUpdate() コンポーネントの更新が完了しました

 // 当调用setState方法后 会触发这个函数 用于判断是否需要更新 如果不写默认返回true  如果返回false 则不会更新
    shouldComponentUpdate() {
        console.log("组件是否应该更新", "shouldComponentUpdate");
        return true;
    }
    // 组件将要更新
    componentWillUpdate() {
        console.log("组件将要更新", "componentWillUpdate");
    }
    // 组件更新完成
    componentDidUpdate() {
        console.log("组件更新完成", "componentDidUpdate");
    }
    // 初始化渲染,状态更新后
    render() {
        console.log("渲染", "render");
        return (
            <div id="hahah">
                <div>{this.state.num}</div>
                <button onClick={this.death}>哈哈了</button>
            </div>
        )
    }

 3. 更新を強制的に shouldComponentUpdate をスキップするために状態データを変更しないでください。

render() {
        console.log("渲染", "render");
        return (
            <div id="hahah">
                <button onClick={this.fff}>不更改任何状态中的数据,强制更新</button>
            </div>
        )
    }
    fff = () => {
        this.forceUpdate();
    }

 4. 親子コンポーネントのライフサイクルの実行順序

まず、親コンポーネントのマウント => 親コンポーネントのレンダリング => 子コンポーネントのマウント => 子コンポーネントのレンダリング => 子コンポーネントのマウント完了 => 親コンポーネントのマウント完了を実行します。

親コンポーネント

 constructor(props) {
        console.log('父组件构造器', 'constructor');
        super(props)
    }
    componentWillMount() {
        console.log("父组件将要挂载", "componentWillMount");
    }
    // 组件挂完成挂载
    componentDidMount() {
        console.log("父组件完成挂载", "componentDidMount");
    }
    render() {
        console.log("父组件渲染", "render");
        return (
            <div>
                <Dome1 />
            </div>
        )
    }

サブアセンブリ

 // 构造器
    constructor(props) {
        console.log('子组件构造器', 'constructor');
        super(props)
    }
    componentWillMount() {
        console.log("子组件将要挂载", "componentWillMount");
    }
    // 组件挂完成挂载
    componentDidMount() {
        console.log("子组件完成挂载", "componentDidMount");
    }
    // 初始化渲染,状态更新后
    render() {
        console.log("子组件渲染", "render");
        return (
            <div id="hahah"></div>
        )
    }

5. コンポーネントがアンインストールされます

componentWillUnmount() {
        console.log("子组件被卸载", "componentWillUnmount");
    }

 6. まとめ