React Native組件的生命週期及屬性props

創建組件的三種方式

第一種:通過ES6的方式創建

/**
 * 方式一 :ES6
 */

export default class HelloComponent extends Component {
  render (){
      return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
  }
}

第二種:通過ES5的方式創建

/**
 * 方式二:ES5
 */
var HelloComponent= React.createClass(
  {
    render (){
        return <Text style={{fontSize:50,backgroundColor:'red',marginTop:200}}>Hello:{this.props.name}</Text>
    }
  }
);
module.exports = HelloComponent;

第三種:函數式定義

/**
 * 方式三:函數定義
 * 無狀態,不能使用this
 */
function HelloComponent(props){
      return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text>
  }
module.exports = HelloComponent;

組件的生命週期

在React 中組件(Component)也是有自己的生命週期方法的。展示一個界面從創建到銷燬的一生。

組件的生命週期分成三個狀態：
Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM
當一個組件的屬性或者狀態發生變化時,會對組件重新渲染,更新界面.
在render方法中返回 null 或者 false 來表明不需要渲染任何東西,可以通過上一頁的render返回null來模仿該組件的卸載情況
1 Mounting(裝載)
getInitialState(): 在組件掛載之前調用一次。返回值將會作爲 this.state 的初始值。
componentWillMount()：服務器端和客戶端都只調用一次，在初始化渲染執行之前立刻調用。
componentDidMount()：在初始化渲染執行之後立刻調用一次，僅客戶端有效（服務器端不會調用）。
2 Updating (更新)
componentWillReceiveProps(object nextProps) 在組件接收到新的 props 的時候調用。在初始化渲染的時候，該方法不會調用。
用此函數可以作爲 react 在 prop 傳入之後， render() 渲染之前更新 state 的機會。老的 props 可以通過 this.props 獲取到。在該函數中調用 this.setState() 將不會引起第二次渲染。

shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，將要渲染之前調用。
該方法在初始化渲染的時候不會調用，在使用 forceUpdate 方法的時候也不會。如果確定新的 props 和 state 不會導致組件更新，則此處應該 返回 false。

心得：可以根據實際情況來重寫次這些生命週期的方法，靈活的控制組件當 props 和 state 發生變化時是否要重新渲染組件。
componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之前立刻調用。
在初始化渲染的時候該方法不會被調用。使用該方法做一些更新之前的準備工作。

注意：你不能在該方法中使用 this.setState()。如果需要更新 state 來響應某個 prop 的改變，請使用 componentWillReceiveProps。
componentDidUpdate(object prevProps, object prevState): 在組件的更新已經同步到 DOM 中之後立刻被調用。
該方法不會在初始化渲染的時候調用。使用該方法可以在組件更新之後操作 DOM 元素。

3 Unmounting(移除)
componentWillUnmount：在組件從 DOM 中移除的時候立刻被調用。
在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中創建的 DOM 元素。

---

組件詳解

使用前兩種方法創建組件的時，必須提供render方法.
#render
render() 方法是必須的。
當該方法被回調的時候，會檢測 this.props 和 this.state，並返回一個單子級組件。
你也可以返回 null 或者 false 來表明不需要渲染任何東西。當返回 null 或者 false 的時候，this.getDOMNode() 將返回 null,不要在render()函數中做複雜的操作，更不要進行網絡請求，數據庫讀寫，I/O等操作。
#getInitialState
object getInitialState() 初始化組件狀態，在組件掛載之前只調用一次。返回值將會作爲 this.state 的初始值。
#getDefaultProps
object getDefaultProps()
設置組件屬性的默認值，在組件類創建的時候調用一次，然後返回值被緩存下來。如果父組件沒有指定 props 中的某個鍵，則此處返回的對象中的相應屬性將會合併到 this.props （使用 in 檢測屬性）。

  static DefaultProps={
      name:'小米',
      isRequire:true,
  }

注意,該方法在任何實例創建之前調用，因此不能依賴於 this.props。另外，getDefaultProps() 返回的任何複雜對象將會在實例間共享，而不是每個實例擁有一份拷貝。該方法在你封裝一個自定義組件的時候經常用到，通常用於爲組件初始化默認屬性。
#PropTypes
object propTypes
propTypes 對象用於驗證傳入到組件的 props。對props進行分類檢查與約束,避免造成錯誤.

  static PropTypes={
    Image.PropTypes.source,
    leftButtonTitle: React.PropTypes.string,
  }

#延展操作符 …
props是隻讀的,不可改變的,但state是爲用戶交互而設計的.

var prames = {mount:1,name:'小米',age:12};
<HelloComponent {...prames} />

在 HelloComponent中的代碼爲:
constructor(props){
    super(props);
    this.state={
      mount:10,
      name:'小紅',
      age:10,
    }
  }

  render (){
      return (
          <View>
          <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {this.state.name+' 你的年紀是:'+this.state.age+'  成績排名是:'+this.state.mount}</Text>
          <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {this.props.name+' 你的年紀是:'+this.props.age+'  成績排名是:'+this.props.mount}</Text>
          </View>
      )
  }
輸出:
Hello 小紅 你的年紀是10 成績排名是10
Hello 小米 你的年紀是12 成績排名是1
注意:this.props.XXX與this.state.XXX