元件（Component）

元件是 React 中最基本的概念，基本上，整個 React 應用程式都是由元件所組成，因此，可以說元件是 React 中使用者介面的 基礎構件塊。

每個元件都有屬於自己的 資料、邏輯和外觀，通過像樂高積木一樣組合這些元件，建立使用者介面。

讓我們使用函式建立一個 Counter 元件。

function Counter() {
  return (
    <div>
      <h2>計數器</h2>
      <p>當前計數：10</p>
    </div>
  );
}

撰寫函式元件有兩個重要的規則

1. 函式名稱需要以 英文大寫 做開頭。
2. 函式需要返回一個 JSX。

// 函式名稱需要以英文大寫做開頭
function Counter() {

  // 函式需要返回一個 JSX
  return (
    <div>
      <h2>計數器</h2>
      <p>當前計數：10</p>
    </div>
  )
}

元件實例（Component Instance）

1. 元件只是一個 JavaScript 函式。

function Counter() {
  ...
}

2. 當我們使用元件的時候，元件實例會被創造。

<Counter />

3. 可以將元件視為一張藍圖，而元件實例才是元件的 實體。

// 元件只是一個函式，可以將它視為一張藍圖
function Counter() {
  ...
}

// 透過這張藍圖，我們可以建立多個元件實例
<Counter />
<Counter />
<Counter />

1. 元件實例擁有自己的狀態（state）和屬性（props）。
2. 元件實例擁有自己的生命週期。

因此，為了方便理解，在 為什麼前端框架會存在？ 這個單元裡有提到每個元件都有屬於自己的狀態（state）和屬性（props），這種說法其實是不準確的，實際上擁有自己狀態和屬性的是元件實例。

結語

在這個單元，我們了解了 React 中的核心概念：元件（Component），它們構成了整個使用者介面。

我們釐清了元件和元件實例之間的關係，元件可以被視為一張藍圖，而元件實例則是這張藍圖的實體。

每個元件實例都有自己的狀態和屬性，並且具有自己的生命週期，這個概念是 React 應用程式開發的核心，它使我們能夠創建可重用的元件，並有效地管理應用程式的狀態和邏輯。