小白看React Native

歡迎你們前往雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

做者: MelonTeam

1.What is React Native

衆所周知，產品的需求老是想快速的迭代。可是因爲應用分發市場的審覈機制（主要是iOS審覈），使一些快速迭代的需求只能選擇web做爲應用場景。雖然web應用已是一個很成熟的業務，H5的助力也使web應用快速佔據移動市場。可是web應用有web應用的瓶頸，在一些交互、性能方面仍是沒法媲美原生應用。這個時候，React Native的出現，也許給咱們帶來了一點點新的思路。React Native從出生就帶有着，跨平臺，快速迭代，節省安裝包等標籤。在React Native以前，也有不少技術意圖跨平臺，可是真正作到徹底跨平臺的技術，準確來講應該是沒有的。也許React Native提出的‘Learn once, write anywhere’可行。本次，就以一個小白的視角，來管中窺豹一下React Native。

2.工欲善其事，必現利其器

工欲善其事，必現利其器是自古以來不變的道理。在咱們平時開發的時候，一款好的IDE會使咱們的開發效率成倍提高。而好的IDE也會助力於好的語言的將來發展。就像oc或者swift，就伴隨着xcode；c++或者c#，你們確定想到visual stutio。

雖說，開發React Native的IDE有不少。著名的有Nuclide，Sublime，WebStrom。可是，我的比較偏心於WebStrom，這款號稱最聰明的javascript IDE。

3.JSX

//使用JSX
React.render(
    <div>
        <div>
            <div>demodiv>
        div>
    div>,
    document.getElementById('demo')
);

//不使用JSX
React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'demo')
        )
    ),
    document.getElementById('demo')
);複製代碼

JSX語法，像是在Javascript代碼裏直接寫XML的語法，實質上這只是一個語法糖，每個XML標籤都會被JSX轉換工具轉換成純Javascript代碼，React 官方推薦使用JSX， 固然你想直接使用純Javascript代碼寫也是能夠的，只是使用JSX，組件的結構和組件之間的關係看上去更加清晰。

4.ES6

咱們在看React Native的同時，首先得了解React Native使用的語言。ES6做爲javascript語言下一代標準，咱們稍微瞭解一下幾個關鍵的ES6的語法，會更好的理解React Native。

let，const

let和var同樣均可以聲明變量。只是不一樣都是，let爲javascript新增了做用域的概念，用他聲明的變量，只在命令所在的代碼塊內有效。 const也能夠用了聲明變量，可是聲明的是常量。一旦聲明，就不能改變其中的值。

class，extends，super

class Dog{

  constructor(){
      this.type = 'Dog';
  }

  eat(){
      console.log(this.type + " eat");
  }
}

let Dog = new Dog();
Dog.eat();//Dog eat

class BigDog extends Dog{

    constructor(){
        super();
        this.type = 'BigDog';
    }
}

let BigDog = new BigDog();
BigDog.eat();//BigDog eat複製代碼

arrow function

更簡潔的函數書寫

function(x, y) {
      x++;
      y‐‐;
      return x + y;
} //舊寫法

(x, y) => {x++; y‐‐; return x+y} //新寫法複製代碼

default，rest

default很簡單，意思就是默認值。你們能夠看下面的例子，調用 say() 方法時忘了傳參 數，傳統的作法就是加上這一句 type = type || ‘1’ 來指定默認值。 若是用ES6咱們而已直接這麼寫：

function say(type = '1'){
      console.log(type)
}
say()//''1''複製代碼

最後一個rest語法也很簡單，直接看例子：

function say(...types){
    console.log(types)
}
say('1', '2, '3') //["1", "2", "3"]複製代碼

import export

有了這兩個關鍵字。咱們就能夠像iOS同樣，把不一樣的js當成不一樣的模塊，須要暴漏出來的export出來。須要引用的import進來。

5.佈局

像素密度

React Native 提供的是像素無關的長度單位

Flex in React Native

Flex佈局相似於web中的Flex佈局，只不過，在React Native中的Flex佈局取了web中的Flex佈局的子集。

絕對佈局和相對佈局

React Native中的絕對佈局和相對佈局，就有點像咱們傳統終端開發中的佈局方式，區別是一個是相對路徑，一個是絕對路徑。

6.pros&state

state state是React中組件的一個對象.React把用戶界面當作是狀態機,想象它有不一樣的狀態而後渲染這些狀態,能夠輕鬆讓用戶界面與數據保持一致. React中,更新組件的state,會致使從新渲染用戶界面(不要操做DOM).簡單來講,就是用戶界面會隨着state變化而變化.

props 組件中的props是一種父級向子級傳遞數據的方式.

7.Virtual Dom

DOM操做很慢是兩個緣由，一個是由於須要操做具體的native控件，這自己操做就不快，第二是咱們處理dom的方式很慢，Virtual Dom解決了咱們對Dom的低劣操做，它的想法是，它想讓咱們不須要直接進行Dom操做，而是將但願展示的最終結果告訴React，React經過js構造一個新的數據結構即Virtual dom進行render，這個Virtual dom 僅僅存在於數據結構中，並無實際渲染出Dom。當你試圖改變顯示內容時，新生成的Virtual Dom會與如今的Virtual dom對比，經過diff算法找到區別，這些操做都是在快速的js中完成的，最後對實際Dom進行最小的Dom操做來完成效果，這就是Virtual Dom的概念。總結的來講，就是經過引入新的數據結構，計算出最小移動Dom的方法，再去真實操做Dom，這樣的成本是最低的。

8.DIFF算法

傳統 diff 算法

計算一棵樹形結構轉換成另外一棵樹形結構的最少操做，這是一個複雜且值得研究的問題。傳統 diff 算法經過循環遞歸對節點進行依次對比，效率低下，算法複雜度達到 O(n3)，其中 n 是樹中節點的總數。

React diff

傳統 diff 算法的複雜度爲 O(n3)，顯然這是沒法知足性能要求的。React 經過制定大膽的策略，將 O(n3) 複雜度的問題轉換成 O(n) 複雜度的問題。 1.UI 中 DOM 節點跨層級的移動操做特別少，能夠忽略不計。 2擁有相同類的兩個組件將會生成類似的樹形結構，擁有不一樣類的兩個組件將會生成不一樣的樹形結構。 3.對於同一層級的一組子節點，它們能夠經過惟一 id 進行區分。 基於以上三個前提策略，React 分別對 tree diff、component diff 以及 element diff 進行算法優化，事實也證實這三個前提策略是合理且準確的，它保證了總體界面構建的性能。而這種算法的優化，也使算法複雜度，趨緊於O(n) 。大大提高了性能。

9.React Native生命週期

React Native的生命週期和咱們終端開發中所接觸的生命週期不太同樣。React Native的構成是組件化，因此，生命週期也就圍繞着組建的建立，組建的更新，組建的消亡展開的。 組件生命週期大體分爲三個階段： 第一階段：組建的建立，這是組件第一次繪製階段，這裏會進入組建的初始化函數。 第二階段：在是組件在運行和交互階段，這個階段組件能夠處理用戶交互，或者接收事件更新界面； 第三階段：是組件卸載消亡的階段，組建會作一些銷燬函數。 (此模塊圖片來源於互聯網)

10.React Native自定義控件

React Native對插件的支持很是解耦合。好比，咱們想添加一個Video的插件，咱們就能夠 直接輸入 npm install react- native-video —save,而後再輸入 react-native link,就自動向native模塊中添加了各類依賴和導包的操做。

以上工程目錄就能夠看到，video插件已經link到工程目錄中了。

11.React Native Debug

紅屏

紅屏錯誤只有在debug模式中才會出現。在React Native中一旦出現了紅屏問題，就說明你的js代碼在運行中出了錯誤，通常的錯誤紅屏會直接指出出錯的行數或者錯誤的類型以及堆棧信息。若是沒有指出的話，那就得依靠調試工具或者log信息了。

Chrome Debug

React Native的調試神器就是Chrome，安裝Chrome插件。模擬器選擇command + R 真機選擇搖一搖，就能夠喚出Debug Menu。選擇debug in chrome，就能夠喚出chrome調試器。chrome調試器很是強大，像普通的單步斷點調試，條件調試，堆棧信息等。

Log

Log的信息不管是開發環境仍是生產環境都是很重要的。chrome debug能夠直接在命令行中打印出log信息。生產環境，能夠選擇將log打印到文件中，進行上報分析。

12.Hot Reload

所見即所得是React Native的一大亮點。不管是真機仍是模擬器，只要填好對應的ip。就能夠實時顯示代碼。模擬器選擇command + R 真機選擇搖一搖，就能夠喚出Debug Menu。能夠在Debug Menu中選擇Hot Reload 的方式。

13.小結

本次帶着你們，蜻蜓點水式的觀看了React Native的簡介，語言以及重要語法，樣式，性能分析，重要的state&props ，生命週期等等。這些介紹雖然淺淺介紹，沒有深刻探究。可是這樣的管中窺豹，但願你們對React Native有了一點點大概的印象，起到小白入門的做用。

相關閱讀

React Native學習筆記
React-Native簡介
react-native實踐

此文已由做者受權雲+社區發佈，轉載請註明原文出處