React组件的生命周期

 

import React from 'react';

import ReactDOM from 'react-dom';

 

 

class Component extends React.Component{

// 构造函数

constructor(props){

super(props)

this.state = {

data: 'Old State'

}

console.log('初始化数据','constructor');//2

}

// 组件将要加载

componentWillMount(){

console.log('componentWillMount');//3

}

// 组件加载完成

componentDidMount(){

console.log('componentDidMount');//4

}

// 将要接收父组件传来的props

componentWillReceiveProps(){

console.log('componentWillReceiveProps');//7

}

// 子组件是不是应该更新

shouldComponentUpdate(){

console.log('shouldComponentUpdate');//8 一般不用

return true;

}

// 组件将要更新

componentWillUpdate(){

console.log('componentWillUpdate');//9

}

// 组件更新完成

componentDidUpdate(){

console.log('componentDidUpdate');//10

}

// 组件即将销毁

componentWillUnmount(){

console.log('componentWillUnmount');//13

}

// 处理点击事件

handleClick(){

console.log('更新数据：');

this.setState({

data: 'New State'

});

}

// 渲染

render(){

console.log('render')

return (

<div>

<div>Props: {this.props.data}</div>

<button onClick={()=>{this.handleClick()}}>更新组件</button>

</div>

);

}

}

 

class App extends React.Component{

// 构造函数

constructor(props){

super(props)

this.state = {

data: 'Old Props',

hasChild: true

}

console.log('初始化数据','constructor');//1

}

onPropsChange(){

console.log('更新props:');//6

this.setState({

data: 'New Props'

});

}

onDestoryChild(){

console.log('干掉子组件：');//12

this.setState({

hasChild: false

});

}

render(){

return (

<div>

{

this.state.hasChild ? <Component data={this.state.data}/> : null

}

<button onClick={()=>{this.onPropsChange()}}>改变Props</button>//5

<button onClick={()=>{this.onDestoryChild()}}>干掉子组件</button>//11

</div>

);

}

}

 

ReactDOM.render(

<App/>,

document.getElementById('app')

);