初探React-Native

初探React-Native

App開發模式

  • 原生開發javascript

    用純代碼編寫,開發成本高,更新麻煩,優勢是速度快,性能高,用戶體驗效果好css

  • webApphtml

    H5開發是Html5開發的app,本質上運行在手機瀏覽器中的頁面,通常使用原生代碼調用webview組件運行H5的頁面vue

  • Hybrid App(混合開發)java

    結合原生用戶體驗效果好和webAPP的可擴展性強的優點react

常見的Hybrid開發模式

  • weex weex 是阿里巴巴基於vue開源的一個動態化的高擴展跨平臺解決方案,支持iOS、安卓、YunOS及Web等多端開發部署。其主要思想就是:

Write once, run anywhereweb

  • react-native

    由Facebook推出,基於JavaScript框架和React庫來提升多平臺開發效率的一門語言。其核心思想是: Learn once, write anywhere算法

weex與react-native對比

  • 相同點
    1. 能夠實現hot reload,邊更新代碼邊查看效果
    2. 佈局都是基於flexbox
    3. 都採用Web的開發模式,使用JS開發
    4. 都是支持iOS和Android
    5. 渲染機制都是Virtual DOM
  • 不一樣點
    1. react-native是基於react框架,而weex是基於vue框架
    2. react-native是基於jsCore引擎,而weex是基於V8引擎
    3. 異步操做:react-native提供Promise的支持,而weex提供的是callback的支持
    4. 社區方便react-native目前很是活躍,而weex相對弱一些,還處於成長期

總結: 二者最大的區別在於思想層面,以及react.js及vue.js兩個基礎框架的區別react-native


理解JSX語法

傳統的web開發方式

  • 用 HTML 建立 DOM,構建整個網頁的佈局、結構
  • 用 CSS 控制 DOM 的樣式,好比字體、字號、顏色、居中等
  • 用 JavaScript 接受用戶事件,動態的操控 DOM 在這三者的配合下,幾乎全部頁面上的功能都能實現。但也有比較不爽地方,好比我想動態修改一個按鈕的文字,我須要這樣寫:
<input type="button" id="button" value="龍哥很帥" class="fontSize"  />

而後用CSS控制DOM樣式以下:瀏覽器

<style>
.fontSize {font-size:50px}
</style>

而後在js中操做DOM結構:

<script>
$('#button').on('click',function(){

})
</script>

能夠看到,在 HTML 和 JavaScript 代碼中,id 和 onclick 事件觸發的函數必須徹底對應,不然就沒法正確的響應事件。

React的JSX開發方式

隨着 FaceBook 推出了 React 框架,這個問題獲得了大幅度改善。咱們能夠把一組相關的 HTML 標籤,也就是 app 內的 UI 控件,封裝進一個組件(Component)中

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput"  />
        <input type="button" value="Focus the text input"  />
      </div>
    );
  }
});

像上面這種js代碼裏包含着html和css的代碼的語法收作JSX,它是一種 JavaScript 語法拓展。JSX 容許咱們寫 HTML 標籤或 React 標籤,它們終將被轉換成原生的 JavaScript 並建立 DOM。

理解 React

  • React 是一套能夠用簡潔的語法高效繪製 DOM 的框架。在react的世界裏,咱們能夠暫時放下html和css,只需專心於javascript如何構建頁面。這裏就必需要提一下Virtual DOM
  • Virtual DOM 是一個存在於內存中的 JavaScript 對象,它與 DOM 是一一對應的關係,也就是說只要有 Virtual DOM,咱們就能渲染出 DOM。當界面發生變化時,得益於高效的 DOM Diff 算法,咱們可以知道 Virtual DOM 的變化,從而高效的改動 DOM,避免了從新繪製 DOM

相關文章
相關標籤/搜索