tags: React

date: 2021/7/26

⚛️ React - 函數式組件

• ⚛️ React - 函數式組件
  • React 起手式
  • 創建函數式組件
  • 執行組件後 React 做了什麼?
  • 函數式組件 3 大重點須知
    • 參考資料

React 起手式

1. 老規矩，先建立一個 HTML，並搭建好環境

   還不知道起手式請點我

   ​​​​<div id="container"></div>
   
   ​​​​<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
   ​​​​<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></s
   ​​​​<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
   ​​​​<script type="text/babel">
   
   ​​​​</script>
   

創建函數式組件

1. 在 script 中，創建函數式組件

   ​​​​// 1. 創建函數式組件，定義組件首字母要大寫
   ​​​​function Demo(){
   ​​​​    // 此處 this 是 undefined，因為 Babel 編譯後開啟嚴格模式
   ​​​​    console.log( this )
   ​​​​    // 必須要有 return 返回值
   ​​​​    return <h2>我是函數式組件</h2>
   ​​​​}
   ​​​​// 2.讓 React 自動渲染組件到頁面，需注意組件首字母大寫且閉合
   ​​​​ReactDOM.render( <Demo/>, document.getElementById( 'container' ) )
   ​​​​
   

2. 畫面呈現
   

3. 打開開發人員工具的 Components 頁面可以看到組件、屬性與版本
   

執行組件後 React 做了什麼?

1. React 解析組件標籤，找到了 Demo 組件。
2. 發現組件是使用函數定義的，隨後調用該函數，將返回的虛擬 DOM 轉為真實 DOM，隨後呈現在頁面中。

函數式組件 3 大重點須知

1. 組件首字母必須大寫
2. 必須要 return 返回值
3. 讓 ReactDOM 渲染必須使用閉合標籤

參考資料

• React 全家桶
• React 官網 - Components & Props