第三章 實作方法
3.3 重構既有網頁 (React 版本元件)
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.3
重構既有網頁 (React 版本元件)
3.3.1 JSAV 元件
將 JSAV Binary Search 實作成 React 元件，首先載入 JSAV 函式庫，如圖3.24。在 App 應用程式中設計一個客製化元素 BinarySearch 並透過屬性綁定傳入陣列大小，如 圖3.25。在子元件 BinarySearch 寫入 JSAV 官方提供的樣板，並將 BinarySearch 演算法 和 JSAV 視覺化控制的程式碼填入 componentDidMount() 方法中，如圖3.26。component-DidMount 是 React 生命週期的一個方法，在畫面渲染完成之後執行。這樣就可以得到 一個使用 JSAV 函式庫實作 Binary Search 的 React 客製化元件。
圖 3.24: 引入相關函式庫
圖 3.25: App 元件使用 BinarySearch 元件
圖 3.26: Binary Search 客製化元件
DOI:10.6814/NCCU201900017
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.3.2 Footer 元件
有 Angular 版本的 Footer 元件後，我們嘗試將之作成 React 框架下的網頁元件。在 template 部分差異不是太大，大多都能夠直接使用，但是需要做一些語法差異的修改，
如在 Angular 上元素的 class 屬性在 React 必須使用 className 來代替。傳遞參數的寫法 差異也滿大的。程式碼如圖3.27。
圖 3.27: Footer 元件程式碼
3.3.3 Slide Show 元件
由 W3Schools How To[30] 中的 Slideshow 為範例，將之轉換為 React 元件。在範例 中都是使用 HTML、CSS 與 JavaScript 所製作完成，而在 React 則是使用 JSX 語法，需 要做一些語法上的轉換。除了上面的 class 需要改為 className 外，在 inline style 的寫 法上也有很大的差異，例如在 HTML 中寫 style=”width:100%”，在 React 中必須要寫成 style={{width: ’100%’}}。在 HTML 的點擊事件如 onclick=”currentSlide(1)” 在 React 需 寫為 onClick={(e) => this.currentSlide(1)}。圖3.28為如何使用 Slide Show 元件的程式碼。
圖 3.28: Slide Show 元件使用
3.3.4 JSON 表格元件
有 Angular 的例子後，嘗試將 Angular 的 JSON 表格元件轉換至 React 版本的元件。
在使用上如同 Angular 元件一樣使用參數方式傳入資料來源，可以是本地端或是網路上 的 JSON 檔案，如圖3.29所示。
圖 3.29: JSON 表格元件使用方式
做 AJAX 拿取 JSON 資料時，在 Angular 中會比較強調 service 的概念，也就是說所
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
有可以重複使用的方法都會另外寫到一個 service 的檔案中，在 React 好像就沒有那麼 強調這個概念，但也可以使用這樣的想法來實作。另外除了先前遇到的語法上的差異，
如元素中的 class 屬性在 React 是使用 className 做代替。CSS 屬性在 React 中不使用”-”
符號做連接，而是使用 Camel-Case 命名法，如元素內使用 margin-left 時，在 React 是 使用 marginLeft 做代替。其他還有遇上時間週期的名稱差異等等問題，在自動化方面的 實現都必須要加以克服。
3.3.5 透過地圖輸入方式呈現郵遞區號
與 上 面 例 子 相 同， 有 了 Angular 元 件 後 要 轉 換 為 React 元 件。 在 Template 上 在 的寫法上幾乎相同，除了一些元素內的屬性寫法有些微不同，例如 class 屬性要改 為 className，還有 style 屬性的寫法差異等等，其他幾乎是可以直接由 Angular 移 植到 React 上。在 Angular Component 中有 template 或是 templateUrl 用來放置呈現的 HTML 畫面，而在 React 中則是放在 render() 這個函式中。另外如果要將 Angular 上的 JavaScript 移動到 React 上，首先要遇到的就是元件的生命週期，大致可以分為渲染畫 面做為分割點，分為渲染之前和渲染之後，渲染之前在 Angular 可以放在 ngOnInit() 中，
React 可以放在 componentWillMount() 中，都是在渲染畫面之前會執行完畢的週期。而 渲染之後 Angular 放在 ngAfterViewInit() 中，React 則是放在 componentDidMount() 中，
都是畫面渲染完畢才會執行的時間週期。程式碼如圖3.30。
圖 3.30: 郵遞區號元件程式碼
DOI:10.6814/NCCU201900017
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3.3.6 台灣行政區資料元件
在將這個元件由 Angular 轉換至 React 時必須要面對幾個問提，第一是傳遞參數的 語法差異，在 Angular 是使用 [info]=”[’/assets/populations.json’, ’ 人口數’]”，而在 React 寫起來像是 info={[’/assets/populations.json’, ’ 人口數’]}。第二是和之前也有遇到過相同 的問題，不同的 JavaScript Framework 元件會有不同生命週期的寫法，需要針對不同 的 JavaScript Framework 做改變。最後則是在第三方函式庫的載入方式差異，同樣的在 Angular 和 React 中的 index.html 檔案中載入函式庫，在 Angular 中的元件要使用 declare var thirdPatry: any; 這樣的語法來宣告函式中定義的物件，才能夠做使用。而在 React 中 其中一個做法是透過 window.thridParty 存取第三方函式庫，否則會出現 undefined 的錯 誤。