react-native技術調研：react-native是什麼？

若有疏漏錯誤，還望指正。轉載不忘加上>>原連接<<哦~

react-native是什麼？ react-native原理

從字面意思上來看，react-native由單詞react和單詞native組合而成，中間一個連字符鏈接。

咱們對其中的native的概念是很清晰的，它指的就是原生app，也就是用原生開發方式開發出來的應用。

那麼react又是什麼呢？他們之間的連字符又有什麼特殊的意義呢？下面咱們來一一解答。

首先咱們來講說react。react是什麼？

官網上定義React是一個用於構建用戶界面的js庫。 React是聲明式的，高效率的，併兼具靈活性（React is a declarative, efficient, and flexible JavaScript library for building user interfaces.）。

咱們來理解一下，用於構建用戶界面的js庫有不少啊，好比說angular，vue，jquery，ext等等，均可以被稱爲用戶構建用戶界面的js庫。

那麼react和它們比又有什麼不一樣呢？定義裏說react是聲明式的，高效率的，併兼具靈活性，這就是react的不一樣之處了，也能夠稱爲react的幾個特性吧。

接下來咱們就來分別介紹一下react的這幾個特性。

1.聲明式：聲明式是由JSX語法來表現的。那麼jsx語法又是啥？JSX是使XML能夠嵌入JavaScript的語法。用以更加直觀的描述UI。 JSX是JavaScript對象，可理解爲createElement的語法糖。

咱們來對比一下，首先是原生的js語法：

React.createElement(MyButton,{
    color:'blue', shadowSize:2 },'Click Me');

再來看一下jsx語法：

<MyButton color="blue" shadowSize={2}>Click Me</MyButton>

你們一看，這不就是一個語義化的標籤麼，這樣寫的確比上面寫起來簡單，看起來也更清晰，但這就是JSX了麼？固然不是，JSX語法的重點在於它是與js代碼混寫的，配合es6就像下面這樣：

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

如今是否是感受有點cool了？JSX語法使用語義化的標籤來簡化代碼的編寫，提高了代碼可維護性的同時也下降了學習成本。

如今主流的IDE和文本編輯器均可以經過安裝插件來支持JSX語法。

因此這個聲明式指的是什麼呢？指的就是上面代碼中用大括號括起來的部分{this.props.name}這裏相似於angular中的數據綁定。聲明瞭UI中的表現與js中數據的關係。

2.高效率：高效率是由虛擬DOM來實現的。

虛擬DOM技術指的是使用javascript Object模擬DOM樹，計算變動，減小重繪，提高效率的一種技術實現。

這裏有一篇文章，寫的很是不錯，我就直接給你們引用過來，你們本身看吧。
>>虛擬DOM技術分析<<

3.靈活性：這個靈活性範圍就廣了，有安裝的靈活性，編寫代碼的靈活性等。我側重來講一個，就是components，組件化。

react-native經過Components進行組件化。它把UI分割成獨立的、可重用的部件 。組件化這個概念你們也都不是第一次據說了吧，若是比較陌生的同窗，能夠本身搜搜哈。

react有它本身的組件化方式，就是全部模塊都繼承自React.Components，這比angular的modules更輕量級，結構也更簡單，條條框框也減小了不少，是所謂真正的感覺到了靈活性呢。

代碼示例就像上面講JSX語法的時候引用的那段，你們體會一下。

好的，咱們瞭解完了react的三個特性，也對react有了初步的理解。那麼回到咱們最開始的問題：react-native是什麼啊？

字面上來講，咱們已經瞭解了react，瞭解了native的含義，那麼react和native又是如何聯繫起來的呢？

首先，React經過虛擬DOM實現了對UI層的解耦（不管是android仍是ios）。

而後，將瀏覽器的DOM樹替換爲Native的UI模塊，使React在移動端進行渲染。

最後，採用Native的核心API完成react與native的通訊。

因爲採用native原生UI做爲展示層，因此react-native具備能夠媲美原生應用的優秀用戶體驗與性能優點。

咱們對react-native的一些字面上的概念都有了必定的瞭解。我把以上內容簡單的歸納爲：react-native是基於react技術編寫native應用的一門技術，它繼承了react簡明、高效、靈活的特色，又兼具native優秀的用戶體驗。

react-native技術採用js編碼，編寫的應用具備跨平臺、可熱更新的優點。這就是我眼中的react-native。