react 生命周期节点

Mounting：挂载阶段
Updating: 运行阶段
Unmounting：卸载阶段
Error Handling：错误处理

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    //构造函数
    constructor(props) {
        super(props)
        this.state = {
            data:'old State'
        }
        console.log('初始化数据','constructor')
    }
    //组件将要加载
    componentWillMount(){
        console.log('componentWillMount')
    }
    //组件加载完成
    componentDidMount(){
        console.log('componentDidMount')
    }
    //将要接收父组件传来的props
    componentWillReceiveProps(){
         console.log('componentWillReceiveProps')
    }
    //子组件 是不是应该更新
    shouldComponentUpdate(){
         console.log('shouldComponentUpdate')
         return true
    }
    // 组件将要更新 shouldComponentUpdate return 为true执行
    componentWillUpdate(){
        console.log('componentWillUpdate')
    }
    // 组件更新完成
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }
    //点击事件
    handleClick(){
        console.log('更新数据')
        this.setState({
            data:'New State'
        })
    }
    //渲染
    render() {
        console.log('render');
        return (
            <div>
                <div>App</div>
            <button onClick={()=>{this.handleClick()}}>更新组件</button>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')
)


//--------------//---------------
打印结果
初始化数据 constructor
componentWillMount
render
componentDidMount

更新数据
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

父组件传值

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')
    }
    //组件将要加载
    componentWillMount(){
        console.log('componentWillMount')
    }
    //组件加载完成
    componentDidMount(){
        console.log('componentDidMount')
    }
    //将要接收父组件传来的props
    componentWillReceiveProps(){
         console.log('componentWillReceiveProps')
    }
    //子组件 是不是应该更新
    shouldComponentUpdate(){
         console.log('shouldComponentUpdate')
         return true
    }
    // 组件将要更新 shouldComponentUpdate return 为true执行
    componentWillUpdate(){
        console.log('componentWillUpdate')
    }
    // 组件更新完成
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }
    //组件将要销毁时调用
    componentWillUnmout(){
        console.log('componentWillUnmout')
    }
    //点击事件
    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')
    }
    onPropsChange(){
        console.log('更新props');
        this.setState({
            data:'new Props'
        })
    }
    onDestoryChild(){
        console.log('干点子组件');
        this.setState({
             hasChild:false
        })
    }
    render(){
       return(
           <div>
               {this.state.hasChild?<Component data={this.state.data}/>:null}

               <button onClick={()=>{this.onPropsChange()}}>改变props</button>
               <button onClick={()=>{this.onDestoryChild()}}>干掉子组件</button>
           </div>
       )
    }
}
ReactDOM.render(
    <App/>,
    document.getElementById('app')
)


//--------------//---------------
初始化数据 constructor
componentWillMount
render
componentDidMount

更新props
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

干点子组件
componentWillUnmout