Remax - 使用真正的 React 構建小程序

爲何要用 React 來構建小程序

Learn once, write anywhere.

由於 React 是咱們最熟悉的技術。

小程序糟糕的 API 設計已經有不少文章吐槽，這裏就再也不贅述了。再加上如今一大堆小程序平臺，每一個平臺之間又有大大小小的差別，這對於有跨平臺需求的小程序來講無異因而一場災難。

React 的社區生態體系很是龐大，經過在小程序中引入 React 以及 React Hooks 提供的邏輯抽象能力，咱們能夠在小程序中直接利用 React 生態體系中大量的技術沉澱（好比：react-use、field-form)。

更完整的 TypeScript 支持。固然你也能夠用 TypeScript 去寫現有的小程序，可是因爲小程序的架構緣由，模板層跟邏輯層（也就是 Page）有自然的割裂，即便在邏輯層使用了 TypeScript，在模板層也沒法享受類型檢查和自動補全帶來的便利。引入 React 後，咱們的代碼所有運行在邏輯層中，能夠全程靜態類型護航，給你滿滿的安全感。

現有的方案

目前社區中使用 React 構建小程序的方案大都使用靜態編譯的方式實現。所謂靜態編譯，就是使用工具把代碼語法分析一遍，把其中的 JSX 部分和邏輯部分抽取出來，分別生產小程序的模板和 Page 定義。

這種方案最大的問題就是會有不少限制，由於語法分析是靜態的，因此這些方案都會去限制一些動態的寫法。另外正是由於 JavaScript 語言的動態性，要去作語法分析自己就是件很複雜的事情，因此這些方案實現起來每每也很是複雜。

最重要的，靜態編譯後的你的代碼就轉換成了小程序代碼，運行時其實並無 React 的存在，你只是用了 React 的寫法， 而不是真正的在用 React 作應用。

咱們的方案

今年初的時候，@xcodebuild 向你們介紹瞭如何在小程序中使用 React with Hooks。這是一個很是創新的方案，咱們在對這個方案作了完善，而且在線上小程序中獲得驗證後，正式發佈了基於 React 的小程序開發框架：

www.remaxjs.org

Remax 讓你可使用真正的 React 去構建小程序，你能夠他理解成面向小程序的 React Native。

Remax 原理

首選來看一下小程序的架構（支付寶和微信大同小異）：

正如上面提到的，小程序架構分爲兩層，你寫的邏輯代碼獨立運行在一個進程中，每一個頁面會有本身獨立的渲染進程（也就是一個 webview）用來渲染模板。而整個小程序又運行在 APP 容器中（也就是支付寶和微信自己）。邏輯層和視圖層之間經過創建一個消息通道來通訊。

再來看下 React 的架構：

最下面一層是 React 自己，上層的 ReactDOM 和 ReactNative 咱們稱之爲「Renderer」。Renderer 跟 React 之間經過 ReactReconciler 鏈接把元素（也就是一般所說的「虛擬 DOM」）渲染到對應的平臺上。而 Remax 就是一個咱們實現的 Renderer，它把「虛擬 DOM」渲染到了小程序的視圖層上。

能夠看到，咱們把 React 和 ReactReconciler 運行在小程序的邏輯層中，並經過 Remax 把生成的「虛擬 DOM」渲染到視圖層。從而作到了使用真正的 React 去構建小程序。

最後

正如第一段中提到的，把 React 運行在小程序中能夠帶來很是大的想象力。小程序自己能夠說是一種創新，它把應用分爲兩層來提升視圖層的渲染速度，可是微信從一開始就選擇使用私有且落後（起碼目前看來是落後的）的技術方案來定義小程序，然後面的追隨者爲了吸引開發者亦使用了跟微信小程序相似的設計。Remax 但願能打破這個局面，經過開放的生態爲開發者帶來全新的小程序開發體驗。