---
tags: React.js
---

# React Component

## 元件說明

以前撰寫網頁，都是 HTML/CSS/JS 各一支完成
元件則是把每個區塊獨立出自己的 HTML/CSS/JS
這樣的做法，未來可移動性較高
比如未來想使用類似的卡片元件 就可以將整個元件的 HTML/CSS/JS 複製到其他專案中使用
確保可以消除重複的程式碼提升復用性

## useEffect 用法

一、計數器：

useEffect 可以多個，與 useState 不同的是，useEffect 在東西載入時預設就會執行一次

用法： `useEffect(Fn, Array)`

適用於 API 預設初次就要載入資料時使用

如果是初次要載入，但只要載入初次那一次就好，第二個陣列參數就放入空陣列

> 可理解為 Vue 裏面的 watch

二、載入 API 資料：

用 useEffect ＋ useState

useState 預設資料為空

useEffect 參數一的函數用來抓取資料並賦予給 useState 的參數一資料

且抓取資料只需執行一次 所以 useEffect 第二個陣列參數就放入空陣列

## 子傳父的案例

一、相乘產生器

APP 是父元件

TextInput 是子元件

父層使用 useState 建立 value、setValue 的 hook

子層通過 props 傳入 value、setValue，即可使用父層的 useState 方法更新值

二、何時該拆成父子，何時用單層？

**元件是用來消除重複的**

當頁面只有獨立內容 沒任何重複內容時 不需要硬拆元件

但當你有多個類似東西 裡面有重複的內容時 就適合拿來建立元件