React 的模塊 Module 與組件 component

模塊與組件模塊化與組件化好繞舌

模塊與組件的關係

模塊 Module

理解：向外提供特定功能的 JS 應用，一般就是以.js的檔案為單位。
為什麼：因為 JS 程式碼會越多，會越來越複雜。
作用：可重複使用、簡化 JS 的編寫、提高 JS 的執行效率。

組件 Component

一個局部的介面功能模塊，介面所需元素的集合包含 HTML,CSS,JS,image。可用來做資料、變數與函式操作與儲存資料的操作。

理解：用來實現特定（局部）功能效果的程式碼集合(HTML, CSS)。
為什麼：一個介面的功能很複雜，所以最好能拆分成多個組件會較清楚。
作用：可重複使用、簡化 JS 的編寫、提高 JS 的執行效率。

模塊化 Modular

當應用程式的 JS 都是以模塊的方式書寫，這個程式就是一個模塊化的應用程式。

組件化 Componentization

當應用程式的 JS 都是以多個組件的方式編寫，這個應用程式就是一個組件化的應用程式。

物件導向的組件構成

基本的理解和使用

物件導向的物件 -> 物件導向的模塊 -> 物件導向的組件。

<MyComponent/>稱為組件標籤，組件名可任意，但第一個字母需大寫，且標籤需關閉<組件名/>。

新增組件的步驟：

定義組件有兩種方式：工廠模式組件(簡單組件)、ES6 類別組件(複雜組件)
渲染組件標籤

工廠模式組件(簡單組件：沒有狀態的組件)

工廠模式組件的效率會比類別組件好，但是只能在組件沒有「狀態」的情況下使用它，也就是說如果只是靜態顯示資料，就可考慮用工廠模式。

工廠模式的寫法很像一般函式的寫法，且一定要有回傳，而回傳內容通常就包含了 HTML 標籤。

重點：一定要有回傳return，只要組件有state狀態，就不能用工廠模式。

1 2	<div id="example1"></div> <div id="example2"></div>

function MyComponent() {
  return <h2>工廠模式組件(簡單組件) </h2>;
}
// 渲染組件標籤
ReactDOM.render(<MyComponent />, document.getElementById('example1'));

組件標籤的另一種寫法，如果需要內容物在組件標籤之間，就可用這種寫法。

1
2
3

<MyComponent>
  <h2>工廠模式組件(簡單組件) </h2>
</MyComponent>

ES6 類別組件(複雜組件)

ES6 類別組件寫法是以物件導向的類別方式來攥寫，包在裡面的會有建構式、綁定自定義函式、狀態和渲染或者是事件監聽。

// 2. ES6 類別組件(複雜組件)
class MyComponent2 extends React.Component {
  render() {
    console.log(this);
    return <h2>ES6 類別組件(複雜組件)</h2>;
  }
}
ReactDOM.render(<MyComponent2 />, document.getElementById('example2'));