react生命周期函数详解

悠悠 2022-02-19 18:20 422阅读 0赞

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

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

发表评论

表情：
评论列表 （有 0 条评论，422人围观）

还没有评论，来说两句吧...

相关阅读