iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

看初心者怎麼學React系列 第 5

Day5 宣告元件 - Functional Component

React的核心就是將UI拆成不同的程式碼,以元件的方式獨立,讓元件可以在主程式中重複利用。

而要使用這些元件前我們必須將元件宣告後輸出使用。

宣告方法有兩種方法:

1.Functional Component

2.Class Component

首先介紹Create React App建立的專案中,App.js中使用的元件宣告方式Functional Component。


Functional Component:

使用一般的function函式來宣告元件,可以接受props做參數,回傳建立React元件的DOM元素。

src/App.js

//引用需要的檔案
import logo from './logo.svg';
import './App.css';

//使用一般Function建立元件
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

//輸出元件
export default App;

Functional Component有以下特點:

  • 沒有自己的元件狀態(state)
  • 沒有元件週期(Lifecycle)
  • 不需要以this取值
  • 元件傳遞屬性(props)的方式透過function參數傳入

Functional component的程式碼和Class Component比較簡潔,適合使用在功能只有顯示畫面的簡單元件。
因為沒有狀態,只負責UI呈現,不用考慮資料狀態改變的過程,更利於元件程式碼的重複利用。

React 在 16.8 版本以後出現了 React Hook 來執行Functional Component的狀態及生命週期,讓Functional元件可以處理狀態些稍微複雜的元件。


上一篇
Day4 專案架構
下一篇
Day6 宣告元件 - Class Component
系列文
看初心者怎麼學React30

尚未有邦友留言

立即登入留言