子组件

• /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>)
}