React 生命周期函数

一个组件从创建，更新，销毁会经历的一系列函数叫做生命周期函数。
具体可以参考官方文档

1.装载组件触发4个函数

• constructor
• componentWillMount
• render
• componentDidMount

import React, { Component } from 'react';

class Liftcycle extends Component {
    constructor(props){
        super(props);
        this.state = {
            title: '我是生命周期页面'
        }
        console.log('1.我是构造函数constructor');
    }
    componentWillMount(){
        console.log('2.我是组件挂载前的函数componentWillMount')
    }
    componentDidMount(){
        console.log('4.我是组件挂载后的函数componentDidMount')
    }
    render(){
        console.log('3.我是渲染函数render')
        return (
            <div>
                <div>{this.state.title}</div>
            </div>
        )
    }
}

export default Liftcycle;

运行后会得到下面的结果：

image.png

2.更新组件触发4个函数

• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

import React, { Component } from 'react';

class Liftcycle extends Component {
    constructor(props){
        super(props);
        this.state = {
            title: '我是生命周期页面'
        }
    }
    updataData = () => {
        this.setState({
            title: '我是更新后的生命周期页面'
        });
    }
    shouldComponentUpdate(){
        console.log('1.我是询问组件数据是否需要更新的函数(return true;更新;return false;不更新;)shouldComponentUpdate')
        return true;
    }
    componentWillUpdate(){
        console.log('2.我是组件数据更新前的函数componentWillUpdate')
    }
    componentDidUpdate(){
        console.log('4.我是组件数据更新后的函数componentDidUpdate')
    }
    render(){
        console.log('3.我是渲染函数render')
        return (
            <div>
                <div>{this.state.title}</div>
                <button onClick={this.updataData}>更新组件</button>
            </div>
        )
    }
}

export default Liftcycle;

点击按钮更新组件数据后，执行的顺序是：

image.png

3.卸载组件触发

• componentWillUnmount
  可以在这个函数上做一些清理数据，缓存数据的操作

componentWillUnmount(){
    console.log('我是卸载组件触发了的函数');
}

4.父组件更新传递给子组件的值时触发

• componentWillUnmount
  该方法在子组件里书写，当父组件更新了传递给子组件的值时会触发

componentWillReceiveProps(){
    console.log('我是父组件更新了传递给我的值触发的函数')
}

END---------