react生命周期函数详解

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()

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