小程序能用react，其使用方法：1、基于“react-reconciler”實(shí)現(xiàn)一個渲染器，生成一個DSL；2、創(chuàng)建一個小程序組件，去解析和渲染DSL；3、安裝npm，并執(zhí)行開發(fā)者工具中的構(gòu)建npm；4、在自己的頁面中引入包，再利用api即可完成開發(fā)。

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

小程序能用react嗎？

能。

在微信小程序中直接運(yùn)行React組件

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

• 編譯，新版本也基于運(yùn)行時??

• 解析為wxml+js??

• 老牌，不斷發(fā)展，全平臺支持，持續(xù)迭代

Remax?

• 運(yùn)行時，帶編譯宏??

• 基于reconciler??

• 最優(yōu)雅，增量更新??

• 不夠成熟，后續(xù)發(fā)展未知

Kbone?

• 運(yùn)行時，依賴webpack?

• 自己實(shí)現(xiàn)一套DOM API?

• 可兼容vue，甚至任意基于DOM渲染的框架?

• 性能問題（全量檢查），幾乎停更

3套方案各有不同，而且在各自的思路上都是獨(dú)樹一幟。就我個人而言，如果不考慮跨端開發(fā)，自己實(shí)現(xiàn)一套DOM API這種方案是非常有價(jià)值的，因?yàn)镈OM接口是HTML標(biāo)準(zhǔn)，你不需要自己去發(fā)明一套標(biāo)準(zhǔn)出來，而一旦實(shí)現(xiàn)了DOM API，那么所以其他基于DOM實(shí)現(xiàn)的應(yīng)用理論上都支持在這上面跑。但是，它的不足就是你每換一個平臺，就要針對這個平臺去實(shí)現(xiàn)一套DOM API，這個成本是非常大的，因?yàn)镈OM接口標(biāo)準(zhǔn)極其龐大，實(shí)現(xiàn)的時候也很容易出bug。在我看來，最優(yōu)雅的實(shí)現(xiàn)還是Remax的那種思路，基于react-reconciler做一個渲染器，這個渲染器將react組件實(shí)例抽象為一個統(tǒng)一的DSL，在不同的平臺上，去解析渲染這個DSL。

但是remax迭代更新之后，它開始強(qiáng)依賴自己的編譯工具，這直接導(dǎo)致我放棄在項(xiàng)目中使用它。因?yàn)閷τ谖覀冏约旱捻?xiàng)目而言，我們其實(shí)有可能不需要它的全部，我們只是使用react來完成我們整個小程序中的某些部分（比如有些已經(jīng)用react寫好的h5我們想要渲染到小程序，其他部分我們還是在原來的項(xiàng)目中跑）。如果對它的編譯工具有依賴，我們就不得不把整個項(xiàng)目遷移到它的編譯工具，那我還不如直接使用taro這個老牌比較穩(wěn)定的工具。

整體實(shí)現(xiàn)思路

經(jīng)過一番研究之后，我決定采用remax的思路，也就是基于react-reconciler實(shí)現(xiàn)一個渲染器，生成一個DSL，再創(chuàng)建一個小程序組件，去解析和渲染這個DSL。在完成實(shí)現(xiàn)之后，我把所有這些邏輯構(gòu)建為最終產(chǎn)物，并以npm的形式發(fā)布產(chǎn)物，對于小程序開發(fā)者而言，只需要npm安裝之后，執(zhí)行開發(fā)者工具中的構(gòu)建npm即可，之后在自己的頁面中引入這個包，利用api即可完成開發(fā)，而不在需要使用另外的編譯工具。

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

微信小程序中運(yùn)行react組件的思路

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

接下來，我將對其中的具體細(xì)節(jié)進(jìn)行講解，以讓你盡可能自己可以手寫出本文所闡述的代碼，以讓你在自己的項(xiàng)目中可以實(shí)現(xiàn)本文一致的效果。你可以克隆這個倉庫到本地，運(yùn)行效果看看，研究它的整個實(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ì)劃中，我們需要渲染器生成一個純js對象，以方便交給小程序在小程序的兩個線程之間作為消息體進(jìn)行傳遞，并基于這個對象在小程序中渲染界面。

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

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

import Reconciler from 'react-reconciler'
const container = {}
const HostConfig = {
  // ... 極其復(fù)雜的一個配置
}
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)鍵，它用于配制一個Reconciler，從代碼的角度，它就是一個鉤子函數(shù)的集合，我們需要在每個鉤子函數(shù)內(nèi)部寫一些副作用來操作container，你可以看到，在不同的時刻，我們傳入的created, mounted, updated會被調(diào)用，而它們接收被操作過的container，從而讓我們獲得這個js對象（container上還有一些函數(shù)，但我們可以不用理會，因?yàn)閠his.setData會自動清除這些函數(shù)）。

由于這一配置內(nèi)容太過復(fù)雜，要講解清楚需要花費(fèi)比較大的篇幅，所以我直接把源碼地址貼在這里，你可以通過閱讀源碼來了解它都有哪些配置項(xiàng)，并且你可以把這部分代碼拆分出來后，運(yùn)行一個自己的組件，通過console.log來觀察它們被調(diào)用的時機(jī)以及順序。

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

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

我提供了兩個方法，用于在小程序的渲染器中，獲得生成好的js對象。得到這個js對象之后，就可以調(diào)用小程序的this.setData，把這個對象發(fā)送到渲染線程進(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)行時在小程序中的植入。

嵌套遞歸自引用組件

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

小程序提供了自定義組件的功能，在app.json或?qū)?yīng)的page.json中，通過usingComponents來指定一個路徑，從而可以在wxml中使用這個組件。而有趣的地方在于，組件本身也可以在組件自己的component.json中使用usingComponents這個配置，而這個配置的內(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中把所有組件通過這種形式枚舉出來之后，這個組件就能按照上述的數(shù)據(jù)結(jié)構(gòu)遞歸渲染出整個結(jié)構(gòu)。

當(dāng)然，這里還需要處理一些細(xì)節(jié)，例如響應(yīng)data的變化，事件響應(yīng)函數(shù)等，你可以通過源碼了解具體要怎么處理。另外，微信小程序this.setData限制在1M以內(nèi)，我雖然還沒有嘗試過很大的數(shù)據(jù)，但是，這個限制肯定在將來是一個風(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)建一個頁面同名的.jsx文件，再利用bebel將它編譯為.js文件。但是這樣的話，你需要在發(fā)布小程序的時候，忽略掉所有的.jsx文件。另外，還有一個坑是，小程序的編譯不提供process.env，所以編譯react的結(jié)果用的時候會報(bào)錯。解決辦法是把react的cjs/react.production.min.js作為react的入口文件，通過小程序的構(gòu)建npm的相關(guān)配置邏輯，指定react構(gòu)建的文件。

結(jié)語

本文詳細(xì)講解了如何在微信小程序中直接運(yùn)行react組件的思路，同時，你可以參考這個倉庫，運(yùn)行效果看看，研究它的整個實(shí)現(xiàn)過程?？偨Y(jié)而言，這個方法分為3個部分：1. 基于react-reconciler實(shí)現(xiàn)一個把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)目中時，使用過程中肯定還會遇到一些坑，僅能作為原有小程序開發(fā)項(xiàng)目的補(bǔ)充手段，比如之前寫好的react組件不想重新寫成小程序版本，那么就可以使用這個方法，同時在渲染組件的地方，把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)文章！