跳至主要内容

React 基礎入門：State、Props、Hooks，讀懂 React Native 的根基

這是「接下來可以學什麼」系列的第一篇。學 React Native 之前，先把 React 的三個核心概念搞懂：Props、State、Hooks。這三個東西搞懂了，後面寫畫面會輕鬆很多。

一、為什麼一定要先懂這三個東西？​

React Native 的畫面，其實就是用 React 的方式在「描述畫面」。

你可以把一個 App 想成很多個小元件（Component）組合而成，例如「一顆按鈕」、「一張卡片」、「一個輸入框」。而：

  • Props 決定了「外面的人要怎麼跟這個元件溝通、傳東西給它」。
  • State 決定了「這個元件自己內部記住了什麼資料」。
  • Hooks 是讓你在元件裡面使用 State、處理畫面變化的「工具」。

搞懂這三個，你才能真正理解畫面為什麼會變化、資料是怎麼流動的。

二、Props：元件之間傳遞資料的方式​

Props 就是「外部傳進來的設定」，有點像是函式的參數。

想像一個「打招呼卡片」元件，你想讓它顯示不同人的名字，不會想為每個人各寫一個元件，而是讓「名字」變成一個可以傳進去的參數：

function Greeting(props) {
  return <Text>哈囉，{props.name}！</Text>;
}

// 使用的時候，傳不同的 name 進去
<Greeting name="小明" />
<Greeting name="小美" />

重點記住​

  • Props 是從外面傳進來的，元件自己不能直接修改它（唯讀）。
  • 同一個元件，傳不同的 Props 進去，畫面就會長得不一樣，這就是「重複使用元件」的精神。
  • 你可以把 Props 想成是「店員看到的訂單」：訂單內容（Props）是客人決定的，店員（元件）只能照著做，不能自己改訂單。

三、State：元件自己記住的資料​

如果 Props 是「別人傳給你的」，那 State 就是「元件自己心裡記住的東西」。

舉個例子：一個按鈕，每次點擊就讓畫面上的數字加一。這個「數字」就需要用 State 來記住，因為：

  • 它會隨著使用者操作而改變。
  • 改變之後，畫面要自動跟著更新。
import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>目前數字：{count}</Text>
      <Pressable onPress={() => setCount(count + 1)}>
        <Text>點我加一</Text>
      </Pressable>
    </View>
  );
}

拆解一下這行關鍵程式碼​

const [count, setCount] = useState(0);
  • useState(0)：建立一個 State，初始值是 0。
  • count：目前的數值，只能讀，不要直接用 count = count + 1 去改它。
  • setCount：專門用來更新這個數值的函式，呼叫它，React 才會知道「畫面要重新畫一次」。

重點記住​

  • State 改變 → 畫面自動重新渲染（更新畫面），這是 React 最強大的地方，你不用自己手動操作 DOM 或畫面元件。
  • 想要更新資料，一定要透過 setCount 這種「更新函式」，不能直接改變數值本身。

四、Hooks：讓元件擁有「能力」的工具​

Hooks 就是一些用 use 開頭的特殊函式，讓你的元件可以擁有額外能力，例如記住資料、在畫面出現時做某件事。

最常用的兩個：

1. useState：記住資料（上面已經介紹過）​

const [name, setName] = useState('');

2. useEffect：在「特定時機」執行某段程式碼​

最常見的用法，是在畫面剛出現的時候，去打 API 拿資料：

import { useState, useEffect } from 'react';
import { Text } from 'react-native';

function Profile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 這段程式碼會在畫面第一次出現時執行一次
    fetch('https://example.com/api/user')
      .then((response) => response.json())
      .then((data) => setUser(data));
  }, []); // 後面這個空陣列 [] 很重要，代表「只在第一次執行」

  if (!user) {
    return <Text>載入中...</Text>;
  }

  return <Text>歡迎，{user.name}</Text>;
}

useEffect 的小重點​

  • 第二個參數是一個陣列 []，叫做「依賴清單（dependencies）」。
    • 空陣列 []：只在元件第一次出現時執行一次（很適合拿來打 API）。
    • 放變數，例如 [count]：代表 count 改變的時候，這段程式碼就會再執行一次。
    • 完全不寫第二個參數：每次畫面重新渲染都會執行（這種情況比較少用，要小心）。

五、三個概念串起來看​

把上面三個概念放進同一個畫面，會更有感覺：

import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

// 子元件：用 Props 接收外部傳入的資料
function LikeButton(props) {
  return (
    <Pressable onPress={props.onPress}>
      <Text>❤️ 喜歡（{props.likeCount}）</Text>
    </Pressable>
  );
}

// 父元件：用 State 記住目前的喜歡數
export default function Post() {
  const [likeCount, setLikeCount] = useState(0);

  return (
    <View>
      <Text>這是一篇貼文內容。</Text>
      <LikeButton
        likeCount={likeCount}
        onPress={() => setLikeCount(likeCount + 1)}
      />
    </View>
  );
}

這裡發生的事情：

  1. Post 這個元件用 useState 記住「目前的喜歡數」（State）。
  2. Post 把目前的數字、以及「點擊後要做什麼」這兩件事，透過 Props 傳給 LikeButton。
  3. 使用者點擊按鈕 → 呼叫 setLikeCount → 數字更新 → 畫面自動跟著重畫。

這就是 React（也是 React Native）最核心的運作方式：資料變了，畫面就自動跟著變，不需要自己手動操作畫面。

六、新手常見的誤區​

  • ❌ 直接修改 State 變數：count = count + 1 ✅ 要透過更新函式：setCount(count + 1)

  • ❌ 以為 Props 可以在子元件裡被修改 ✅ Props 是唯讀的，子元件想改變資料，要透過父元件傳進來的函式（像上面例子的 onPress）

  • ❌ useEffect 忘記寫依賴陣列 []，結果程式碼一直重複執行，甚至造成無限迴圈 ✅ 養成習慣：先想清楚「這段程式碼應該在什麼時機點執行」，再決定依賴陣列要放什麼

七、小結：這三個概念，你應該記住的一句話​

  • Props：別人傳給我的東西，我只能用、不能改。
  • State：我自己記住的東西，我可以透過專屬函式改變它，改變後畫面會自動更新。
  • Hooks：讓元件擁有額外能力的工具，useState 用來記資料，useEffect 用來在特定時機執行程式碼。

把這篇的範例都自己動手敲一次、跑在手機上看看畫面變化，會比單純看文字理解得更快。下一篇，我們會接著介紹 Expo Router，學會怎麼用資料夾結構做出多頁面的導航。