為什麼要用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 做應用。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

我們的方案

今年初的時候，@xcodebuild 向大家介紹瞭如何在小程式中使用 React with Hooks。這是一個非常創新的方案，我們在對這個方案做了完善，並且在線上小程式中得到驗證後，正式釋出了基於 React 的小程式開發框架：

https://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 去構建小程式。