【React】歸納篇（三）模組與元件以及模組化與元件化-概念與基本使用
阿新 • • 發佈：2019-01-30
慨念
- 模組：向外提供特定功能的JS檔案，便於複用JS，簡化JS，提升JS效率
資料、對資料的操作（函式）、將想暴露的私有的函式向外暴露（暴露的資料型別是物件）
模組化：形容專案編碼方式，即按模組編寫與組織的專案。
元件：用來實現特定佈局功能效果的程式碼與資源集合，包含html、css、js、圖片資源等，例如一個頁面中頭部區域的資源集合
- 元件化：形容專案的編碼方式，即按元件方式編寫實現的專案。
元件的基本定義與使用
React是一種面向元件程式設計的框架（面向物件->面向模組->面向元件）
- 基本使用
元件標籤：以大寫字母開頭，如
使用元件的不變步驟：
1、定義元件
方式1：工廠函式元件（一種簡單元件：沒有狀態的元件）
function MyComponent() {
return <h2>return 出來的必須是一個虛擬DOM</h2>
}方式2：ES6類元件（一種複雜元件：有狀態的元件）
class MyComponent2 extends React.Component {
render () {
return <h2>使用ES6類元件方式</h2>
}
}2、渲染元件標籤
ReactDOM.render(<MyComponent />,document.getElementById('test' 完整程式碼（請結合程式碼註釋檢視）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title 效果如圖：
