ReactJS-3-组件生命周期

简介

平凡的UI应用生命周期一般包括Birth, Growth, Death,
React中Component的生命周期也是如此,这是一个不息的过程,贯穿整个应用的身进程。

阶段

1.mounting(birth)

起先同初始化组件的下,在斯等级,会生如下事情:

  • 概念及布置props和state
  • 组件和组件的孩子会装至本地用户界面堆栈
  • 此等就发同样破

2.update(growth)

在偏下情形会进这路:

  • 更新了props ,state
  • 拍卖用户交互
  • 组件层次结构间进行通信。
    以此等所花工夫最好多,发生不止一次

3.unmount(death)

在以下情况会进是阶段:

  • 自Native UI卸载组件实例
  • 用户导航离开
  • UI 界面改变
  • 组件隐藏
    是路有同样涂鸦,组件准备好垃圾回收

组件生命周期图

图片 1

零件生命周期方法介绍(源于官方文档)

Munting Phase

1. constructor()

以mount之前调用,如果没创新state或绑定方法,不需要者方式,一般以此方法吃成就组件state的初始化工作等

2. componentWillMount()

当mounting发前及时调用,在render()之前调用,在是办法被调用setState的时候,会触发WillUpdate,render,
DidUpdate。一般在斯方式中好部分零件的启动(这些零件的启航不依赖DOM,因为此时DOM未加载成功),如
Ajax 数据获得、启动定时器等。

3. componentDidMount()

于这办法中调用setState方法会触发一糟额外的render函数。如果组件的开行依赖DOM的话,需要以这个方式中展开,因为这就实行过render,dom已经加载成功。

Updating Phase

1. componentWillReceiveProps()

每当一个一度mount过之零件接收props变化前调用,调用setState()方法无会见触发,有时props不更换吗会见调用,因此如果单盼望该措施以发生变化时利用,请较props和nextProps

2. shouldComponentUpdate()

沉默寡言认为true。在开班渲染或动forceUpdate()时,不见面调用此方。返回false不见面阻止子组件在那状态更改时再次显现。目前,如果shouldComponentUpdate()返回false,则未会见调用componentWillUpdate(),render()和componentDidUpdate()

3. componentWillUpdate()

当收到至props和state的转移的render之前实施

4. componentDidUpdate()

更新后随即执行

Unmount Phase

1. componentWillUnmount()

每当卸载和销毁组件之前及时调用。在拖欠办法被,一般就数据的清理,如在移除或隐蔽组件的早晚,定时器仍然工作,则要在是函数里形成定时器的清理,终止定时器的干活。

相关文章