在 Day 6，我們開始建立第一個 React 元件，並透過 props 將父層元件的資料傳遞給子層元件。隨後，我們學習了 useState，了解了如何在元件內部管理資料，並透過 Functional Updater 函式更新 state。

今天我們來整理 Props 和 State，並更深入了解它們在 React 中的應用。

什麼是 Props 與 State？

在 React 中，元件的資料來源可以分成兩類：

• Props（屬性）：由父層元件傳遞到子元件的資料。這是一種單向資料流，資料只能從父層傳遞到子層，子元件無法直接修改 props。因此，props 是穩定且不可變的資料來源，有助於元件之間的可預測性和可維護性。
• State（狀態）：由元件自己管理的資料狀態。state 可以隨著使用者的操作或時間變化，由元件內部進行修改。當 state 改變時，React 會重新渲染元件，呈現最新的資料狀態。

單向資料流 (One-Way Data Flow)

在 React 中，不論是 props 還是 state，都遵循單向資料流的原則，這使資料的變動來源清晰可見與易於理解。而 state 雖可以在元件內部被修改，React 建議使用 setState 函式來更新 state，確保每次修改都能正確觸發重新渲染。

Props 與 State 的比較

React 元件通常由以下幾部分組成：

1. Data：元件的資料來源，包括 props、state 或外部資料來源（如 API 回傳的資料）。
2. JSX：用來描述 UI 結構的模板語言，允許在 JavaScript 中直接撰寫 HTML 樣式的代碼。
3. JavaScript 邏輯：用於處理資料邏輯、事件處理與控制。這些邏輯會透過 state 和事件處理函式，影響 UI 呈現。

元件實例

以下是一個簡單的 React 元件，展示了如何使用 props 和 state 來管理元件的資料：

import React from 'react';

function MyComponent(props) {
  // Data: 使用 props 和 state
  const { title } = props;
  const [count, setCount] = React.useState(0);

  // JavaScript: 更新函式
  const incrementCount = () => {
    setCount(count + 1); // 更新 state
  };

  // JSX: 描述 UI 結構
  return (
    <div>
      <h1>{title}</h1>
      <p>Current Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default MyComponent;

在這個範例中：

• props 是從父元件傳入的資料，這裡使用了 title 來顯示標題。
• state 則透過 useState 管理 count 變數，並且當按下按鈕時，incrementCount 函式會更新 count 並重新渲染元件。

結論

透過 props 和 state 的整理，比較兩者的差異與用途所在。在往後的選擇考量上，就能用適合的方式去選用。這兩者都是單向資料流的方式，一個是從父層傳來的資料，一個則是元件本身的資料。

後記

本文將會同步更新到我的部落格

• 黃禎平 – Medium