React Native学习笔记(四)-生命周期

lifecycle.jpg

• 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
• 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
• 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作

生命周期

实例化

getDefaultProps

在组件创建前，会全局调用一次 getDefaultProps()，初始化默认props属性

getInitialState

在组件创建并加载时，初始化组件的状态

componentWillMount

在初始化状态之后，render() 之后调用

render

渲染并返回 DOM 结构

componentDidMount

在渲染完成后，通知组件已经渲染完成

重新渲染

componentWillReceiveProps

如果有新收到的 Props (属性)就会调用该方法，旧的属性还是可以通过 this.props 来获取，可以通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用

shouldComponentUpdate

函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate() 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()

void componentWillUpdate(  
  object nextProps, object nextState
)

在这个函数中不能使用 this.setState 来修改状态。函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中，然后就是调用 render()进行页面的渲染

render

componentDidUpdate

调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来通知界面已经渲染完成了

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount()