React常見問答集整理


前言

整理幾個常問的問題與解答,參考資源均來自網路上,如有建議或誤解請再指正。

2016/3/21更新其中的一些說明,並加上Github庫的連結。

React是什麼?

React(有時被稱為React.js或ReactJS)是一套Javascript函式庫。由Facebook公司在2013年開放原始碼並首次發表,目前主導維護與發展,原始創作者是Jordan Walke。官方網站的主要說明如下:

一套用於建立使用者介面的函式庫

React在短短時間內就受到網站應用技術業界很大的矚目,在Github上超過3萬個星,是很熱門的專案,僅次於Angular、D3與jQuery。它目前所延伸出的生態圈與附屬元件、相關應用很多。

React應用於Facebook與Instagram的App與網站服務上,成了最佳的實例代表。許多大型的網站應用服務廠商如Netflix、Airbnb、Paypal、Amazon都已經開始應用它到網站或App上。

React並非一個完整的程式框架,它被定義為"V in MVC"。目前的0.14版本中,裡面的函式庫API數量也不多。。它的主要特色有以下幾個:

  • One-way data flow
  • Virtual DOM
  • JSX

有幾個看法可以理解為何它會這麼受到歡迎的原因:

  • 對網站式應用服務的開發,尤其是SPA(單頁式應用程式)中的DOM處理機制,提出了"重新思考"的想法
  • 以Javascript為中心的網站應用開發解決方案
  • 只專注於解決單方面的問題,可以搭配其他現有的框架或函式庫

React Native是什麼?

React Native是另一套由Facebook公司在2015年發表的開放原始碼函式庫與相關工具組,提供可以使用React架構在iOS與Android系統上,開發原生的(native) App。它在Github上的星也有接近3萬個,也是很熱門的新專案。

React Native提出的想法是"learn once, write anywhere.",這是由於不同的裝置、不同作業系統上的使用者體驗是不同的,無法使用百分百完全一樣的程式碼,只能儘可能多重覆利用同樣的程式碼。

React Native並非使用WebView,所以它和稱為Hybird app或Webapp是不同的,它有自己獨立的瀏覽器渲染(render)的底層,並致力於讓React架構在手機作業系統中的效能提升。

Facebook已經開始把部份的手機App改由React Native開發,在Showcase也列出了有其他的實例。

Flux是什麼?

Flux是Facebook在2014年提出的,用於搭配React一種程式架構風格,只是一種設計的模式或概念。它並不是一個完整的程式框架或函式庫。官方的介紹影片中有提及這個架構,原先是為了解決在Facebook上的訊息功能的問題,所建立出來的解決方案。Flux無法與常見的MVC模式比較,它原本就是要解決MVC模式在使用時產生的問題,此外它也並不是分離得很清楚的設計模式。

Flux雖然有相關的Github儲存庫,但在其中只有一個簡單實作的Depatcher API,另外包含了其他週邊輔助函式庫。主要內容在於解說整個流程如何運作,以及提供應用範例。其他使用者開始實作屬於他們的Flux函式庫,以及加強與改善原先的Flux結構與語法,其中較有名的如ReFlux、Alt.js、Redux等等。

Flux的核心概念是單向式的資料流(unidirectional data flow或one-way data flow)。用來解決在一個複雜的Web應用程式中的事件處理的資料流問題。Flux可以說是專門配合為React的特性所使用的。它的主要部份有三個,它們分別是:

  • Dispatcher
  • Stores
  • Views

Flux本身這個英文單字就是"流動、不穩定"的意思,它是拉丁文中的Flow的意思。

Redux是什麼?

Redux是由Dan Abramov所創造的一套開放原始碼函式庫。它的名稱是來自"Reducer"這個函式名稱,在實作時也需要建立許多Reducer函式。這是原創者對Redux的總結說明如下:

Redux 是給 JavaScript 應用程式使用的,可預測的狀態容器。

Redux基於Flux概念(架構)所啟發,並應用在Elm等其他的設計模式,改進Flux在實際使用上複雜部份。它在實作上有部份的規則是Flux中未提及或並沒有限制的。它的三個主要的規則如下:

  • Single source of truth (單一的真相來源)
  • State is read-only (狀態是唯讀的)
  • Changes are made with pure functions (使用純函式進行更改)

在Redux中state(狀態)與action(動作)之間只會使用reducer進行更動,所以有以下的運算式:

(previousState, action) => newState

state(狀態)會限制為immutable(無法變更的),也就是每個state(狀態)都是一個獨立的物件,每次的變更代表都是要複製一份舊state(狀態)物件,然後產生一個新state(狀態)物件。這樣的作法可以達成Time Traveling Debugger(時光旅行除錯器),每個動作都可以作Undo/Redo(復原/重作)。

Redux十分受到React工程師的歡迎,它應用了許多更先進的語法與架構。它生態圈發展得相當好,在網路上可以找到有很多學習資源、擴充應用。原創者也為它設計了專屬的開發工具Redux DevTools、錄製了入門的免費影片與寫了許多入門的教學文件。