• 欢迎大家分享资料!前往留言板评论即可!

react组件生命周期

合宙 模组资料网 5个月前 (05-15) 68次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

组件的生命周期

  • 概念:在组件创建、到加载到页面上运行、以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为 组件的生命周期;
  • 组件生命周期分为三部分:
    • 组件创建阶段:组件创建阶段的生命周期函数,有一个显著的特点:创建阶段的生命周期函数,在组件的一辈子中,只执行一次;

      componentWillMount: 组件将要被挂载,此时还没有开始渲染虚拟DOM
      render:第一次开始渲染真正的虚拟DOM,当render执行完,内存中就有了完整的虚拟DOM了
      componentDidMount: 组件完成了挂载,此时,组件已经显示到了页面上,当这个方法执行完,组件就进入都了 运行中 的状态

    • 组件运行阶段:也有一个显著的特点,根据组件的state和props的改变,有选择性的触发0次或多次;

      componentWillReceiveProps: 组件将要接收新属性,此时,只要这个方法被触发,就证明父组件为当前子组件传递了新的属性值;
      shouldComponentUpdate: 组件是否需要被更新,此时,组件尚未被更新,但是,state 和 props 肯定是最新的
      componentWillUpdate: 组件将要被更新,此时,尚未开始更新,内存中的虚拟DOM树还是旧的
      render: 此时,又要重新根据最新的 state 和 props 重新渲染一棵内存中的 虚拟DOM树,当 render 调用完毕,内存中的旧DOM树,已经被新DOM树替换了!此时页面还是旧的
      componentDidUpdate: 此时,页面又被重新渲染了,state 和 虚拟DOM 和 页面已经完全保持同步

    • 组件销毁阶段:也有一个显著的特点,一辈子只执行一次;

      componentWillUnmount: 组件将要被卸载,此时组件还可以正常使用;

react组件生命周期

defaultProps

在组件创建之前,会先初始化默认的props属性,这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 constructor 构造器中的 this.state = {},来初始化组件的状态。

React生命周期的回调函数总结成表格如下:

react组件生命周期

组件生命周期的执行顺序:
+ Mounting:
– constructor()
– componentWillMount()
– render()
– componentDidMount()
+ Updating:
– componentWillReceiveProps(nextProps)
– shouldComponentUpdate(nextProps, nextState)
– componentWillUpdate(nextProps, nextState)
– render()
– componentDidUpdate(prevProps, prevState)
+ Unmounting:
– componentWillUnmount()


转载请注明原文链接:react组件生命周期
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址