react生命周期函数详解

react生命周期函数图详解

根据上图我们可以看出react中的生命周期函数主要分为三个阶段创建、更新、销毁

创建阶段
getDefaultProps()

此阶段为组件初始化，定义propTypes或者defaultProps

getInitialState()

与getDefaultProps的区别在于前者设置默认的 props，后者设置初始的state在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义 this.state。此时可以访问this.props

componentWillMount()

此阶段代表组件即将要挂载，但是还没有挂载，此时可以操作this.state,但是不可以获取到dom

打印结果，数据可以拿到，dom为null

render()

此时可以创建虚拟dom，进行diff算法，更新dom树都是在此阶段，但是不能操作state

componentDidMount()

此时为创建阶段的最后一个生命周期函数，也就是初始化渲染之后执行，此时可以操作state，也可以获取dom元素

打印结果

更新阶段
componentWillReceiveProps(nextProps)

当组建传递过来的props数据发生变化的时候触发

shouldComponentUpdate(nextProps, nextState)

当数据或props发生变化的时候我们可以进行按需更新，如果函数内部return true，则继续更新数据和渲染，如果return false则组织更新

componentWillUpdata(nextProps, nextState)

数据发生变化后将要跟新，此时数据已经更新，但是页面还没有渲染

render()

组件进行虚拟dom的重新渲染

componentDidUpdate()

此时数据和页面都已经渲染完毕，可以拿到最新的dom

销毁阶段
componentWillUnmount()

组件将要卸载时调用，事件和定时器等会被清除