组件的生命周期

1. 组件的三个生命周期状态:
   • Mount：插入真实 DOM
   • Update：被重新渲染
   • Unmount：被移出真实 DOM
2. React 为每个状态都提供了两种勾子(hook)函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用
   • componentWillMount()
   • componentDidMount() : 已插入真实DOM, 在render之后才会执行
   • componentWillUpdate(object nextProps, object nextState)
   • componentDidUpdate(object prevProps, object prevState)
   • componentWillUnmount()
3. 生命周期流程:
   1. 第一次初始化渲染显示: render()
      • constructor(): 创建对象初始化state
      • componentWillMount() : 将要插入回调
      • render() : 用于插入虚拟DOM回调
      • componentDidMount() : 已经插入回调
   2. 每次更新state: this.setSate()
      • componentWillUpdate() : 将要更新回调
      • render() : 更新(重新渲染)
      • componentDidUpdate() : 已经更新回调
   3. 删除组件
      • ReactDOM.unmountComponentAtNode(document.getElementById('example')) : 移除组件
      • componentWillUnmount() : 组件将要被移除回调
   4. 注意:
      • 一般会在componentDidMount()中: 开启监听, 发送ajax请求
      • 可以在componentWillUnmount()做一些收尾工作: 停止监听
      • 生命周期还有一个方法(后面需要时讲): componentWillReceiveProps

class LifeCycle extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            person: {
                username: 'kobe',
                age: 39
            }
        }
        console.log('constructor(), 生成实例对象');
    }
    // 组件将要被挂载
    componentWillMount(){
        // console.log(this)// 实例对象;
        console.log('componentWillMount() 组件将要被挂载');
        // 发送ajax请求， 开启监听
        setTimeout(function () {
            this.setState({
                person: {
                    username: 'wade',
                    age: 36
                }
            });
        }.bind(this), 2000)
        setTimeout(() => {
            this.setState({
                person: {
                    username: 'anverson',
                    age: 42
                }
            });
        }, 3000);
    }
    // 组件已经挂载完毕
    componentDidMount(){
        console.log('componentDidMount() 组件已经挂载完毕');
        setTimeout(() => {
            ReactDOM.unmountComponentAtNode(document.getElementById('example'));
        }, 4000);

        this.intervalId = setInterval(() => {
            console.log('setInterval()');
        }, 1000)
    }
    // 组件将要被更新
    componentWillUpdate(){
        console.log('componentWillUpdate() 组件将要被更新');
    }
    // 组件更新完毕
    componentDidUpdate(){
        console.log('componentDidUpdate() 组件更新完毕');
    }
    // 组件将要被卸载
    componentWillUnmount(){
        console.log('componentWillUnmount() 组件将要被卸载');
        // 收尾工作，关掉定时器
        clearInterval(this.intervalId);
    }
    render(){
        console.log('render()');
        let {person} = this.state;
        return (
            <div>
                <p>姓名： {person.username}----年龄：{person.age}</p>
            </div>
        )
    }
}

ReactDOM.render(<LifeCycle />, document.getElementById('example'));