React 基礎

React Native 運行於 React 之上，React 是一個熱門的開源函式庫，用於使用 JavaScript 建構使用者介面。為了充分利用 React Native，了解 React 本身會有所幫助。本節可以幫助您入門，或者作為複習課程。

我們將涵蓋 React 背後的核心概念

• 組件
• JSX
• props
• state

如果您想深入了解，我們鼓勵您查看 React 的官方文件。

您的第一個組件

本 React 簡介的其餘部分在其範例中使用貓：友善、平易近人的生物，需要名字和工作的咖啡廳。這是您的第一個 Cat 組件

以下是您的做法：若要定義您的 Cat 組件，首先使用 JavaScript 的 import 匯入 React 和 React Native 的 Text 核心組件

tsx

import React from 'react';
import {Text} from 'react-native';

您的組件以函式開始

tsx

const Cat = () => {};

您可以將組件視為藍圖。函式組件傳回的任何內容都會呈現為 React 元素。React 元素可讓您描述您想在螢幕上看到的內容。

在這裡，Cat 組件將呈現 <Text> 元素

tsx

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

您可以使用 JavaScript 的 export default 匯出您的函式組件，以便在您的應用程式中使用，如下所示

tsx

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

這是匯出組件的眾多方法之一。這種匯出方式非常適合 Snack Player。但是，根據您應用程式的檔案結構，您可能需要使用不同的慣例。這份 關於 JavaScript 匯入和匯出的實用速查表 可以提供幫助。

現在仔細看看該 return 陳述式。<Text>Hello, I am your cat!</Text> 正在使用一種 JavaScript 語法，使編寫元素變得方便：JSX。

JSX

React 和 React Native 使用 JSX，這是一種語法，可讓您在 JavaScript 內部編寫元素，如下所示：<Text>Hello, I am your cat!</Text>。React 文件中有 一份關於 JSX 的綜合指南，您可以參考以了解更多資訊。因為 JSX 是 JavaScript，所以您可以在其中使用變數。在這裡，您正在為貓宣告一個名稱 name，並使用大括號將其嵌入 <Text> 中。

任何 JavaScript 表達式都可以在大括號之間運作，包括函式呼叫，例如 {getFullName("Rum", "Tum", "Tugger")}

TypeScript

JavaScript

您可以將大括號視為在您的 JSX 中建立通往 JS 功能的入口！

由於 JSX 包含在 React 函式庫中，如果您在檔案頂部沒有 import React from 'react'，它將無法運作！

自訂組件

您已經見過 React Native 的核心組件。React 可讓您將這些組件彼此巢狀，以建立新的組件。這些可巢狀、可重複使用的組件是 React 典範的核心。

例如，您可以將 Text 和 TextInput 巢狀在下面的 View 內部，而 React Native 將會一起呈現它們

開發人員筆記

Android

如果您熟悉 Web 開發，<View> 和 <Text> 可能會讓您想起 HTML！您可以將它們視為應用程式開發的 <div> 和 <p> 標籤。

Web

在 Android 上，您通常將視圖放在 LinearLayout、FrameLayout、RelativeLayout 等內部，以定義視圖的子項將如何在螢幕上排列。在 React Native 中，View 對其子項的佈局使用 Flexbox。您可以在 我們的 Flexbox 佈局指南 中了解更多資訊。

您可以多次且在多個位置呈現此組件，而無需透過使用 <Cat> 重複您的程式碼

任何呈現其他組件的組件都是父組件。在這裡，Cafe 是父組件，而每個 Cat 都是子組件。

您可以在您的咖啡廳中放置任意數量的貓。每個 <Cat> 都會呈現一個獨特的元素——您可以使用 props 自訂它。

Props

Props 是「properties」（屬性）的縮寫。Props 可讓您自訂 React 組件。例如，在這裡，您將不同的 name 傳遞給每個 <Cat>，以供 Cat 呈現

TypeScript

JavaScript

React Native 的大多數核心組件也可以使用 props 自訂。例如，當使用 Image 時，您會將名為 source 的 prop 傳遞給它，以定義它顯示的影像

Image 有 許多不同的 props，包括 style，它接受設計和佈局相關的屬性值對的 JS 物件。

請注意環繞 style 的寬度和高度的雙大括號 {{ }}。在 JSX 中，JavaScript 值以 {} 引用。如果您要傳遞字串以外的內容作為 props，例如陣列或數字，這會很方便：<Cat food={["fish", "kibble"]} age={2} />。但是，JS 物件也以大括號表示：{width: 200, height: 200}。因此，若要在 JSX 中傳遞 JS 物件，您必須將物件包在另一對大括號中：{{width: 200, height: 200}}

您可以使用 props 和核心組件 Text、Image 和 View 建構許多東西！但是若要建構互動式內容，您將需要 state。

State

雖然您可以將 props 視為您用來設定組件呈現方式的引數，但 state 就像組件的個人資料儲存空間。State 對於處理隨時間變更或來自使用者互動的資料很有用。State 為您的組件提供記憶體！

作為一般規則，在呈現組件時使用 props 來設定組件。使用 state 來追蹤您預期會隨時間變更的任何組件資料。

以下範例發生在貓咖啡廳中，其中有兩隻飢餓的貓正在等待餵食。牠們的飢餓感（我們預期會隨時間變更，不像牠們的名字）儲存為 state。若要餵食貓，請按下牠們的按鈕——這將會更新牠們的 state。

您可以透過呼叫 React 的 useState Hook 將 state 新增至組件。Hook 是一種函式，可讓您「hook into」React 功能。例如，useState 是一個 Hook，可讓您將 state 新增至函式組件。您可以在 React 文件 中了解更多關於 其他種類的 Hook 的資訊。

TypeScript

JavaScript

首先，您會想要從 React 匯入 useState，如下所示

tsx

import React, {useState} from 'react';

然後，您透過在其函式內部呼叫 useState 來宣告組件的 state。在本範例中，useState 建立一個 isHungry state 變數

tsx

const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

您可以使用 useState 來追蹤任何種類的資料：字串、數字、布林值、陣列、物件。例如，您可以使用 const [timesPetted, setTimesPetted] = useState(0) 來追蹤貓被撫摸的次數！

呼叫 useState 會執行兩件事

• 它會建立一個具有初始值的「state 變數」——在本例中，state 變數是 isHungry，其初始值為 true
• 它會建立一個函式來設定該 state 變數的值——setIsHungry

您使用什麼名稱並不重要。但將模式視為 [<getter>, <setter>] = useState(<initialValue>) 會很方便。

接下來，您新增 Button 核心組件，並給它一個 onPress prop

tsx

<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

現在，當有人按下按鈕時，onPress 將會觸發，呼叫 setIsHungry(false)。這會將 state 變數 isHungry 設定為 false。當 isHungry 為 false 時，Button 的 disabled prop 會設定為 true，並且其 title 也會變更

tsx

<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Give me some food, please!' : 'Thank you!'}
/>

您可能已經注意到，雖然 isHungry 是 const，但它似乎是可重新指派的！發生的是，當呼叫像 setIsHungry 這樣的 state 設定函式時，其組件將會重新呈現。在這種情況下，Cat 函式將會再次執行——而這次，useState 將會給我們 isHungry 的下一個值。

最後，將您的貓放在 Cafe 組件內

tsx

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

看到上面的 <> 和 </> 嗎？這些 JSX 位元是 fragments。相鄰的 JSX 元素必須包裝在封閉標籤中。Fragments 可讓您執行此操作，而無需巢狀額外的、不必要的包裝元素，例如 View。

---

現在您已經涵蓋了 React 和 React Native 的核心組件，讓我們更深入研究其中一些核心組件，方法是查看 處理 <TextInput>。