React Native——Component（元件）

xiaoyanger發表於2017-07-03
React Native元件

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來獲取。

相關文章