1、為什么要用 React 來構(gòu)建小程序？

• react生態(tài)體系完善。

自Facebook在2013年5月開源React，經(jīng)歷了7年多的發(fā)展，react的社區(qū)生態(tài)體系非常龐大，若是使用react來構(gòu)建小程序，那么在小程序開發(fā)中可以充分利用 React 生態(tài)體系中大量的技術(shù)沉淀（比如：react-use、field-form)。

• 更完整的 TypeScript 支持。

（1）當然也可以用 TypeScript 去寫現(xiàn)有的小程序，但是由于小程序的架構(gòu)原因(在小程序中，模版層和邏輯層是分開的，分別運行在渲染線程和邏輯線程)，模板層跟邏輯層有天然的割裂，即使在邏輯層使用了 TypeScript，在模板層也無法享受類型檢查和自動補全帶來的便利。
（2）引入 React 后，我們的代碼全部運行在邏輯層中，可以全程靜態(tài)類型護航，給你滿滿的安全感。

2、使用react構(gòu)建小程序的框架有哪些？

1、nanachi（娜娜奇）：去哪兒
2、taro: 京東
3、remax: 阿里螞蟻金服
4、Rax: 淘寶

3、現(xiàn)有的方案

靜態(tài)編譯
目前社區(qū)中使用 React 構(gòu)建小程序的方案大都使用靜態(tài)編譯的方式實現(xiàn)。
所謂靜態(tài)編譯: 就是使用工具把代碼語法分析一遍，把其中的 JSX 部分和邏輯部分抽取出來，分別生成小程序的靜態(tài)模板和 小程序頁面的定義。

靜態(tài)編譯來構(gòu)建小程序的缺陷：

• js動態(tài)寫法，無法編譯，需規(guī)避很多的動態(tài)寫法。

  因為語法分析是靜態(tài)的，所以這些方案都會去限制一些動態(tài)的寫法。另外正是因為 JavaScript 語言的動態(tài)性，要去做語法分析本身就是件很復(fù)雜的事情，所以這些方案實現(xiàn)起來往往也非常復(fù)雜。

例子：含有動態(tài)語法無法正確編譯的case

• 運行時并沒有 React 的存在，實際運行的是靜態(tài)編譯轉(zhuǎn)換之后的小程序代碼。

4、remax的實現(xiàn)方案及工作原理

Remax 讓你可以使用真正的 React 去構(gòu)建小程序，你可以把他理解成面向小程序的 React Native。

先看下react的架構(gòu)：

• 最下面一層是 React 本身，上層的 ReactDOM 和 ReactNative等，也就是所說的render層。
• Renderer層跟 React 之間通過渲染器（ReactReconciler ）連接，渲染器的作用就是把React 的虛擬 DOM 映射到對應(yīng)平臺的真實元素上去，（譬如：react-dom 的作用就是把虛擬 DOM 映射到瀏覽器的真實 DOM 上)。
• Remax實際上就是實現(xiàn)了一個面向小程序的渲染器，它把「虛擬 DOM」渲染到了小程序的視圖層上。

問題：小程序沒有DOM結(jié)構(gòu)，remax是如何把虛擬DOM渲染到小程序的視圖上的呢？

remax工作流程：
（1）在remax運行時，會通過渲染器將react中的組件渲染成Vnode結(jié)構(gòu)，然后會調(diào)用節(jié)點上的 toJSON 方法，把這個 VNode 變成一個 JSON 對象，這個JOSN對象會被作為小程序頁面page的data數(shù)據(jù)。

Vnode是什么？
VNode 就是 DOM 替代品，所以他長得也很像 DOM 元素，上面會有節(jié)點的類型（小程序中基礎(chǔ)組件如：view、image、text），節(jié)點的屬性和子節(jié)點，另外會有新增、刪除和插入節(jié)點的方法.

import React from 'react';

import { View, Text } from 'remax/alipay';

const IndexPage = () => {
  return (
    <View className="greeting">
      <Text>Hello Remax</Text>
    </View>
  );
};

export default IndexPage;

{
  "id": 0,
  "type": "root",
  "children": [
    {
      "id": 1,
      "type": "view",
      "props": {
        "className": "greeting"
      },
      "children": [
        {
          "id": 2,
          "type": "text",
          "props": {},
          "children": [
            {
              "type": "plain-text",
              "text": "Hello Remax"
            }
          ]
        }
      ]
    }
  ]
}

（2）remax會使用腳手架工具remax-cli 來構(gòu)建我們的代碼 ，這個構(gòu)建過程會生成一個能遍歷 data數(shù)據(jù)的模板。
這個模板會先去遍歷 data 根節(jié)點下的所有子元素，然后根據(jù)子元素的類型，使用其對應(yīng)的模板來渲染這個節(jié)點。
利用模板遞歸渲染 data 的過程，也就把 React 運行到了小程序中并渲染出了界面。

// 模版
<block a:for="{{root.children}}" a:key="{{item.id}}">
  <template is="{{'REMAX_TPL_' + item.type}}" data="{{item: item}}" />
</block>
// view類型模版
<template name="REMAX_TPL_view">
  <view class="{{item.props['className']}}">
    <block a:for="{{item.children}}" key="{{item.id}}">
      <template is="{{'REMAX_TPL_' + item.type}}" data="http://www.wxapp-union.com/{{item: item}}" />
    </block>
  </view>
</template>

<template name="REMAX_TPL_text">
  <text>
    <block a:for="{{item.children}}" key="{{item.id}}">
      <template is="{{'REMAX_TPL_' + item.type}}" data="http://www.wxapp-union.com/{{item: item}}" />
    </block>
  </text>
</template>

<template name="REMAX_TPL_plain-text">
  <block>{{item.text}}</block>
</template>

小結(jié)：
remax來構(gòu)建小程序的思路，沒有借助重新打造react的輪子以及使用靜態(tài)編譯分析語法的方式，將react編譯成運行需要的小程序語言。
remax的方案實現(xiàn)：
我覺得主要還是借鑒了react的架構(gòu)和RN的實現(xiàn)思路，從某種程度上來說，remax其實就是面向小程序的RN，只不過這個面向小程序的實現(xiàn)不能使用RN的渲染器，而是remax開發(fā)的面向小程序的渲染器。
remax的亮點：

• Vnode層的引入
• Vnode轉(zhuǎn)換成JSON的頁面數(shù)據(jù)
• 面向小程序的渲染器

remax的工作原理：
（1）引入了Vnode層，通過渲染器將react的虛擬DOM渲染成了Vnod結(jié)構(gòu)樹。
（2）然后會調(diào)用節(jié)點上的 toJSON 方法，把這個 VNode 變成一個 JSON 對象。
（3）這個JSON對象會作為小程序頁面的Data數(shù)據(jù)。
（4）在使用reamx-cli構(gòu)建我們的代碼時，構(gòu)建過程會生成一個能遍歷 data 的模板，在遍歷的過程中，會根據(jù)元素的類型type去匹配對應(yīng)的頁面模版template，這個遞歸遍歷的過程，通過使用對應(yīng)的模版來承接data的數(shù)據(jù)展示，最終將data中數(shù)據(jù)展現(xiàn)在頁面上。