react --- > 生命周期 && 给子组件传递数据

子组件

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