今天主要學習 React 中的 Props、State，以及元件之間的資料傳遞。
前幾天開始把 App 拆成不同元件後，我就在想一個問題：元件拆開之後，它們之間到底要怎麼交換資料？
Props 到底是什麼？
我先問 AI：
Props 的全名是什麼？父元件有很多權限，而子元件是許多小功能的分類是嗎？
AI 告訴我，Props 是 Properties 的縮寫，可以把它想成元件的「輸入資料」。
例如父元件可以把目前月份傳給子元件：

這裡的 currentMonth 就是傳給 ExpenseList 的 Props。
所以可以先記成：
父元件 → Props → 子元件
Props 是唯讀的，子元件不能直接修改父元件傳進來的資料。
那子元件要怎麼改變父元件的資料？
這也是我一開始最容易搞混的地方。
我原本以為「既然這個功能是在子元件裡，那是不是全部都交給子元件處理？」
我才知道React 的資料流主要是單向的。
如果子元件需要改變父元件的 State，父元件可以把一個函數傳下去：

子元件再呼叫這個函數：

所以實際上不是子元件直接修改父元件的 State，而是：
父元件提供修改資料的方法 → 子元件觸發 → 父元件更新 State

State 要放在哪裡？
我也做了幾題觀念題和除錯題。
有一題問到 State 應該放在哪裡，我一直搞不清楚
後來它用一個簡單的方式讓我理解：
如果只有一個元件需要這個資料，就放在那個元件。
如果有多個元件都需要，就把 State 往上提升到它們共同的父元件。
例如 TotalCard 和 ExpenseList 都需要知道記帳資料，那這個 State 就應該放在共同的父元件 App.jsx。
這就是 State Hoisting。
總結：
今天我更加熟悉…

• Props：父元件傳資料給子元件
• Callback：子元件透過函數觸發父元件的更新
• State Hoisting：需要共享的 State 要放到共同父元件**