ReactNaitve系列之七生命周期

React Native 生命周期介绍

1、    前言

React Naitve中继承Component的实现类可以在界面渲染显示。根据下图分析一个Component生命周期。

React Native 组件的生命周期大致分为实例化、存在和销毁阶段。

实例化阶段：组件的构建、展示，变量的初始化、根据实现Component提供的几个方法来控制构建显示流程

存在阶段：监听控件变化的一些行为，决定是否需要再次渲染或执行其它操作

销毁阶段：清理一些无用的内容

2、    实例化阶段函数分析 （方法名为es5，后面介绍es5及es6的区别）

a)  getDefaultProps

方法在渲染之前执行，用于初始化一些默认的属性，可以利用this.props获取这里初始化的属性，不可以重置此props中的值

b)  getInitialState

该方法是用于对组件的一些变量进行初始化；可通过this.state来获取值，通过this.setState来修改变量的值，如：

this.setState({

  title : title,

});

注：调用setState方法后，一定会再次执行render方法

c)  componentWillMount

在组件将要被加载渲染之前调用

d)  render

对组件进行渲染，必须实现的一个方法。只能返回一个顶级元素

e)  componentDidMount

在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作

3、    存在阶段函函数分析

a)  componentWillReceiveProps

指父元素对组件的props或state进行了修改

b)  shouldComponentUpdate

一般用于优化，可以的返回false或true来控制是否进行渲染

c)  componentWillUpdate

组件刷新前调用，类似componentWillMount

d)  componentDidUpdate

更新后的hook

4、    销毁阶段函数分析

a)  componentWillUnmount

界面销毁将会执行此方法，可用于清理内存，注销linstener等

5、    es5与es6的区别（类创建、state、props）

a)  类创建形式不同

b)  组件属性props的定义形式不同

c)  组件属性state的定义形式不同

6、    DOM节点获取

在控件中添加属性ref,在使用时通过refs在DOM中获取节点元素，使用setNativeProps修改其属性值