用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

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

Rolan 2019-8-27 00:11

為什么要用 React 來構建小程序 因為 React 是我們最熟悉的技術。 小程序糟糕的 API 設計已經有很多文章吐槽,這里就不再贅述了。再加上現在一大堆小程序平臺,每個平臺之間又有大大小小的差異,這對于有跨平臺需求 ...

為什么要用 React 來構建小程序

因為 React 是我們最熟悉的技術。

小程序糟糕的 API 設計已經有很多文章吐槽,這里就不再贅述了。再加上現在一大堆小程序平臺,每個平臺之間又有大大小小的差異,這對于有跨平臺需求的小程序來說無異于是一場災難。

React 的社區生態體系非常龐大,通過在小程序中引入 React 以及 React Hooks 提供的邏輯抽象能力,我們可以在小程序中直接利用 React 生態體系中大量的技術沉淀(比如:react-usefield-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 希望能打破這個局面,通過開放的生態為開發者帶來全新的小程序開發體驗。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: yesmeck 來自: 掘金
不朽的浪漫援彩金
陕西快乐10分 捕鱼达人3 1.2破解版 内蒙古十一选五技巧 秒速牛牛开奖结果 球探网篮球即时比分 网上赚钱软件 熊猫四川麻将官方版 6场半全场 四川熊猫麻将app下载 福彩开奖结果查询 3d 李逵劈鱼怎么打才会赢 欢乐真人麻将旧版2016 湖北快3综合走势图百度乐彩 北京小赛车微信群 上海快3 单机国标麻将