小程式能用react，其使用方法：1、基於「react-reconciler」實(shí)作一個(gè)渲染器，產(chǎn)生一個(gè)DSL；2、建立一個(gè)小程式元件，去解析和渲染DSL；3、安裝npm，並執(zhí)行開發(fā)者工具中的建置npm；4、在自己的頁面中引入包，再利用api即可完成開發(fā)。

本教學(xué)操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

小程式能用react嗎？

能。

在微信小程式中直接執(zhí)行React元件

#在研究跨端開發(fā)時(shí)，我的一個(gè)重要目標(biāo)，是可以讓react元件跑在微信小程式中。在這個(gè)過程中，我探索了微信小程式的架構(gòu)，並引發(fā)了許多思考。而作為跨端開發(fā)，實(shí)際上很難做到write once，run anywhere，因?yàn)槊總€(gè)平臺所提供的能力是不一樣的，例如微信小程式提供了原生的能力，例如調(diào)起相機(jī)或其他需要原生環(huán)境支援的能力，在微信小程式中開發(fā)雖然也是在webview中開展，但是，卻需要一些原生的思維。所以，要做到 write once 就必須有一些限制，這些限制注定了我們無法完全利用小程式的能力，僅僅只用到一些佈局的能力而已。所以，奉勸各位，在做跨端開發(fā)時(shí)，要有個(gè)心理準(zhǔn)備。但如果跳出跨端開發(fā)，我現(xiàn)在只開發(fā)小程序，那我能否用我熟悉的react來開發(fā)呢？甚至，能否用我所發(fā)展的nautil框架來發(fā)展呢？答案是可以的，本文將帶你一步一步實(shí)現(xiàn)自己的react小程式開發(fā)之路，幫助你在某些特定的場景下，完成??react專案遷移到小程式的目標(biāo)。

小程式運(yùn)行React的方案對比

目前業(yè)界能夠比較好支援小程式（沒有特別註明的情況下，小程式特指微信小程式）運(yùn)行React元件的，有3套方案，分別是京東凹凸實(shí)驗(yàn)室的taro，螞蟻金服某團(tuán)隊(duì)（未找到具體團(tuán)隊(duì)名）的remax，微信某團(tuán)隊(duì)的kbone。

Taro??

• 編譯，新版本也基於執(zhí)行時(shí)間??

• 解析為wxml js??

######################################################### #####老牌，不斷發(fā)展，全平臺支持，持續(xù)迭代############Remax?############運(yùn)行時(shí)，帶編譯宏??#### #########基於reconciler?################以recon?#################################################################################################################。 #########Kbone?###########在執(zhí)行階段，依賴webpack?############自己實(shí)作一套DOM API?###### #######可相容vue，甚至任意基於DOM渲染的框架?############效能問題（全量檢查），幾乎停更################################################# ##3套方案各有不同，而且在各自的思路上都是獨(dú)樹一格。就我個(gè)人而言，如果不考慮跨端開發(fā)，自己實(shí)作一套DOM API這種方案是非常有價(jià)值的，因?yàn)镈OM介面是HTML標(biāo)準(zhǔn)，你不需要自己去發(fā)明一套標(biāo)準(zhǔn)出來，而一旦實(shí)現(xiàn)了DOM API，那麼所以其他基於DOM實(shí)作的應(yīng)用理論上都支援在這上面跑。但是，它的不足就是你每換一個(gè)平臺，就要針對這個(gè)平臺去實(shí)作一套DOM API，這個(gè)成本是非常大的，因?yàn)镈OM介面標(biāo)準(zhǔn)極為龐大，實(shí)現(xiàn)的時(shí)候也很容易出bug。在我看來，最優(yōu)雅的實(shí)作還是Remax的那種思路，基於react-reconciler做一個(gè)渲染器，這個(gè)渲染器將react元件實(shí)例抽象化為一個(gè)統(tǒng)一的DSL，在不同的平臺上，去解析渲染這個(gè)DSL 。 ######但是remax迭代更新之後，它開始強(qiáng)烈依賴自己的編譯工具，這直接導(dǎo)致我放棄在專案中使用它。因?yàn)閷段覀冏约旱膶０付?，我們其?shí)有可能不需要它的全部，我們只是使用react來完成我們整個(gè)小程式中的某些部分（例如有些已經(jīng)用react寫好的h5我們想要渲染到小程序，其他部分我們還是在原來的項(xiàng)目中跑）。如果對它的編譯工具有依賴，我們就得把整個(gè)專案遷移到它的編譯工具，那我還不如直接使用taro這個(gè)老牌比較穩(wěn)定的工具。 #########整體實(shí)作思路#########經(jīng)過一番研究之後，我決定採用remax的思路，也就是基於react-reconciler實(shí)作一個(gè)渲染器，產(chǎn)生一個(gè)DSL，再建立一個(gè)小程式元件，去解析和渲染這個(gè)DSL。在完成實(shí)作之後，我把所有這些邏輯建構(gòu)成最終產(chǎn)物，並以npm的形式發(fā)布產(chǎn)物，對於小程式開發(fā)者而言，只需要npm安裝之後，執(zhí)行開發(fā)者工具中的建置npm即可，之後在自己的頁面中引入這個(gè)包，利用api即可完成開發(fā)，而不是需要使用另外的編譯工具。 ###

這項(xiàng)方案的最大好處是，對編譯工具的弱（無）依賴，這樣就可以讓我們的這套方案可以在任意的專案中去跑，而不需要額外引入編譯工具切換工具棧。另外，因?yàn)閞econciler的部分已經(jīng)打包進(jìn)npm套件了，所以它是一個(gè)可以獨(dú)立運(yùn)行的模組，所以，你甚至可以在mpvue等vue風(fēng)格或小程式原生風(fēng)格專案中使用這個(gè)npm套件來渲染react的元件。

微信小程式中運(yùn)行react元件的想法

#如上圖所示，我們將一個(gè)react元件透過基於react-reconciler的渲染器，創(chuàng)建了一個(gè)DSL的純物件（包含回呼函數(shù)），我們在page的js檔案中，透過this.setData把這個(gè)物件傳送給渲染線程，在wxml中使用了我們提供的一個(gè)自引用嵌套的元件對DSL進(jìn)行渲染。這裡需要注意一個(gè)點(diǎn)，react-reconciler會在元件更新的時(shí)候，觸發(fā)對應(yīng)的鉤子，此時(shí)，會再次產(chǎn)生新的DSL，並再次透過this.setData發(fā)送渲染。所以，這個(gè)渲染器和單純使用createElement的結(jié)果是不同的，渲染器支援hooks等react內(nèi)建的功能。

接下來，我將對其中的具體細(xì)節(jié)進(jìn)行講解，以讓你盡可能自己可以手寫出本文所闡述的程式碼，以讓你在自己的專案中可以實(shí)現(xiàn)本文一致的效果。你可以克隆這個(gè)倉庫到本地，運(yùn)行效果看看，研究它的整個(gè)實(shí)現(xiàn)過程。

將react元件渲染為純JS物件

react的渲染器本質(zhì)上是基於react調(diào)度系統(tǒng)的副作用執(zhí)行器，副作用的結(jié)果在web環(huán)境下就是DOM的操作，在native環(huán)境下就是調(diào)用渲染引擎光柵化圖形，在art環(huán)境下就是調(diào)用聲卡播放聲音，而在我們這次的計(jì)劃中，我們需要渲染器生成一個(gè)純js對象，以方便交給小程式在小程式的兩個(gè)執(zhí)行緒之間作為訊息體進(jìn)行傳遞，並基於這個(gè)物件在小程式中渲染介面。

有同學(xué)對我發(fā)出疑問：jsx編譯之後React.createElement的執(zhí)行結(jié)果不就是純JS的物件麼？這裡需要了解react的本質(zhì)。 react的元件，實(shí)際上為react提供了一套描述系統(tǒng)，它描述了react所表達(dá)的具體物件的結(jié)構(gòu)。但是，這個(gè)描述是抽象的，只有當(dāng)你把它實(shí)例化，運(yùn)行起來時(shí)，它才有意義。我們在元件中所做的描述，可不單單只有jsx的部分，它也包含業(yè)務(wù)和程序?qū)用娴倪壿?。例如很多場景下，我們需要根?jù)元件狀態(tài)來決定回傳那一部分jsx，以便渲染不同的介面。而這部分內(nèi)容，需要依賴一個(gè)環(huán)境來執(zhí)行，也就是react渲染器。

以前，我們只能模擬react-dom，依照它的運(yùn)作邏輯，自己手寫一個(gè)渲染器。而現(xiàn)在，react把它的調(diào)度器專門做了一個(gè)函式庫，react-reconciler，幫助開發(fā)者快速接入react的調(diào)度系統(tǒng)，從而可以建立自己的渲染器。這裡有一個(gè)影片（自備梯子），介紹了react-reconciler的基本用法和使用效果。

import Reconciler from 'react-reconciler'
const container = {}
const HostConfig = {
  // ... 極其復(fù)雜的一個(gè)配置
}
const reconcilerInstance = Reconciler(HostConfig)
let rootContainerInstance = null
export function render(element, { mounted, updated, created }) {
  if (!rootContainerInstance) {
    rootContainerInstance = reconcilerInstance.createContainer(container, false, false)
  }
  return reconcilerInstance.updateContainer(element, rootContainerInstance, null, () => {
    notify = { mounted, updated, created }
    created && created(container)
    mounted(container.data)
  })
}

上面程式碼中，沒有給出的HostConfig的具體內(nèi)容是關(guān)鍵，它用於配製一個(gè)Reconciler，從程式碼的角度，它就是一個(gè)鉤子函數(shù)的集合，我們需要在每個(gè)鉤子函數(shù)內(nèi)部寫一些副作用來操作container，你可以看到，在不同的時(shí)刻，我們傳入的created, mounted, updated會被調(diào)用，而它們接收被操作過的container，從而讓我們獲得這個(gè)js對象（container上還有一些函數(shù)，但我們可以不用理會，因?yàn)閠his.setData會自動清除這些函數(shù)）。

由於這一配置內(nèi)容太過複雜，要講解清楚需要花費(fèi)比較大的篇幅，所以我直接把源碼地址貼在這裡，你可以通過閱讀源碼來了解它都有哪些配置項(xiàng)，並且你可以把這部分程式碼拆分出來後，執(zhí)行一個(gè)自己的元件，透過console.log來觀察它們被呼叫的時(shí)機(jī)以及順序。

總而言之，這些介面都是知識層面的，不是什麼複雜的邏輯，了解每一個(gè)配置項(xiàng)目的作用和執(zhí)行時(shí)機(jī)之後，你就能寫出自己的渲染器。理論上，它沒有什麼難度。

基於react-reconciler，我在react運(yùn)行時(shí)的每一個(gè)環(huán)節(jié)都做了一些副作用操作，這些副作用的本質(zhì)，就是修改一個(gè)純js對象，當(dāng)react被運(yùn)行起來時(shí)，它會經(jīng)歷一個(gè)生命週期，這在我的一個(gè)影片中有講到react的生命週期的具體過程。你也可以關(guān)注我的個(gè)人微信公眾號 wwwtangshuangnet 和我討論相關(guān)的問題。在每一個(gè)生命週期節(jié)點(diǎn)上，調(diào)度器就會執(zhí)行一個(gè)副作用，也就是修改我提供的那個(gè)純js物件。

我提供了兩個(gè)方法，用於在小程式的渲染器中，獲得產(chǎn)生好的js物件。得到這個(gè)js物件之後，就可以呼叫小程式的this.setData，把這個(gè)物件送到渲染執(zhí)行緒進(jìn)行渲染。

利用react渲染器得到的純對象上存在一些函數(shù)，調(diào)用這些函數(shù)會觸發(fā)它們對應(yīng)的邏輯（比如調(diào)用setState觸發(fā)hooks狀態(tài)更新），從而觸發(fā)調(diào)度器中的鉤子函數(shù)執(zhí)行，container對象再次被修改，updated被再次調(diào)用，this.setData被再次執(zhí)行，這樣，就實(shí)現(xiàn)了真正的react運(yùn)行時(shí)在小程序中的植入。

嵌套遞歸自引用組件

渲染線程接收到this.setData發(fā)送過來的js對象后，如何將這個(gè)對象作為布局的信息，渲染到界面上呢？由于小程序的特殊架構(gòu)，它為了安全起見，渲染線程中無法執(zhí)行可操作界面的腳本，所有的渲染，都得依靠模板語法和少量的wxs腳本。所以，要怎么做呢？

小程序提供了自定義組件的功能，在app.json或?qū)?yīng)的page.json中，通過usingComponents來指定一個(gè)路徑，從而可以在wxml中使用這個(gè)組件。而有趣的地方在于，組件本身也可以在組件自己的component.json中使用usingComponents這個(gè)配置，而這個(gè)配置的內(nèi)容，可以直接指向自己，例如，我在自己的組件中，這樣自引用：

// dynamic.json
{
  "usingComponents": {
    "dynamic": "./dynamic"
  }
}

自己引用自己作為組件之后，在其wxml中，我們就可以使用組件自己去渲染子級數(shù)據(jù)，即一種嵌套遞歸的形式進(jìn)行渲染。

我規(guī)定了一種特別的數(shù)據(jù)結(jié)構(gòu)，大致如下：

{
  type: 'view',
  props: {
    class: 'shadow-component',
    bindtap: (e) => { ... },
  },
  children: [
    {
      type: 'view',
      props: {},
      children: [
        ...
      ],
    },
  ],
}

模板中，通過對type的判斷，選擇不同的模板代碼進(jìn)行渲染。

<block wx:if="{{ type === &#39;view&#39; }}">
  <view class="{{ props.class }}" bindtap="bindtap">
    <block wx:if="{{ children.length }}" wx:for="{{ children }}">
      <dynamic data="{{ item }}" /> <!-- 嵌套遞歸 -->
    </block>
  </view>
</block>

在wxml中把所有組件通過這種形式枚舉出來之后，這個(gè)組件就能按照上述的數(shù)據(jù)結(jié)構(gòu)遞歸渲染出整個(gè)結(jié)構(gòu)。

當(dāng)然，這里還需要處理一些細(xì)節(jié)，例如響應(yīng)data的變化，事件響應(yīng)函數(shù)等，你可以通過源碼了解具體要怎么處理。另外，微信小程序this.setData限制在1M以內(nèi)，我雖然還沒有嘗試過很大的數(shù)據(jù)，但是，這個(gè)限制肯定在將來是一個(gè)風(fēng)險(xiǎn)點(diǎn)，我現(xiàn)在還沒有解決，還在思考應(yīng)該怎么最小化更新粒度。

不支持直接JSX的變通方法

小程序的編譯，沒有辦法自己配置支持新語法，所以如果我們在小程序代碼中使用jsx，就必須先走一遍自己的編譯邏輯。有兩種解決辦法，一種是不使用jsx語法，而是使用hyperscript標(biāo)記語法，比如：

import { createElement as h } from 'react'
function Some() {
  return h(
    'view',
    { class: 'some-component' },
    h(
      'view',
      { class: 'sub-view' },
      '一段文字',
    ),
    '一段文字',
  )
}

這樣的寫法顯然沒有直接寫jsx來的方便，但是閱讀上沒有什么障礙，且不需要將jsx編譯的過程。

另一種辦法是走一遍編譯，在小程序的頁面目錄下，創(chuàng)建一個(gè)頁面同名的.jsx文件，再利用bebel將它編譯為.js文件。但是這樣的話，你需要在發(fā)布小程序的時(shí)候，忽略掉所有的.jsx文件。另外，還有一個(gè)坑是，小程序的編譯不提供process.env，所以編譯react的結(jié)果用的時(shí)候會報(bào)錯。解決辦法是把react的cjs/react.production.min.js作為react的入口文件，通過小程序的構(gòu)建npm的相關(guān)配置邏輯，指定react構(gòu)建的文件。

結(jié)語

本文詳細(xì)講解了如何在微信小程序中直接運(yùn)行react組件的思路，同時(shí)，你可以參考這個(gè)倉庫，運(yùn)行效果看看，研究它的整個(gè)實(shí)現(xiàn)過程。總結(jié)而言，這個(gè)方法分為3個(gè)部分：1. 基于react-reconciler實(shí)現(xiàn)一個(gè)把react組件渲染為純js對象的渲染器，之所以需要純js對象，是因?yàn)樾〕绦虬l(fā)送到渲染線程的數(shù)據(jù)必須是純對象。2. 利用小程序的自定義組件，實(shí)現(xiàn)自引用嵌套遞歸的組件，用于利用上一步得到的js對象渲染成真正的界面。3. 解決jsx問題，將前兩步的結(jié)果，在page中進(jìn)行實(shí)施，以真正完成在小程序中渲染react組件的效果。當(dāng)然，本文闡述過程，僅僅提供了這套思路，在真正用到項(xiàng)目中時(shí)，使用過程中肯定還會遇到一些坑，僅能作為原有小程序開發(fā)項(xiàng)目的補(bǔ)充手段，比如之前寫好的react組件不想重新寫成小程序版本，那么就可以使用這個(gè)方法，同時(shí)在渲染組件的地方，把DOM的標(biāo)簽，映射為小程序的標(biāo)簽，就可以在一定程度上解決原有react代碼復(fù)用的問題。如果你在實(shí)操過程中遇到什么問題，歡迎在本文下方留言討論～

文中鏈接：
Nautil框架：https://github.com/tangshuang/nautil
演示倉庫：https://gitee.com/frustigor/wechat-dynamic-component
Building a Custom React Rendere: https://www.youtube.com/watch?v=CGpMlWVcHok

推薦學(xué)習(xí)：《react視頻教程》

以上是小程式能用react嗎的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！