码迷,mamicode.com
首页 > 其他好文 > 详细

React生命周期

时间:2020-06-30 00:16:15      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:自动调用   构造函数   stat   img   ack   打印   rop   个人   刷新   

1.React生命周期

技术图片

这张图可以看到React生命周期的四大阶段

  • Initalization:初始化阶段
  • Mounting:挂载阶段
  • Updation:更新阶段
  • Unmounting:销毁阶段

2.什么是生命周期函数?

生命周期函数指在某一时刻组件会自动调用执行的函数

技术图片

render()函数,就是一个生命周期函数,它在state发生改变时自动执行。这就是一个标准的自动执行函数。

  • constructor不算生命周期函数。

constructor我们叫构造函数,它是ES6的基本语法。虽然它和生命周期函数的性质一样,但不能认为是生命周期函数。

但是你要心里把它当成一个生命周期函数,我个人把它看成React的Initialization阶段,定义属性(props)和状态(state)。

3.Mounting阶段

Mounting阶段叫挂载阶段,伴随着整个虚拟DOM的生成,它里边有三个小的生命周期函数,分别是:

  1. componentWillMount : 在组件即将被挂载到页面的时刻执行。
  2. render : 页面state或props发生变化时执行。
  3. componentDidMount : 组件挂载完成时被执行。

技术图片

 控制台打印出来的顺序是:

技术图片

这也是生命周期的顺序。这个函数书写有顺序吗?哪个在前?哪个在后?其实是没有顺序的,你可以随便改动他们的顺序。

注意的问题

componentWillMountcomponentDidMount这两个生命周期函数,只在页面刷新时执行一次,而render函数是只要有state和props变化就会执行

 

React生命周期

标签:自动调用   构造函数   stat   img   ack   打印   rop   个人   刷新   

原文地址:https://www.cnblogs.com/GumpYan/p/13211093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!