iT邦幫忙

2021 iThome 鐵人賽

DAY 6
2
Modern Web

React.js 30 天學習全記錄系列 第 6

[ Day 06 ] Function Component

https://ithelp.ithome.com.tw/upload/images/20210907/20134153H9pHSu20NM.png
今天要跟大家介紹的是 React Component 中的 Function Component 。
我們曾經在 Day 02 的時候提及到 React.js 是採用元件式開發為基礎(現在的框架和函式庫多採用類似元件的概念於其中),所以可以發現 Component 是一個非常頻繁使用到的概念和設計。
那就一起來看看這個 Function Component 的概念是什麼吧!


元件 Component

要介紹 Function Component 之前,我們先來了解一下 React 的 Component 究竟是什麼?

元件 Component 能夠將 UI 拆分成獨立而且可以重複利用的程式碼。

透過上面的說明可以了解 Component 的存在是為了將重複出現的功能和邏輯能夠獨立出來,方便我們在製作專案時可以使用該元件在任何的地方,而不需要再重新撰寫一次類似功能的程式碼。像以一般網站開發來說,相同的按鈕或是選單 Navbar 等都可能會應用在不同的頁面裡面。
這樣大家應該能夠明白為什麼 React.js 會使用元件式的開發來當作整個函式庫的核心基礎,因為拆分成元件之後不僅能夠減少重複撰寫的狀況,在功能以及 UI 的更新上也會更加的方便和容易。

知道元件的概念之後,就一起來了解 React.js 中的 Function Component 吧!


Function Component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Function Component 最簡單的範例就是直接撰寫一個 JavaScript 的函式,並且在該函式中帶入 props 的參數之後回傳一個 JSX 撰寫的 React.element 。
所以之所以稱之為 Function Component 的原因,其實就是因為它本身就是一個 JavaScript Function 了。

實際應用 Function Component

寫出一個 Function Component 之後,我們應該要如何將它應用在 React DOM 上使其渲染出畫面呢?

// 自行定義的 Function Component <App>
function App() {
  return (
    <div className="App">
      <img src={logo} className="App-logo" alt="logo" />
      <p>This is my first React App!</p>
    </div>
  );
}

上方的程式碼是我們自行定義的 Function Component <App>,現在要將該元件加入到 ReactDOM.render() 的函式中進行渲染。

import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

透過上面的程式碼我們可以發現,要使用Function Component <App> 時,一定要先行使用 import 匯入該元件,最後才能在 ReactDOM.render() 中使用。這樣畫面就有顯示出 Function Component <App> 中的內容了!

特別注意

在撰寫元件時請特別注意,Component 的第一個字母一定要大寫,並且該 Component 的名稱也必須和該函式 Function 同名
如果名稱不一樣的話,就會在 ReactDOM.render() 中產生出引用錯誤的問題發生。這點在撰寫元件的時候一定要特別小心啊!(第一次寫 React.js 就踩到的雷(༎ຶ⌑༎ຶ) )


關於 Function Component 的介紹就到這邊告一段落,明天我們將繼續介紹另一個 React 的 Component : Class Component
如果有任何問題都非常非常歡迎提出和指教唷~
那我們下篇見ʘ‿ʘ


上一篇
[ Day 05 ] JSX 語法
下一篇
[ Day 07 ] Class Component
系列文
React.js 30 天學習全記錄30

尚未有邦友留言

立即登入留言