子組件

• /src/components/LifeCycle.js

import React, { Component } from 'react'export class LifeCycle extends Component {constructor(props) {super(props);// 常用于初始化狀態(狀態初始化、屬性初始化)console.log("1.組件構建函數執行");}componentWillMount(){// 此時可用訪問狀態和屬性,可進行api調用等console.log("2.組件將要掛載");}componentDidMount(){// 組件已掛載,可用進行狀態更新操作console.log("3.組件已掛載");}componentWillReceiveProps(){// 父組件傳遞的屬性有變化,做相應相應console.log("4.將要接收屬性傳遞");}shouldComponentUpdate(){// 組件是否需要更新,需要返回布爾值結構,優化點console.log("5.組件是否需要更新?");return true;}componentWillUpdate(){// 組件將要更新,可做更新統計console.log("6.組件將要更新");}componentDidUpdate(){// 組件更新console.log("7.組件已更新")}componentWillUnmount(){// 組件將要卸載,可做清理工作console.log("8.組件將要卸載");}render(){console.log("x.組件渲染");return <div>生命周期探究</div>}
}

父組件

• /src/App.js

import React, { Component } from 'react'
import { LifeCycle } from './components/LifeCycle'class App extends Compoent{state = {prop:'some prop'},componentDedMount() {setTimeout(() =>{this.setState({ prop: "a new prop" })}, 2000)}return (<div><LifeCycle prop={this.state.prop} </LifeCycle></div>)
}