Vue与React Natice生命周期简述

Vue 生命周期

u=3942278502,2357480570&fm=173&app=25&f=JPEG.jpeg
1.beforeCreate(初始化前)
2.created(初始化完毕)
3.activated(类似iOS的viewDidappear)
4.deactivated(类似iOS的ViewDidDisappear)
3.beforeMounted(对象在DOM中适合形状)
4.mounted(DOM已准备就绪并放置在页面内)
5.beforeUpdate(更改已完成,但尚未准备好更新DOM)
6.updated(在DOM中呈现的更改)
7.beforeDestroy(对象准备死掉)
8.destroyed(对象停止并从内存中删除)

ReactNative 生命周期

757139-20190214142433730-707828579.png

一、Mounting(创建)

1.constructor(构建函数 返回state的初始值)
2.componentWillMount(组件将要被加载到视图之前调用)
3.render(组件渲染函数,会返回一个Virtual DOM,只允许返回一个最外层容器组件)
4.componentDidMount(在调用了render方法,组件加载成功并被成功渲染出来之后,所要执行的后续操作,一般都会在这个函数中进行,比如经常要面对的网络请求等加载数据操作)

注: 因为UI在componentDidMount已经成功渲染,而且这里面是异步的,所以放在这个函数进行数据的请求等复杂的操作,不会出现UI错误

二、Updating(更新)

1.componentWillReceiveProps(指父元素对组件的props或state进行了修改)
2.shouldComponentUpdate ? (一般用于优化,可以返回false或true来控制是否进行渲染(true 的话进行下2步操作,false不会进行下去)
3.componentWillUpdate(组件刷新前调用)
4.render
5.componentDidUpdate(更新后)

三、Unmounting(销毁)

1.componentWillUnmount(用于清理一些无用的内容,比如:定时器清除)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,546评论 1 33
  • 前言 为了进一步的了解React的工作过程,已经晓得了怎么编写React组件,知道了React的数据流,那么是时候...
    itclanCoder阅读 845评论 0 1
  • React 生命周期很多人都了解,但通常我们所了解的都是单个组件的生命周期,但针对Hooks 组件、多个关联组件(...
    前端js阅读 7,102评论 3 7
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,075评论 0 1
  • 生命周期流程图简单如下: 组件让你把用户界面分成独立的,可重复使用的部分,并且将每个部分分开考虑。React.Co...
    Simple_Learn阅读 1,100评论 0 0