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