美文网首页
vue,react生命周期

vue,react生命周期

作者: 一个胡椒粉 | 来源:发表于2018-07-29 19:42 被阅读0次

1: vue生命周期钩子函数
开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程

create      beforeCreate事件配置之前用       created         数据的操作 创建数据完后之后调用

mount               beforeMount 挂载之前调用          mounted       视图 挂载到实例之后使用dom  操作 

update              beforeUpdate 数据更新时调用      updated        变化检测更改之后

destory             beforeDestroy 实例销毁之前调用   destroyed    销毁之后调用

2:react生命周期钩子函数

声明周期三个阶段 9个生命周期钩子函数 10

  • 操作 mount 挂载
    1.constructor( ){ } 接收props 实现继承super(props) 定义状态/数据
  1. componentWillMount( ){ } 首次渲染之前调用
    componentDidMount( ){ } 首次真实的DOM渲染后调用(仅此一次) 数据的请求 , 类似于vue的 created
  2. render( ){ return ( ) } 在这里书写页面展示的标签(渲染)
  • 更新 update 存在期

    1. render函数
    2. componentWillReceiveProps 组件将要接收输入属性 父组件更新子组件props时,调用 next.props 下一个属性
    3. shouldComponentUpdate 组件内容变化检测 是否更新组件默认返回true。当返回false时,后期函数就不会调用,组件不会在次渲染 next.props
      next.state 下一个状态
    4. componentWillUpdate 组件将要更新 -- 更新之前 props和state改变后必调用
    5. componentDidUpdate 组价更新之后 真实dom成功后调用,访问真实dom时
  • 销毁 unmount

    1. componentWillUnmount 组件销毁 使用完后必须销毁
      eg:在组件中使用了setInterval,那我们就需要在这个方法中调用clearTimeout。

相关文章

  • VUE V.S. React 生命周期对比

    参考文章:vue生命周期和react生命周期对比

  • React 的几个语法

    componentDidMount() Vue与React的异同—生命周期(一) 之所以react推荐在compo...

  • react生命周期 虚拟dom

    vue和react都使用虚拟dom:通过js构建dom树节点react生命周期:https://zh-hans.r...

  • metaapp面经

    react生命周期 react组件传值 vue懒加载 es6的class echarts复杂图表 css动画 一个...

  • Vue入门系列(三)Vue实例的生命周期

    Vue实例生命周期钩子函数与React非常相似,最明显的区别在于,它多了一个实例创建阶段。 Vue实例和Vue组件...

  • Flutter的生命周期

    在原生 Android 、原生 iOS 、前端 React 或者 Vue 都存在生命周期的概念,在 Flutter...

  • Vue 生命周期函数

    吐槽:最近学习 Vue 的生命周期函数,有点搞不懂,为什么要叫钩子函数???以前了解过 React 的生命周期,开...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React的生命周期(读书整理)

    即使最近还是有点拖延,可还是再看一些关于React的东西。看到React组件的生命周期的时候,让我想到了Vue同样...

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

网友评论

      本文标题:vue,react生命周期

      本文链接:https://www.haomeiwen.com/subject/nqdtvftx.html