React Native——Component（組件）

React利用JSX語法將html標籤封裝成組件的形式，來插入到DOM中，能夠很方便的構建出網頁UI。在React Native中，組件還是其最核心的東西，各個界面UI都是經過基礎組件的拼裝來實現的。

JSX

React 的核心機制就是建立虛擬DOM，在虛擬DOM與實際DOM之間經過強大的Diff算法來減小對實際DOM的渲染操做以提高性能。虛擬DOM能夠用原生的JS來建立，可是這樣的方式讓代碼的可讀性不夠友好，Facebook就利用你們熟悉的XML語法結合JS創造了JSX語法。JSX既是原生的JS，又能直觀易懂的展現這些語意化的組件。

使用JSX語法定義組件V：

import React, {Component} from "react";
import {Alert, StyleSheet, Text, View} from "react-native";
export default class V extends Component {
    render() {
        return (
            
  
  
  

  
 
  
    this.press()}>訪問 
   

 
        );
    }

    press = () => {
        Alert.alert("標題", "內容");
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    visite: {
        width: 40,
        height: 40,
        backgroundColor: '#00ff00'
    }
});複製代碼

在組件的JS文件中，能夠直接使用ES6語法，組件的層次結構都是在render方法中採用JSX語法來定義，能夠將JSX語法看作是JS和XML混寫的語法，當遇到<，JSX就當HTML解析，遇到{就當JS解析。

props（屬性）

UI的各類展現效果，須要用到它的屬性props。大多數的組件在定義的時候就可使用各類參數來定製，這些參數就是組件的屬性props。props中的某個屬性的值一般是在父組件中指定，並且一經指定，通常都不會再改變，除非父組件去從新指定它。

import React, {Component} from "react";
import {Text, View} from "react-native";
class C extends Component {

    // 定義並初始化屬性，es6寫法
    static defaultProps = {name: "Jack", age: 25};
    static propTypes = {name: React.PropTypes.string, age: React.PropTypes.number};

    render() {
        return (
            
  
  
  

 
  
  {this.props.name + " " + this.props.age + " " + this.props.sex} 

 
        );
    }
}

export default class V extends Component {
    render() {
        let cName1 = 'Smith';
        let cName2 = 'Mark';
        let cAge1 = 30;
        let cAge2 = 20;
        let cSex1 = '男';
        let cSex2 = '女';
        return (
            
  
  
  

  
 
   
    
    
   

 
        );
    }
}複製代碼

在上面的代碼中，組件C中定義了兩個默認的屬性name和age，並給定了類型和初始值。在組件V中，引用了組件C，所以組件V爲組件C的父組件。父組件V給組件C的name和age屬性指定新的屬性值，同時新增了一個sex的屬性並給定屬性值。那麼在組件C中是不能改變組件V給它指定的name、age和sex的值。

state（狀態）

若是須要改變組件的參數來實現交互，須要用到它的狀態state。一般在組件的構造函數中初始化state，在須要修改的時候調用setState()方法。

舉一個例子，一段文本點擊後改變它的背景，那麼咱們將bgColor定義爲組件V3的狀態，在constructor函數中初始化，點擊後改變該狀態的值：

import React, {Component} from "react";
import {Text, View} from "react-native";
export default class V3 extends Component {

    constructor(props) {
        super(props);
        this.state = {bgColor: "#ffffff"};
    }

    render() {
        return (
            
  
  
  

  
 
  
    this.press()}>點擊改變背景顏色 
   

 
        );
    }

    press = () => {
        if (this.state.bgColor === "#ffffff") {
            this.setState({bgColor: "#00ff00"});
        } else if (this.state.bgColor === "#00ff00") {
            this.setState({bgColor: "#ff00ff"});
        } else {
            this.setState({bgColor: "#ffffff"});
        }
    }
}複製代碼

組件生命週期

組件生命週期

上流程圖描述了組件從建立、運行到銷燬的整個過程，能夠看到若是一個組件在被建立，從開始一直到運行會依次調用getDefaultProps到render這五個函數；在運行過程當中，若是有屬性和狀態的改變，又會觸發左側的其餘函數的調用，並在此回到運行狀態；當組件即將會被銷燬時，會調用函數conponentWillUnmount來通知組件，到最終組件銷燬，生命週期結束。

• getDefaultProps 獲取默認屬性，並初始化props;
• getInitialState 獲取初始化的組件狀態state；
• componentWillMount 組件將會被裝載，在渲染render前調用；
• componentWillReceiveProps 若是接收到屬性就會調用該方法，舊的屬性仍然能夠經過this.props來獲取，也能夠調用this.setState來更新組件的狀態，這裏更新狀態是安全的，不會觸發render。
• shouldComponentUpdate 決定是否更新組件；
• componentWillUpdate 若是組件的狀態或者屬性改變了，而且shouldComponentUpdate爲true，就會調用側方法準備更新組件；
• render渲染，即初次渲染和更新組件的方法；
• componentDidUpdate 組件更新完成後會調用此方法；
• conponentWillUnmount 當組件要銷燬，即從界面移除時，就會調用此方法。

在ES6中已經廢除了getDefaultProps和getInitialState的方式，直接經過this.props和this.state來獲取。