Props 和 State

在 React 中，props 和 state 是非常重要的概念，它們兩者都是在 React 元件中存儲數據的方法，但他們有著不同的使用場景與特性。

Props

props 也就是 "屬性（Properties）" 非常類似於 HTML 中的屬性，是由父元件傳遞給子元件的值或函式。當一個元件需要從另一個元件取得數據時，可以將該數據以 props 的方式傳遞到子元件身上。這個另一個元件通常指的是父元件，但也可以是祖父元件、兄弟元件等等其它關聯元件。

function ParentComponent() {
  return <ChildComponent name="Tom" age={20} />;
}

function ChildComponent(props) {
  return (
    <div>
      <p>姓名：{props.name}</p>
      <p>年齡：{props.age}</p>
    </div>
  );
}

在上面的例子中，ParentComponent 將 name 和 age 傳遞給了 ChildComponent，因此 ChildComponent 能夠接收到這兩個 props，並且將其渲染在畫面上。

State

當一個元件需要根據某些事件或條件來改變自身的狀態時，就需要使用 state，這個狀態只能在元件本身內被改變，而不能再由外部更改。初始值可以在建立元件時設定，也可以在元件被建置完成後改變。

import { useState } from 'react';

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

  const handleButtonClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>目前計數：{count}</p>
      <button onClick={handleButtonClick}>+1</button>
    </div>
  );
}

在這個例子中，我們利用 useState 這個 Hooks 函式來宣告一個 count 狀態和一個可以更動這個狀態的函式 setCount，在點擊按鈕時呼叫 handleButtonClick 函式，將 count 加上 1，然後更新這個 state，讓 Counter 元件重新渲染，顯示最新的計數值。

簡單來說，props 是從外部傳入元件的相關屬性，而 state 是可在元件內部控制的狀態資料，目的是方便使用者操作介面以及與外部互動。