Introduction

目前前端技術中,最新最潮的技術莫過於 React 了!
在 Facebook 提出的 「React + Flux」 架構之下,顛覆傳統 MVC 開發的模式,不但能快速降低大型網頁程式複雜度,更能有效提升頁面運行速度。此外,React 也持續地開啟了許多大大小小的進展,像是 React Native 等等。因此,身為一個前端新手,也得跟上這股熱潮!

React

React 是 Facebook 和 Instagram 開發的前端框架,被設計用來建構資料異動頻繁的大型應用程式。 React 的主要特色是 Virtual Dom 跟 Component,以下是官方所提出來三個主要的核心思想:

  • Simple: 簡單,學習曲線平滑
  • Declarative: 當資料發生異動時自動化協調畫面的更新。
  • Composable Components: 關注點分離的特性,可以建立重復使用的元件(View)。

Virtual Dom

Virtual Dom

傳統的方式對 dom 進行頻繁異動查詢與處理是很耗效能的行為,因此 React 設計了 Virtual Dom 這個中間層來降低 dom 操作的成本。

Component

React 的基本元素是 Component,可以想成是 MVC 模式中的 View。特別的是其具有關注點分離 (Separation of Concerns)、複用 (Reuse) 、組合 (Compose) 的特性,因此 Component 可以依照需求拆解成更小的 Component 重新組裝(Composition)。

Component 本身的狀態稱為 State,可以根據不同的狀態,切換不同的 UI。Component 也有設計一些 event 處理的機制,利用 Autobinding 及 Event Delegation 的特性提高整體的效能及易用性。

Flux

Facebook 提出了一個應用程式架構的設計來協助 React 能夠更加有系統的建置大型的應用程式。原本的 React 提出的 Component 是維護自身內部的 state 的方式以有效率的方法來刷新。而 Flux 是一種 event + data 的單向流動的模式,用來擴展 React component。

Flux

Reference

[1] react-howto
[2] React Flux 介紹與實作
[3] Flux 介紹教學
[4] React Demystified
[5] React 學習手冊
[6] Flux 架构入门教程


License


本著作由 Chang, Wei-Yaun (v123582) 製作,
創用CC 姓名標示-相同方式分享 3.0 Unported授權條款釋出。