用 React 開發小程序的探索之路技术頭條網

在目前市面上已經有非常多的小程序開發框架，其中的佼佼者如 wepy 以及 mpvue ，他們都是非常優秀的小程序開發框架。但是它們都有一個共同的特點，都是通過類 vue 語法的小程序開發框架。這點對於國內一些 react 的開發者來說就顯得有點遺憾了。

我們團隊在去年就整體轉入了 react 開發陣營，對於我們團隊來說， react 會更加熟悉一些。所以我們一直在探索如何用 react 開發小程序，前端時間我們開源了一個框架，叫做 Taro 。本次也會圍繞這個，來分享探索使用 react 開發小程序。主要包含以下五個部分內容：

第一部分：原生開發之痛

開發小程序由三部分組成，這三大部分都是由四種類型文件，如下圖所示：

我們以 JS 文件為例：

我們在寫原生小程序的時候，這兩份代碼是非常常見的。它們都是藉助函數工廠類的方式去構建頁面以及組件。在小程序中的一大特色就是使用字符串模板的形式來編寫界面，如圖：

以上就是一些小程序官方寫法上的一些約定，但也是這些約定，讓開發者存在一些開發上的痛點，這些痛點主要集中在：

開發體驗
性能瓶頸

在開發體驗上，代碼組織稍顯複雜。當組件和頁面越來越多，項目越來越龐大的時候開發成本就會顯得有點高，其次就是編碼體驗不夠順暢，如下圖：

頁面或者組件無法被繼承的時候，我們在實現一些功能的時候會受到一些限制，同時小程序本身提供了一些 API ，但是卻沒有提供一個跟編輯器很好結合的東西，當我們在使用這些 API 的時候缺乏智能提示。其次就是字符串模板稍顯孱弱。例如：

當我們實現一個日期格式化的時候，點擊的時候無法傳參，還有就是直接寫一個格式化函數是無法運行的，我們需要藉助 wxs 這樣的一些工具去實現這樣的一個功能，但是這樣是非常麻煩的。還有就是小程序的代碼規範並不是很統一，以 Button 組件為例：

一些屬性參數都是有很大的差異的。其次就是缺乏統一的自動化編譯處理，導致無法直接在小程序中直接使用一些新的 ES 語法，以及 SASS 、 LESS 來書寫樣式代碼。

在性能瓶頸上面，小程序的整體架構是這樣的：

分為視圖層和邏輯層，這兩個層之間是有一個特定的通信方式的，當我們在調用 setData 去更新視圖的時候，小程序首先把你傳入的數據使用 JSON.stringify 進行序列化，之後拼接成一段可執行的 JS 腳本，最後運行。在這樣的一層通信機制上，導致去調用 setData 的去更新視圖的時候成本非常之高。所以小程序官方也是提供了一些對於性能優化上的提示

避免頻繁 setData
setData 避免傳入大規模數據

針對以上的痛點和限制，業界也有一些優秀的解決方案，諸如 mpvue， wepy，但是它們都是類 vue 的開發框架。正如前面所說，這樣子的話對於我們團隊或者使用 react 的開發者有點遺憾。

第二部分：如何使用 React 開發小程序

使用 react 來開發應用帶來的的一些好處：

react 和小程序是有一些共同特點的

View = F(Data)，都是通過數據來驅動視圖模型
同時都是用一種類似的 API 來驅動整個視圖的更新（小程序：this.setData()， react：this.setState() ）

正因為這樣，也是更加想用 react 來開發小程序。經過進一步的研究發現，小程序和 react 之間的差異是非常大的主要是由於三大塊的差異：

JS 代碼對比：

生命週期對比：

模板對比：

這麼大的差異導致我們想用 react 來開發小程序的難度非常之大，所以我們應該怎麼使用 react 來開發小程序呢？仔細思考一下我們的需求，我們是希望通過 react 語法的代碼來開發小程序，那麼其中的核心工作就是將 react 代碼通過某種轉換操作，變成小程序可以運行的代碼。這樣一種在兩種語法之間轉換的這種操作其實就涉及到一個編譯原理。編譯原理的一個大致過程大概如圖所示：