《ReactNative系列講義》基礎篇---02.Components and Props

| 版權聲明：本文爲博主原創文章，未經博主允許不得轉載。

一、簡介

Components能夠讓你將UI獨立分開，碎片化並重複使用。今天我們通過學習ReactNative中的數據類型來看看如何創建獨立的UI Components。RN中控制組件的數據類型有兩種，一種作用於組件間，叫做Props；一種作用於組件內部，叫做State。這篇文章我們先來學習一下組件間數據類型Props，也正是因爲有了Props，UI組件之間纔可以互相傳遞數據。

二、基礎概念

• Props屬性可以幫助你製作單獨的組件，可以使得該組件在App的任何地方使用。
• Props屬性由父組件設置（即調用該獨立組件的組件），並且穩定的存在於這個組件的生命週期裏面（不可改變，即只讀性）
• Props屬性的更新可能是異步的，因此不可用於計算下一個狀態

三、應用

• 本文及其以後文章所寫語法均爲ES6語法

1. 引入你需要的組件或者類

// 引入react包的React對象及其Component組件
import React, { Component } from 'react';
// 引入react-native包中組件
import { StyleSheet, Text, View } from 'react-native';

2. 創建類組件，ES6語法，通過構建類創建獨立UI組件

// 類的基本結構
class Welcome extends Component{
    render() {
        return(
            <Text>Hello,{this.props.name}</Text>
        );
    }
}

3. 創建唯一輸出類（最頂級的類）並調用類組件

export default class ClockTick extends Component {
    render() {
        return (
            <View>
                // 獨立組件可重複調用
                <Welcome name="蝸牛慢慢跑1"/>
                <Welcome name="蝸牛慢慢跑2"/>
                <Welcome name="蝸牛慢慢跑3"/>
            </View>
        );
    }
}

調用過程解讀：ClockTick類調用Welcome組件，其中name屬性賦值“蝸牛慢慢跑”，這個值傳遞到了Welcome組件中的this.props.name中，加上前面的字符，最後組合成“Hello，蝸牛慢慢跑”。return方法又將這組字符串傳遞出去，因此調用Welcome的ClockTick類會輸出“Hello，蝸牛慢慢跑”字樣。

注：

• 一個js文件中只能有一個默認輸出的類（最頂級的類），關鍵字：export default
• 類組件的命名規則：首字母必須大寫
• 可多次重複調用類組件
• 只讀性或者純淨性解讀：只要調用該獨立組件的父組件傳遞的props值相同，該獨立組件返回的值也應該相同，即在該獨立組件內部，props屬性值不可改變！
• Components其實是在提倡一種思想，不要害怕組件分離的太小，如果某部分UI會被多次使用，還是推薦封裝成UI組件，例如：Button、Avatar

四、總結

在這一節裏，我們講述了第一種控制數據的方式以及創建一個類的基本要素。通過這一節學到的知識再加上上節課中的JSX知識，你完全可以寫出一個屬於你自己的第一個ReactNative頁面了，是不是有些小激動呢。在下節課中，我們將繼續學習控制數據的第二種方式。