REACT.JSWHAT DO YOU REALLY MEAN?ZeT 周昱安

2 Slides & Demo

▹ Slides

▸ https://goo.gl/5488ov

▹ Demo

▸ https://goo.gl/GjWZbu

3周昱安

● 國立彰化師範大學 資訊工程學系 四年級

● 努力畢業中，準備前往中央資工所軟工碩士班

● 前後端都寫，最近比較喜歡寫前端

● Laravel Taiwan 社群常客

● Production Project：

○ 彰師大國際處官方網站系統

○ SOKO Glove Configurator

○ Mr.Tanaka 田中先生鄉村民宿官網

● Github：github.com/tz5514

About me

REACT.JS ?4

VDOM?Component?

JSX?

One-way Dataflow?

1.從零開始認識REACT.JS

5

”6

React是一個 JavaScript 函式庫，

用來處理前端 UI 的產生與管理。

為何 REACT 要誕生

▹ 前端 UI 的開發變得越來越複雜

▹ 舊有的開發模式缺乏程式碼的可重用性與可預測性

7

”8

在傳統的前端開發，HTML 只扮演了「定義 UI 最初的基礎 DOM 結構」的角色。

所有在 JavaScript 中進行的 DOM 操作，

都是基於最初定義好的 DOM 再另外堆疊上去的變更，

這讓前端程式碼的執行結果變得難以預測與維護。

9

HTML ? DOM ?▹ HTML 是一種方便開發者撰寫的語言，只是純文字

▹ DOM 是瀏覽器渲染引擎中真正存在的物件節點

▹ 頁面初始化時，渲染引擎會依照 HTML 的內容產生出 DOM

10

11

12

▹ React 本身並不是一個完整的前端框架，只是一個函式庫

▹ React 本身只處理 View 的部份，也就是 HTML 的 DOM

▹ React 是一個中間媒介，連結了 UI 純粹的定義層面與 DOM的實際層面

▹ 基本上，React本身只做以下兩件工作；

▸ 讓你定義 UI 要長怎樣

▸ 幫你把這個 UI 印出來到使用者的瀏覽器畫面上

僅僅是 UI

”13

React 捨棄了傳統的 HTML 開發方式，

改成完全由 JavaScript 來代管 DOM 的產生與操作，

實現 100% 純粹的 Client-Side Rendering。

聲明式的定義前端 UI14

▹ 前端 UI 程式碼本身，應該要足以完整的自我表達其擁有的行為與可能的顯

示變化

▹ UI 渲染無法避免邏輯，將 UI 的定義直接在 JavaScript 中進行，有助於提高 UI

的自我表達能力

15 JSX▹ JSX 是 React 在使用的一種特殊 JavaScript 語法，看起來像是在 JavaScript

程式碼中直接寫 HTML

▹ 能幫助開發 React 應用，因可讀性高、很類似 HTML

▹ 重要的語法差異：class → className

▹ 瀏覽器看不懂，需要翻譯成原生的 JS 程式碼才能正常的在瀏覽器上執行

▹ 通常使用 Babel 來進行翻譯的工作

Component16

▹ 以 Component 的形式來表

達與拼裝 UI ，能夠讓前端

UI 程式碼有更好的可組合

性與可重用性

Component17

18

Virtual DOM開發者在思考處理 UI 變動的流程時，

「這個 UI 會應該會有什麼變化」與

「要用什麼手段來讓 UI 達到這個變化」

是兩回事。

”19

DOM is Slow.Really Fxxking Slow.

所以我們提供了 Virtual DOM 來當作預先的彩排場地

20 Virtual DOM▹ Virtual DOM 是一份純資料的 Tree 物件，對應到實際的 DOM

▹ Virtual DOM 為自定義 Component 提供了中介的虛擬層，讓開發者能描述 UI 樣

貌與邏輯

▹ 我們透過定義 Component 來表達「UI 什麼情況該如何呈現」。而「要用什麼手

段來達到這個畫面改變（如何操作 DOM）」 ，React 則會自動幫你做，而且絕大

多數情況下都比你自己來要做的更好

21

Always Redraw F5，就對了。

”22

When something go wrong.

23 Always Redraw

▹ Single Source of Truth

▸ UI 要長得如何，應當是取決於當時的 Model 資料以及 UI 狀態而決定

▹ 把畫面全部洗掉重新再畫，顯示結果通常一定是正確的

▹ 每次都重繪全部的實體 DOM 顯然是不可行，但是重繪 VDOM 則相對高效許多

24 Always Redraw

”25

當畫面需要改變時，根據最新的 UI 狀態重繪出新的 VDOM Tree

並與改變前的舊 VDOM Tree 進行全面式的比較與計算

其中新舊差異的地方，才真的會在實際的 DOM 上發生操作改變

Flux & One-way dataflow26

27 Props

▹ Component 外部（父 Component）傳遞給 Component 內部的靜態參數

▹ 抽象化出跟問題有關的參數，方便 Component 進行重用

▹ Props 傳遞到 Component 內部後，應是不可變更的固定值

▹ 當 Component 外部改變傳遞進來的 Props 時，Component 內部會自動發起重繪

28 Props

29 State

▹ Component 內部私有的動態狀態值

▹ 在內部使用 this.setState 方法進行修改

▹ 在內部調用修改後，Component 會自動發起畫面重繪

30 State

31Component Lifecycle

2.REACT.JS生態系與發展

32

REACT 的開源生態系

React 之所以發展到如此強大的狀態，跟其活躍而開放的週

邊生態系有密不可分的關聯

33

Redux34

▹ Single Store

▹ 簡化 Flux 流程

React Router35

▹ Front-End Routing，

幫助解決 SPA 的路

由問題

Isomorphic36

▹ Why

▸ React 是百分之百的 Client-Side Rendering

▸ Client-Side Rendering 有 SEO 問題

▸ 初次載入頁面時速度不理想

Isomorphic37

▹ How

▸ Isomorphic 是指前後端執行同一份程式碼來 Render View

▸ 後端必須使用 Node.js（才能夠運行 React）

▸ 使用 ReactDOMServer.renderToString 方法

▹ Example with Redux

▸ https://github.com/erikras/react-redux-universal-hot-example

React Native38

▹ React 利用 VDOM 實現了 UI 邏輯以

及 HTML DOM 之間中介的虛擬層

▹ Facebook 希望 React 能對應的實際

層不僅止於 Web，而實作出了對

應 Android & iOS 原生元件的實際

層，並進行部份的元件共用

▹ 大幅降低兩大行動平台之間的開

發成本

Why React is so awesome?39

▹ 組件化的設計

▹ 聲明式風格

▹ 單向資料流

▹ Isomorphic 讓 Server-Side Rendering 變成可能

▹ React Native 統一行動裝置平台開發

▹ 在普遍的情境下效能表現不錯

React 的罩門40

▹ React 本身學習門檻不高，但環境建置困難，且其生態系複雜，導致剛開始學

習時容易混亂無頭緒

▹ 不易於進行細微的 DOM 操作

▹ React 的效能瓶頸

▸ Tree 節點過多過深時，遍歷所有節點的效能成本很高

▸ 實作 shouldComponentUpdate 來減少不需要的遍歷

你應該如何學習 React41

▹ 必修

▸ React 本身

▸ NPM & Module System

▸ JS 打包工具：Webpack

▸ Routing：React Router

▸ Flux：Redux

▹ 選修

▸ ES6

▸ Isomorphic

▸ React Native

▸ Inline-style CSS

▸ Immutable.js

React 與 Angular 的比較42

React Angular 1.x

性質 Library Framework

Dataflow One-way dataflow Two-way binding

Template HTML in JS （JSX） JS in HTML

管理 Model 與 DOM 之間的對應

Virtual DOM Dirty Checking

Isomorphic Yes No

學習曲線 平滑 陡峭

3.建立 REACT.JS開發環境

43

44

React 的開發環境需求

▹ JSX

▹ ES6 to ES5

▹ HMR（Hot Module Replacement）

45

React 常見的開發環境方案

▹ In-Browser Compile（Babel 6 之後不支援）

▹ Online Playgrond

▹ Module Bundler（Webpack、Browserify、Gulp）

46

● Wepack 是一個前端模組的整合與打包工具

○ 同時支援 AMD、CommonJS、ES6 Module 等模組規範

○ 可以自由的配置打包出多個 output JS 檔案

○ 高效能的 Bundle 速度

○ 整合樣式表（CSS/SCSS/LESS 等）

○ 能夠處理圖片以及字型檔

○ 豐富的額外插件

Webpack

47 安裝 Webpack● npm install webpack -g

48 Demo Repo▹ https://goo.gl/GjWZbu

▹ npm install

▸ Run

⬩ npm run dev

⬩ npm run build

▸ Webpack

▸ Babel

▸ HMR

▸ React 15.0.1

▸ React-Router

▸ SASS

▸ Bootstrap

49

● Wepack 的設定檔，我們將運行的配置寫在這段程式碼中，然後 webpack 執

行時就會按照該配置來進行 bundle 的動作並產出靜態檔案。

● 可以自行命名，運行 Webpack 時指定設定檔名稱即可

● 通常會將開發用以及 production 用的設定分開寫

○ webpack.config.dev.js

○ webpack.config.prod.js

webpack.config.js

50

● 通常我們寫 React Project 都是 Single Page Application，因此只需要

把全部程式碼 Bundle 成一個個體就好

entry

51 output● path：Bundle 出的個體靜態檔案存放的位置

● publicPath：CSS 中引入 URL 時參考的路徑

● filename：Bundle 出的個體靜態檔案的名稱

52 resolve● root

○ require 時路徑省略

● extensions

○ require 時副檔名省略

53 module - loader

54 devtool● 產生 JavaScript檔案的 Source map，以便開發時 Debug

55 plugins

56 index.html

Thank you for listening !

57