挑戰 React 第九篇

什麼是 Function Component?

上篇文章我們了解Component的概念就是UI的其中一個部分，也可以重複利用。
而以官方文檔解釋的話：

component 就像是 JavaScript 的 function，它接收任意的參數（稱之為「props」）並且回傳描述畫面的 React element[color=#7cb21e]

因此就上述已知的觀念，轉換成以下步驟理解 function Component

1. 首先要有 Javascript function
2. function 可選擇性的接收 props 物件
3. function 內容回傳一個 React element， 而 React Element 通常以 Jsx 的方式撰寫

步驟示意圖：

實作範例

目標

把下圖預設的 React 畫面換成 Hello Tom 文字

1. 在 src 資料夾新增一個 Hello Component

2. 在 Hello.js 檔案寫入以下程式碼

import React from 'react';

function Hello() {
  return <h1>Hello Tom</h1>
}

export default Hello;

亦或也可以寫成React主推ES6的寫法

import React from 'react';

const Hello = () => <h1>Hello Tom</h1>

export default Hello;

3. 在把 index.js 寫入 Hello Component

• import Hello
• 檔案裡的 App Component 換成 Hello Component
• 移除不需要的 import App

如下圖一樣

4. yarn start 成果

程式碼解析

1. 若不引入 import React From 'react';會發生什麼事?

若註解掉import React，則在 compile 的時候會認不得Jsx 語法糖

2. export default Hello

預設匯出 Hello 組件，因此在 Index.js 引入的時候輸入任何名字都可以解析

若改成匯出時沒有寫 default會發生什麼事？

學習心得

老實說我是看了官方網站才知道有function Component，當自己實作了一遍才更理解 Component 所代表的意義，甚至也深入了解export default Component，此篇自己學到了很多。