react-native 元件生命周期

react-native 元件生命周期：

1、生成子產品代碼：

根據編譯時指定的子產品目标參數，編譯器會生成相應的供Node.js (CommonJS)，Require.js (AMD)，isomorphic (UMD), SystemJS或ECMAScript 2015 native modules (ES6)子產品加載系統使用的代碼

react-native元件導入的兩種寫法：

ES5(Native ECMAScript 2015 modules) （類似commonJS的子產品導入）

//導入React ReactNative包  
var React = require ("react");  
var {Component, PropTypes} = React;  
var ReactNative = require ("react-native");  
var { Image, Text,} from 'react-native';  
//導入其他元件  
var MyComponent = require('./MyComponent');  
//定義元件  
var TestComponent = React.creatClass({  });
module.exports = TestComponent;  
           

ES6

//導入React ReactNative包     
import React,{ Component,PropTypes }  from 'react';  
import {  } from 'react-native';  
//導入其他元件  
import MyComponent from './MyComponent'; 
//定義元件  
export default class TestComponent extends Component{ }
           

2、元件的特性

props：元件中的屬性，

常用于跳轉頁面的傳值：this.props.navigator.push({component:xxx, id: this.props.id})

不同元件之間傳值

子元件向父元件傳值

state：元件中的狀态

父元件向子元件傳值

this.setState 方法就修改狀态值，每次修改以後，自動調用 this.render 方法，再次渲染元件。

this.props 和 this.state 都用于描述元件的特性：

this.props 表示那些一旦定義，就不再改變的特性，

this.state 是會随着使用者互動而産生變化的特性

3、react-native元件生命周期

react-native是基于react的元件架構，

如Android中的View一樣，react native中的元件也有生命周期（就是一個對象從開始生成到最後消亡所經曆的狀态）

生命周期：

Mount階段

（1）getDefaultProps 執行個體化調用(調用一次)，初始化預設屬性props

（2）getInitialState 初始化狀态state，常用于改變元件狀态

（3）componentWillMount元件将被加載前，可最後一次初始化狀态

（5）render 渲染元件

（4）componentDidMount 元件被加載後，常用于互動，如設定計時setTimetou或者setInterval，或者發起網絡請求

Update階段：處理與使用者的互動，如：點選、觸摸事件

（8）componentWillReceiveProps 指父元素對元件的props或state進行了修改

（9）shouldComponentUpdate 一般用于優化，傳回false或true來控制是否進行渲染

不重新渲染：回到元件運作狀态

重新渲染(則進行如下操作)

（5）componentWillUpdate 元件重新整理前調用

（6）componentDidUpdate 元件重新整理hook

Unmount階段

（7）componentWillUnMount元件解除安裝，用于清除計時，監聽removeAllListeners