美文网首页
react、vue的生命周期

react、vue的生命周期

作者: 战神七小姐 | 来源:发表于2018-12-28 20:47 被阅读0次

react.生命周期:

(1)无状态组件没有生命周期
(2)实例期:
①Constructor(){}

  • 在组件挂载之前调用,如果没有自定义constructor,实例化组件时会有默认的constructor,如果定义了constructor,就要在constructor里调用super(props)
    (3)存在期:
    ①ComponentWillMount(){}:组件将加载
  • (1)挂载前调用
  • (2)在componentWillMount中修改state,不会导致组件重新渲染
    ②componentDidMount(){}组件加载完毕
  • 组件挂载完成立即触发,在这里修改state会使组件重新渲染
  • 如果需要加载远程数据,在这里发送网络请求
    ③componentWillUpdate(){}组件将更新
  • (1)接收到新的props或state时调用,不能this.setState()
    ④componentDidUpdate(){}组件更新完毕
  • (1)初次渲染不调用
  • (2)组件被更新后可以在这里操作dom
    ⑤shouldComponentUpdate(){}组件可以更新
  • (1)新的props或state被接受渲染前调用
  • (2)返回bool值,默认为true
  • (3)若返回false之后的componentWillUPDATE,render,componentDidMount不会被调用
    ⑥componentWillReceiveProps(){}组件将要接收prop参数
    ⑦Render(){}
    1.Render必须,返回类型:
    (1)React元素:自定义的组件或原生dom组件
    (2)字符串或数字:会被渲染成dom中的文本节点
    (3)Null
    (4)Boolean (5)包含多个元素的数组
render(){
    return [
        <li key='1'>1</li>,
         <li key='2'>2</li>
    ]
}

(4)销毁期:
①componentWillUnmount(){}销毁组件
2.组件初始化生命周期的执行过程:
(1)Constructor(){}
(2)componentWillMount(){}
(3)Render(){}
(4)componentDidMount(){}
3.组件内部状态(state)被改变生命周期的过程:
(1)shouldComponentUpdate(){}
(2)componentWillUpdate(){}
(3)Render(){}
(4)componentDidUpdate(){}
4.组件外部状态被改变生命周期的过程:
(1)componentWillReceiveProps(){}
(2)shouldComponentUpdate(){}
(3)componentWillUpdate(){}
(4)Render(){}
(5)componentDidUpdate(){}
5.使用swipe
(1)Npm install react swip-js-iso react-swipe
(2) import React from 'react'
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';
(3)巴拉巴拉。。。

vue生命周期

1.beforeCreate:
(1)创建前
(2)还没有响应式
(3)不要修改data里的数据
2.Created
(1)创建完成
(2)可以在这里进行ajax请求,
3.beforeMount
(1)挂载前
4.Mounted
(1)挂载完成
(2)初始化完成
5.beforeUpdate
(1)更新前
6.Updated
(1)更新后
7.beforeDestroy
(1)销毁前
8.Destroyed
(1)销毁后

相关文章

  • 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组件的生命周期的时候,让我想到了Vue同样...

  • 03-03.Plugin

    Plugin Plugin的作用 Plugin类似与vue和react的生命周期。可以帮助我们在使用webpack...

  • vue生命周期

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

网友评论

      本文标题:react、vue的生命周期

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