挑戰 React 第八篇

目錄

1. 什麼是組件?

2. 如何用組件達成程式碼重複使用?

3. 兩種組件種類

4. 學習心得

什麼是組件?

Component，中文翻譯為組件，我一開始在學推測它可能像是一個零件去組成一個完整的東西且可以被重複使用。

實際舉例一個網頁畫面，假設有Header / Footer / SideNav / Main Content這四大類(四個組件)，每一個組件都是 UI 所構成，如同下面示意圖：

整個畫面匡起來會由一個App最外層組件，透過 React Dom一層一層的傳遞下去，請看下面示意圖。

透過root節點創立一個React element叫做 App 的組件，而這個 App 組件由四個組件所構成。示意圖轉化成程式碼範例：

function App() {
  return (
    <div>
      <Header/>
      <SideNav/>
      <MainContent/>
      <Footer/>
    </div>
  );
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

如何用組件達成程式碼重複使用

我們已經知道每個組件都是一個 UI ，假設我現在想要重複利用已經有的 SideNav。本來只有左邊有，現在我右邊也想放置一個SideNav，怎麼做到？

下面為示意圖

示意圖轉化成程式碼範例：

function App() {
  return (
    <div>
      <Header/>
      <SideNav/>
      <MainContent/>     
      <SideNav/>
      <Footer/>
    </div>
  );
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

兩種組件種類

這邊先給大家看看大概的差異，下篇再詳細講兩者的差別。

• Function Component

• Class Component (Es6)

學習心得

直到看了官網還有其他技術文章介紹 Component，我才真正理解原來每一個組件都是一個 UI ，所以之後做一個新專案，可以先這樣的方式拆解每一個畫面，最後變成一個個組件。