『Day 5』淺談 React Props

前言

在前面幾篇文章中，我們談到了 React 元件的核心特性，其中「單向資料流」是一個非常重要的概念。今天，讓我們來深入了解 React 是如何透過 Props 來實現這個特性的。

Props 是什麼？

在開發 React 應用程式時，我們常常需要讓元件之間能夠互相溝通。就像在生活中，人與人之間需要透過語言來傳遞訊息一樣，React 元件之間也需要一個傳遞資料的方式，而這個方式就是 Props。

Props（Properties 的縮寫）是 React 元件間傳遞資料的關鍵機制，它有幾個重要的特性：

唯讀性：一旦接收到 props，就不能修改它
單向流動：資料永遠是從父元件流向子元件
彈性傳遞：可以傳遞各種 JavaScript 值（包括物件、陣列、函式等）

有一個重要的觀念要記住：Props 在每次渲染時都是不可變的。如果我們需要對資料變化作出回應並更新畫面，應該由父元件傳遞新的 props，或是使用 state 來管理狀態。

Props 的使用方式

1. 基本使用方式

在父元件中，我們可以像設定 HTML 屬性一樣，將 props 傳遞給子元件：

// 定義資料
const CONCEPTS = [
  {
    title: 'Components',
    description: 'UI 構建的基本單位',
    image: './components.png'
  }
];

// 父元件
export default function ConceptList() {
  return (
    <Concept
      title={CONCEPTS[0].title}
      description={CONCEPTS[0].description}
      image={CONCEPTS[0].image}
    />
  );
}

2. 物件形式傳遞

如果有一組相關的資料，我們可以直接傳遞物件：

// 父元件
export default function ConceptList() {
  return <Concept concept={CONCEPTS[0]} />;
}

// 子元件
function Concept({ concept }) {
  const { title, description, image } = concept;

  return (
    <div>
      <img src={image} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

3. 使用展開運算符

當需要傳遞多個 props 時，可以使用展開運算符來簡化程式碼：

// 父元件
export default function ConceptList() {
  return <Concept {...CONCEPTS[0]} />;
}

// 子元件
function Concept({ title, description, image }) {
  return (
    <div>
      <img src={image} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

不過要注意的是，雖然展開運算符使用起來很方便，但過度使用可能會：

元件接收到不必要的 props
元件的 API 變得不夠明確
props 的來源和流向難以追蹤

4. 使用預設值

為了讓元件更有彈性，我們可以為 props 設定預設值：

function Concept({ title, description, image, isHighlighted = false }) {
  return (
    <div className={isHighlighted ? 'highlighted' : ''}>
      <img src={image} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

5. 使用 children prop

React 提供了一個特殊的 prop：children，特別適合用於建立容器型元件：

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function ConceptList() {
  return (
    <Card>
      <Concept
        title={CONCEPTS[0].title}
        description={CONCEPTS[0].description}
        image={CONCEPTS[0].image}
      />
    </Card>
  );
}

當使用 children prop 時，我們可以把它想像成是一個「插槽」，可以放入任何我們想要的內容。

這種方式的優點是：

父元件可以精確控制傳遞的內容
容器元件可以專注在提供通用的布局
整體結構更加靈活，容易擴展和修改

總結

在 React 的世界中，Props 扮演著溝通橋樑的重要角色。透過它，我們不僅能夠在元件間傳遞各種類型的資料，更能確保資料流向的單一性，讓程式的運作更加可預測。

當我們善用 Props 的特性時，比如它的多樣性、唯讀性和靈活性，再搭配像是 children prop 這樣的特殊用法，我們的程式碼就能變得更容易維護和閱讀。這不僅降低了資料出錯的風險，也讓效能優化變得更加容易掌握。