React Component的生命週期

生命週期状态

Mounting : 会再元件建立时被执行Update : 正在重新选染HTML时执行Unmounting : 移除元件的时候执行

图片来源 : React生命週期表

生命週期的method

Mounting :

construct() : 在Component被建立时初始化物件。componentWillMount() : 紧接在construct后所执行，只会在初始执行一次。render() : 执行setStatec或更新父元件所传递的props，都会执行。componentDidMount() : 会在render执行完后调用，这里是最常用到的生命週期，像是绑定DOM事件、执行AJAX多半都会在这里使用;注意!!!若在此使用setState会使render执行两次

Update :

componentWillReceiveProps() : 当元件接受到新的(更新)props时会被执行，可以在这里处理props变更时改变state的状态。componentDidUpdate() : Update阶段最后一个执行的方法，在画面被选染更新后使用。componentWillUpdate() : 在接收到新的props或state但还没被render时调用。

Unmounting :

componentWillUnmount() : 当component将要从DOM被移除前会执行。

实例

Step 1 : 建立一个index.js

import React from "react"import ReactDOM from "react-dom"import LifeCyle from "./LifeCyle"ReactDOM.render(<LifeCyle />,document.getElementById("root"));

Step 2 : 建立Component LifeCyle (建立constructort并接受使用者输入改变state)

import React from "react"import Content from "./content"class LifeCyle extends React.Component{    constructor()    {        super();        this.state = {            data : 0        }        this.setNewNumber = this.setNewNumber.bind(this);        console.log('Constructor');        console.log("在Component被建立时初始化物件");        console.log("---------------------------");    }    setNewNumber()    {        this.setState({            data : this.state.data + 1        })    }    render()    {        return(            <div>                <button onClick = {this.setNewNumber}>INCREMENT</button>                 <Content myNumber = {this.state.data}></Content>            </div>                     )    }}export default LifeCyle;

Step 3 : 建立Component Content (console出各项React生命週期函数)

import React from "react"class Content extends React.Component{    componentWillMount()     {        console.log('Component WILL MOUNT!');        console.log("紧接在constuctor后面执行");        console.log("---------------------------");    }    componentDidMount()     {        console.log('Component DID MOUNT!');        console.log("render执行完后调用");        console.log("---------------------------");    }    componentWillReceiveProps(newProps)     {        console.log('Component WILL RECEIVE PROPS!');        console.log("当元件接受到新的(更新)props时会被执行");        console.log("---------------------------");    }    componentWillUpdate(nextProps, nextState)     {        console.log('Component WILL UPDATE!');        console.log("在接收到新的props或state但还没被render时调用");        console.log("---------------------------");    }    componentDidUpdate(prevProps, prevState)     {        console.log('Component DID UPDATE!');        console.log("在画面被选染更新后使用");        console.log("---------------------------");    }    render()    {        return(            <div>                <h3>{this.props.myNumber}</h3>            </div>        );    }}export default Content;

---

结果

当画面一刷新(Component刚被建立时)，会触发constructor对Component进行初始化，Constructor结束后由于componentWillMount会紧跟在constructor后面执行，所以为第二个被执行的。
而当render完成将画面选染到HTML中后，会调用componentDidMount

---

当按下按钮发生改变后，由于元件更新的自身状态，所以会执行componentWillReceiveProps()
由于接收到新的state，但还没使用render将更新后的component渲染到HTML中，所以会先调用componentWillUpdate
最后将更新完state的Component透过render渲染到HTML中，在完成选染后会调用componentDidUpdate()

参考资料 :
React.Component
React 组件生命周期|菜鸟教程
React Life Cycle 生命週期更新版，父子元件执行顺序
iT帮帮忙铁人赛 React 生命週期(Life Cycle)