子组件

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