iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

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

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

既然要自己寫SPA,我們先來談談前端框架,本文分成上下篇,這邊重點不在教會你使用,而是想告訴你框架做了些什麼,以下用React來當例子:

傑森是一名網頁設計師,除了會使用HTML/CSS,另外也會用Javascript/JQuery來做些互動式功能,因為單位都是接一頁式形象和後端開發為主網站的需求,傑森完成他的部分,檔案交給後端工程師任務就結束了,單純切版和套些前端外掛,似乎沒有什麼可以難倒他。某天需求單位想開發新產品,其中包含以下需求:

  • 單頁應用程式架構
  • 導入前端框架
  • 前後端分離開發

因為單位沒有接過這類的需求,主管想請傑森了解這方面的技術。雖然傑森之前有聽聞前端框架技術,但畢竟沒有實際接觸,對於要怎麼開始完全摸不著頭緒,因此硬著頭皮前往google,從其中一筆搜尋結果中找到React官網

認識render

先從一個最基本的範例開始(以下節錄官網範例)

JS:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

HTML:

<div id="root"></div>

傑森按照官網「一分鐘內加入 React」,並用了上述的程式碼,很順利的畫面出現了熟悉的「Hello, world!」

傑森這時心想,這玩意兒怎麼這麼新奇,沒有HTML也能變出內容?尋找一番後發現代碼似乎藏在JS裡,為了驗證自己想法的真實性,傑森打算先把Javascript去除,神奇的事情發生了,畫面變成了一片空白。

Imgur

雖然還不知道怎麼回事,此時充滿好奇的傑森把Javascript放原本的地方,並且將「Hello,world!」改成「Hello,Jason!」。

Imgur

神奇的是又再度發生了,內容竟然也跟著改變了!傑森竟然不用改HTML就可以得到一個新的內容,興奮的他彷彿發現了新世界。

我們複習一下剛剛發生了什麼事:

  1. 預設畫面空白
  2. 執行Javascript程式碼
  3. 首次畫面出現「Hello,world!」
  4. 改變Javascript程式碼
  5. 接著畫面變成「Hello,Jason!」

若用瀏覽器(以Chrome為例)的檢查程式碼功能,可以看到在改變程式的同時,該原始碼區域會有閃一下的現象,而內容也直接更新了,這個動作我們稱之為render,為了幫助記憶,傑森決定稱它為閃之render。

Imgur

用Javascript來render

到了這裡,傑森突然想通了,原來只要用Javascript就可以動態改變頁面的內容,不需像以前那樣建立多個HTML來做出不同的內容。是的,這就是前端框架如何僅僅用一頁HTML來動態地改變,相信了解Javascript的朋友們,一定對前述的語法似曾相識,如同Javascript用document.getElementById(#ID).innerHTML (JQuery則是$("#ID").html)。但需要注意的是,React並非直接操作DOM物件,而是利用了虛擬DOM,搭配獨特的JSX語法和ReactDOM.render這個函式來達成render的效果。

「原來這就是閃之render阿~」
傑森一邊點頭,一邊自言自語的說道。

下一篇將介紹Component組件,讓你知道框架是如何使用模組化開發來提昇效率,我們明天見!


上一篇
[DAY02]3分鐘帶你初步認識SPA
下一篇
[DAY04]淺談前端SPA框架-以React為例(下篇)
系列文
不用前端框架 手把手打造基礎SPA網站30

尚未有邦友留言

立即登入留言