小談React、React Native、React Web

React有三個東西,React JS 前端Web框架,React Native 移動終端Hybrid框架,React Web是一個源碼轉換工具(React Native 轉 Web,並之所以特別提出,是覺得還有些用處)。 

React、React Native共同特點

起源

Facebook 的內部項目

理念

Learn once, write anywhere,而不是Write once, run anywhere。簡單說就是,讓你在Web、Mobile原生的開發套路一樣,但你還是需要寫兩套代碼。Web Components的理解與實現。

開發工具

普通文本編輯器、Notepad++等即可

代碼寫法

支持ES6,組件化,看起來像NodeJS,所有代碼是寫在js裏的,無論是樣式還是模板。

組件化

易複用:組件的複用變得非常容易,它們都是獨立的。

利解耦:使得組件的實現關注分離,利於解耦,更容易被理解和維護。

規範性:利用到ES6的模塊加載和導出,使得代碼簡單就能按規範的寫。也因爲規範實現,使得Github上有的,就可以拿來用。

可組合:一個組件易於和其它組件一起使用,或者嵌套在另一個組件內部。如果一個組件內部創建了另一個組件,那麼說父組件擁有(own)它創建的子組件,通過這個特性,一個複雜的UI可以拆分成多個簡單的UI組件。

React

框架目的

基於組件化的開發,所以最終你的頁面應該是由若干個小組件組成的大組件。

瀏覽器兼容

IE8+

運行方式

一般需要先一層編譯,或者解析

PS:React JS我並沒有用過,不過寫法是React Native一樣。

React Native

框架目的

用js開發出效果接近原生的Android、iOS應用。原因UI組件是原生實現原因,效果是相近原生的。(做得像原生,那就得用原生做)

PS:目前Saas Link裏面的應用的效果在Android機器還是不大好

開發環境

iOS、Android按照官方文檔搭建,大概1個小時。

開發調試

1. 能夠在Chrome調試js,debug

2. 由於組件由原生渲染,不能調試View

代碼風格

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。

組件生命週期

http://www.tuicool.com/articles/nu6zInB

提供植入原生應用

它很容易嵌入到一個並非由React Native開發的應用當中。作爲應用的一部分。

React js的代碼能不能直接轉React Native?
ReactJs和React Native的原理是相同的,都是由js實現的虛擬dom來驅動界面view層渲染。

只不過ReactJs是驅動html dom渲染; React Native是驅動android/ios原生組件渲染。

真不能轉~

真不能Write once, run anywhere?
淘寶前端團隊(FED)把 React Native 的組件做了一個 Web 端的實現,並提供相關打包工具,讓你可以直接打包出一份可以跑在 Web 端的代碼。——React-Web

PS:http://www.jianshu.com/p/b5a91a503e6e

PS:我在本地嘗試過,沒跑起來,不過據說是可以的。

不過即便是能夠轉換,需要面對幾個問題:

1. 這個轉換的工具能否及時跟上React Native發展。

PS:要是這個團隊不維護了或更新不及時(目前已經存在這種問題),這種依賴挺麻煩。

2. 存在轉換不了的React Native原生功能,這部分還需要做兼容。

3. 沒有完善的社區論壇,有問題解決不了。(目前只是在Github)

 

本文爲原創文章,轉載請保留原出處,方便溯源,如有錯誤地方,謝謝指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5679734.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章