Miniprogramm kann React verwenden: 1. Implementieren Sie einen Renderer basierend auf ?React-Reconciler“ und generieren Sie eine DSL. 3. Installieren Sie npm und führen Sie Build aus npm in den Entwicklertools. 4. Führen Sie das Paket auf Ihrer eigenen Seite ein und verwenden Sie dann die API, um die Entwicklung abzuschlie?en.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

K?nnen Miniprogramme reagieren?

Ja.

React-Komponenten direkt in WeChat-Miniprogrammen ausführen

Beim Studium der Cross-End-Entwicklung ist es eines meiner wichtigen Ziele, die Ausführung von React-Komponenten in WeChat-Miniprogrammen zu erm?glichen. W?hrend dieses Prozesses habe ich die Architektur von WeChat-Miniprogrammen erkundet und viel Nachdenken angeregt. Bei der Cross-End-Entwicklung ist es tats?chlich schwierig, einmal zu schreiben und überall auszuführen, da die von jeder Plattform bereitgestellten Funktionen unterschiedlich sind. Beispielsweise bietet das WeChat-Applet native Funktionen, z. B. das Einschalten der Kamera oder andere Funktionen, die eine native Funktion erfordern Unterstützende Funktionen: Obwohl die Entwicklung in WeChat-Miniprogrammen auch in der Webansicht erfolgt, ist ein gewisses natives Denken erforderlich. Daher muss es einige Einschr?nkungen geben, um das einmalige Schreiben zu erreichen. Diese Einschr?nkungen sollen verhindern, dass wir die Funktionen des Miniprogramms vollst?ndig nutzen und nur einige Layoutfunktionen verwenden. Daher rate ich jedem, bei der terminalübergreifenden Entwicklung mental vorbereitet zu sein. Aber wenn ich mich von der Cross-End-Entwicklung verabschiede und jetzt nur noch kleine Programme entwickle, kann ich dann die Reaktion, mit der ich vertraut bin, für die Entwicklung verwenden? Kann ich überhaupt das Nautil-Framework verwenden, das ich für die Entwicklung entwickelt habe? Die Antwort lautet: Ja, dieser Artikel führt Sie Schritt für Schritt durch die Umsetzung Ihrer eigenen React-Applet-Entwicklung und hilft Ihnen dabei, das Ziel der Migration von React-Projekten auf Applets in bestimmten spezifischen Szenarien zu erreichen.

Vergleich der L?sungen zum Ausführen von React in Miniprogrammen

Derzeit kann die Branche Miniprogramme besser unterstützen (sofern nicht anders angegeben, Miniprogramme beziehen sich speziell auf WeChat-Miniprogramme), um React-Komponenten auszuführen. Es gibt 3 L?sungss?tze, n?mlich JD .com Taro vom Labor, remax von einem Team bei Ant Financial (es wurde kein spezifischer Teamname gefunden) und kbone von einem Team bei WeChat.

Taro

• Kompiliert basiert die neue Version auch auf der Laufzeit

• geparst in wxml + js

• Alte Marke, kontinuierliche Entwicklung, vollst?ndige Plattformunterstützung, kontinuierliche Iteration

Remax

• Laufzeit, mit kompilierten Makros

• Basierend auf Reconciler

• Das eleganteste, inkrementelle Update

• nicht ausgereift genug, nachfolgende Entwicklung ist unbekannt

Kbone

• Laufzeit, abh?ngig vom Webpack

• Erzielen Sie es selbst Eine Reihe von DOM-APIs

• kompatibel mit Vue und sogar jedem Framework, das auf DOM-Rendering basiert

• Leistungsprobleme (vollst?ndige Inspektion), Aktualisierung fast gestoppt

Die drei L?sungss?tze sind unterschiedlich und in ihren eigenen Ideen sind alle einzigartig. Wenn Sie pers?nlich keine Cross-End-Entwicklung in Betracht ziehen, ist es sehr wertvoll, eine Reihe von DOM-APIs selbst zu implementieren, da die DOM-Schnittstelle ein HTML-Standard ist und Sie nicht einmal selbst eine Reihe von Standards erfinden müssen Wenn die DOM-API implementiert ist, k?nnen alle anderen auf DOM basierenden Anwendungen theoretisch die Ausführung darauf unterstützen. Der Nachteil besteht jedoch darin, dass bei jedem Plattformwechsel eine Reihe von DOM-APIs für diese Plattform implementiert werden müssen. Dieser Aufwand ist sehr hoch, da der DOM-Schnittstellenstandard extrem umfangreich ist und es bei der Implementierung leicht zu Fehlern kommt . Meiner Meinung nach ist die eleganteste Implementierung die Idee von Remax, einem Renderer, der auf React-Reconciler basiert. Dieser Renderer abstrahiert die React-Komponenteninstanz in eine einheitliche DSL und analysiert und rendert diese DSL auf verschiedenen Plattformen. .

Aber nachdem remax iterativ aktualisiert wurde, begann es sich stark auf seine eigenen Kompilierungstools zu verlassen, was direkt dazu führte, dass ich die Verwendung im Projekt aufgab. Denn für unsere eigenen Projekte ben?tigen wir m?glicherweise nicht alles. Wir verwenden React nur, um bestimmte Teile unseres gesamten kleinen Programms fertigzustellen (z. B. einige in React geschriebene h5-Programme, die wir in das kleine Programm rendern m?chten). , wir führen noch andere Teile im Originalprojekt aus). Wenn eine Abh?ngigkeit von seinem Kompilierungstool besteht, müssen wir das gesamte Projekt auf sein Kompilierungstool migrieren. Dann k?nnte ich genauso gut Taro verwenden, ein altes und stabiles Tool.

Allgemeine Implementierungsidee

Nach einigen Recherchen habe ich mich für die Remax-Idee entschieden, die darin besteht, einen auf React-Reconciler basierenden Renderer zu implementieren, eine DSL zu generieren und dann eine kleine Programmkomponente zum Parsen und Rendern der DSL zu erstellen . Nach Abschluss der Implementierung habe ich alle diese Logiken in das Endprodukt integriert und das Produkt in Form von npm ver?ffentlicht. Für kleine Programmentwickler müssen sie nur npm installieren, den Build-npm in den Entwicklertools ausführen und dann dieses Paket einführen in Ihre eigene Seite ein und verwenden Sie die API, um die Entwicklung abzuschlie?en, ohne dass zus?tzliche Kompilierungstools verwendet werden müssen.

Der gr??te Vorteil dieser L?sung besteht darin, dass sie kaum (keine) Abh?ngigkeit von Kompilierungstools aufweist, sodass unsere L?sung in jedem Projekt ausgeführt werden kann, ohne dass zus?tzliche Kompilierungstools zum Wechseln von Tool-Stacks eingeführt werden müssen. Da der Reconciler-Teil au?erdem in das npm-Paket gepackt wurde, handelt es sich um ein Modul, das unabh?ngig ausgeführt werden kann. Daher k?nnen Sie dieses npm-Paket sogar zum Rendern von React-Komponenten in Projekten im Vue-Stil oder im nativen Miniprogramm-Stil verwenden wie mpvue.

Die Idee, React-Komponenten im WeChat-Applet auszuführen

Wie im Bild oben gezeigt, leiten wir eine React-Komponente durch den Renderer basierend auf Reconciler und erstellen ein reines DSL-Objekt (einschlie?lich Callback-Funktion). . In der js-Datei der Seite wird dieses Objekt über this.setData an den Rendering-Thread gesendet und eine von uns bereitgestellte selbstreferenzielle verschachtelte Komponente wird in wxml zum Rendern des DSL verwendet. Hierbei ist zu beachten, dass Reconciler den entsprechenden Hook ausl?st, wenn die Komponente aktualisiert wird. Zu diesem Zeitpunkt wird erneut ein neues DSL generiert und das Rendering erneut über this.setData gesendet. Daher unterscheidet sich das Ergebnis dieses Renderers von dem der einfachen Verwendung von createElement. Der Renderer unterstützt integrierte React-Funktionen wie Hooks.

Als n?chstes werde ich die spezifischen Details erl?utern, damit Sie den in diesem Artikel beschriebenen Code so weit wie m?glich von Hand schreiben k?nnen, damit Sie in Ihrem eigenen Projekt den gleichen Effekt wie in diesem Artikel erzielen k?nnen. Sie k?nnen dieses Warehouse lokal klonen, den laufenden Effekt sehen und den gesamten Implementierungsprozess studieren.

Rendern Sie Reaktionskomponenten in reine JS-Objekte

Der React-Renderer ist im Wesentlichen ein Nebeneffekt-Executor, der auf dem React-Scheduling-System basiert. Das Ergebnis des Nebeneffekts ist der DOM-Vorgang in der Webumgebung, der in der Webumgebung als Rendering bezeichnet wird Native Umgebung. In der Kunstumgebung ruft sie die Soundkarte auf, um den Sound abzuspielen. Diesmal ben?tigen wir den Renderer, um ein reines JS-Objekt zu generieren, damit es an das Applet übergeben werden kann eine Funktion zwischen den beiden Threads des Applets. Der Nachrichtentext wird übergeben und die Schnittstelle wird im Applet basierend auf diesem Objekt gerendert.

Einige Studenten fragten mich: Ist das Ausführungsergebnis von React.createElement nach der jsx-Kompilierung nicht ein reines JS-Objekt? Hier müssen Sie die Essenz der Reaktion verstehen. Die Komponenten von React stellen tats?chlich ein Beschreibungssystem für React bereit, das die Struktur der spezifischen Objekte beschreibt, die durch React ausgedrückt werden. Diese Beschreibung ist jedoch abstrakt und ergibt nur dann Sinn, wenn Sie sie instanziieren und ausführen. Die Beschreibung, die wir in der Komponente vornehmen, ist nicht nur der JSX-Teil, sondern umfasst auch Logik auf Gesch?fts- und Programmebene. In vielen Szenarien müssen wir beispielsweise basierend auf dem Komponentenstatus entscheiden, welcher Teil von jsx zurückgegeben werden soll, um verschiedene Schnittstellen zu rendern. Dieser Teil des Inhalts muss für die Ausführung auf eine Umgebung angewiesen sein, bei der es sich um den React-Renderer handelt.

In der Vergangenheit konnten wir React-Dom nur simulieren und einen Renderer entsprechend seiner Betriebslogik selbst schreiben. Jetzt hat React eine Bibliothek speziell für seinen Scheduler React-Reconciler erstellt, um Entwicklern einen schnellen Zugriff auf das Planungssystem von React zu erm?glichen, damit sie ihre eigenen Renderer erstellen k?nnen. Hier ist ein Video (bringen Sie Ihre eigene Leiter mit), das die grundlegende Verwendung und die Auswirkungen von React-Reconciler vorstellt.

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)
  })
}

Im obigen Code ist der spezifische Inhalt von HostConfig der Schlüssel. Er wird zur Vorbereitung eines Reconcilers verwendet. Aus Code-Sicht handelt es sich um eine Sammlung von Hook-Funktionen Wenn Sie den Container bedienen, k?nnen Sie sehen, dass die von uns übergebenen erstellten, gemounteten und aktualisierten Funktionen zu unterschiedlichen Zeiten aufgerufen werden und den betriebenen Container empfangen, sodass wir das js-Objekt erhalten k?nnen (es gibt auch einige). Funktionen auf dem Container, aber wir k?nnen es ignorieren, da this.setData diese Funktionen automatisch l?scht).

Da dieser Konfigurationsinhalt zu kompliziert ist, würde es viel Platz in Anspruch nehmen, ihn klar zu erkl?ren. Deshalb füge ich die Quellcodeadresse direkt hier ein. Sie k?nnen verstehen, welche Konfigurationselemente er enth?lt, indem Sie den Quellcode lesen und eingeben Nachdem Sie einen Teil des Codes aufgeteilt haben, führen Sie eine eigene Komponente aus und verwenden Sie console.log, um den Zeitpunkt und die Reihenfolge ihres Aufrufs zu beobachten.

Alles in allem handelt es sich bei diesen Schnittstellen um eine Wissensebene und nicht um eine komplizierte Logik. Nachdem Sie die Rolle und den Ausführungszeitpunkt jedes Konfigurationselements verstanden haben, k?nnen Sie Ihren eigenen Renderer schreiben. Theoretisch ist es nicht so schwierig.

Basierend auf React-Reconciler habe ich in jedem Aspekt der React-Laufzeit einige Nebeneffekte durchgeführt. Der Kern dieser Nebeneffekte besteht darin, ein reines JS-Objekt zu ?ndern, wenn es ausgeführt wird. In einem meiner Videos habe ich über den spezifischen Prozess des Reaktionslebenszyklus gesprochen. Sie k?nnen auch meinem pers?nlichen ?ffentlichen WeChat-Konto wwwtangshuangnet folgen und verwandte Themen mit mir besprechen. Auf jedem Lebenszyklusknoten führt der Scheduler einen Nebeneffekt aus, n?mlich das von mir bereitgestellte reine JS-Objekt zu ?ndern.

Ich stelle zwei Methoden bereit, um das generierte JS-Objekt im Renderer des Miniprogramms abzurufen. Nachdem Sie dieses js-Objekt erhalten haben, k?nnen Sie this.setData des Applets aufrufen und dieses Objekt zum Rendern an den Rendering-Thread senden.

利用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í)行，這樣，就實現(xiàn)了真正的react運行時在小程序中的植入。

嵌套遞歸自引用組件

渲染線程接收到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ù)，即一種嵌套遞歸的形式進行渲染。

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

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

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

<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)。

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

不支持直接JSX的變通方法

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

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é)果用的時候會報錯。解決辦法是把react的cjs/react.production.min.js作為react的入口文件，通過小程序的構(gòu)建npm的相關(guān)配置邏輯，指定react構(gòu)建的文件。

結(jié)語

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

文中鏈接：
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視頻教程》

Das obige ist der detaillierte Inhalt vonK?nnen kleine Programme reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!