React 生命周期

React生命周期已经是老生常谈了。
博主最近学习打算深入学习React发现React生命周期的一些特点，这个也做为自己在React学习上面的一个记录。

React一共有三大周期：挂载（安装），渲染（更新），卸载。

注：每个阶段的进行顺序就是代码中的顺序

挂载周期

import React, { Component, PropTypes } from 'react'

class App extends Component {
    static PropTypes = {
        设置props类型阶段
    }
    static defaultProps = {
        设置props默认值阶段
    }
    constructor(props) {
        super(props)  继承传递的值
        this.state = {  初始化state
            // ...
        }
    }
    componentWillMount() {
        预安装阶段
    }
    render() {
        将虚拟DOM结合到真实DOM中
    }
    componentDidMount() {
        可以进行数据请求等操作。可以进行setState
    }
}

渲染周期

class App extends Component {
    componentWillReceiveProps(nextProps) {
        接受更新props阶段，可以使用setState
    }
    shouldComponentUpdate(nextProps,nextState) {
        是否更新props和state阶段，默认为true，代表渲染（更新）
        可以在这个阶段对nextProps和当前this.props进行对比，以便确认是否渲染（更新）
    }
    componentWillUpdate(nextProps, nextState) {
        与挂载相似，预安装
    }
    render() {
        将虚拟DOM结合到真实DOM中，纯函数返回值只能有一个顶根元素或null。
    }
    componentDidUpdate() {
        实际渲染（更新）阶段（将DOM添加到HTML中）
    }
}

卸载周期

class App extends Component {
    componentWillUnmount() {
       可以卸载在componentDidMount的Ajax请求
    }
}

本文参考：
深入React技术栈

若有建议，请留言，谢谢。
你的交流，是彼此的进步。