iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

不用前端框架 手把手打造基礎SPA網站系列 第 4

[DAY04]淺談前端SPA框架-以React為例(下篇)

在了解什麼是render後,傑森從React官網看到另一個範例,有段文字這樣寫道:

Component 使你可以將 UI 拆分成獨立且可複用的程式碼

什麼是 Component

Component顧名思義是組件的意思,每個Compoment可以是獨立的、可拆分的、可重複利用的。若以車子做比喻,輪子可以成為Compoment,車門也可以是Component(不過需要注意的是,輪子之間沒有差異性但車門有)

來看看以下兩段程式碼:

//類別型元件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

//函式型元件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

傑森看到後心想:這不是class和function嗎?又是很熟悉的程式碼,難不成這個玩意兒也可以用來當成內容輸出?是的,在React的世界裡,Component分為類別型(Class)與函式型(Function),兩個基本上是一樣的,不過若要使用React 16.8 版本後的 hooks功能,就必須使用函式型元件。另外,props代表的是傳遞參數,除了內置預設參數,React可以透過在組件上指定自訂名稱的參數,傳遞到Component內層並使用,以下我們使用Function Component來做說明。

建立Component

我們來看看下面這段:

//建立Component
function Welcome(props) {
  return (
    <h1>
      Hello, My name is {props.name}. I am {props.age} years old.
    </h1>
  );
}

傑森這時看著教學,嘗試建立了一個名叫Welcome的函式型Component後,他在另外宣告一個element的變數,為了能夠動態地把花括號裡的值換成名字與年齡,在元件上設定參數用來做傳遞,結果如下:

//將props變數帶入Component
const element = <Welcome name="Jason" age="30" />;

看似都沒問題後,接著就是將內容輸出到畫面了。

用Componet渲染到畫面

來看看最後一段程式碼:

//渲染元件
ReactDOM.render(element, document.getElementById("root"));

回顧剛剛傑森宣告了element,賦予成為Component及用來傳遞參數,完成程式碼後,結果如同想像般呈現:

此時傑森心想,原來可以使用Javascript建立Component來呈現內容,透過拆分建立多個Component,也可以使之成為頁面的一部分。用MVC架構說明,Component是View的一部分,經由Controller判斷對應的View,再透過render就成為看到的畫面。除了能夠將Component做拆分,我們也可以把程式做拆分放入不同的Component,作為模組開發使用。在Javascript還沒有內建支援模組語法前,雖然可以使用CommonJS與AMD模組系統,但需要透過其他工具來轉換,直到es6後有了import/export後,Javascript也可以透過原生的方式來進行模組化開發,這也是現今Javascript為何在龐大的程式碼中可以做到有效地管理。

明天我們來聊聊Server side render與Client side render的原理與特性,也算是在實作之前的暖身,我們明天見!


上一篇
[DAY03]淺談前端SPA框架-以React為例(上篇)
下一篇
[DAY05]Server Side Render與Client Side Render
系列文
不用前端框架 手把手打造基礎SPA網站30

尚未有邦友留言

立即登入留言