Le mini programme peut utiliser React. Comment l'utiliser?: 1. Implémentez un moteur de rendu basé sur "react-reconciler" et générez un DSL?; 2. Créez un mini composant de programme pour analyser et restituer le DSL 3. Installez npm et exécutez Build?; npm dans les outils de développement?; 4. Introduisez le package dans votre propre page, puis utilisez l'API pour terminer le développement.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Les mini-programmes peuvent-ils utiliser React??

Oui.

Exécuter les composants React directement dans les mini-programmes WeChat

Lorsque j'étudie le développement cross-end, l'un de mes objectifs importants est de permettre aux composants React de s'exécuter dans les mini-programmes WeChat. Au cours de ce processus, j'ai exploré l'architecture des mini-programmes WeChat et suscité de nombreuses réflexions. Quant au développement cross-end, il est en fait difficile d'écrire une seule fois et de l'exécuter n'importe où car les capacités fournies par chaque plate-forme sont différentes. Par exemple, l'applet WeChat fournit des fonctionnalités natives, telles que l'allumage de la caméra ou d'autres fonctions qui nécessitent une fonctionnalité native. Environnement de prise en charge des capacités, bien que le développement des mini-programmes WeChat soit également effectué en vue Web, cela nécessite une certaine réflexion native. Par conséquent, il doit y avoir certaines restrictions pour réaliser l'écriture une fois. Ces restrictions sont destinées à nous empêcher d'utiliser pleinement les capacités du mini-programme et d'utiliser uniquement certaines capacités de mise en page. Par conséquent, je conseille à chacun d’être préparé mentalement lors du développement inter-terminal. Mais si je m'éloigne du développement cross-end et que je ne développe désormais que de petits programmes, puis-je utiliser le réactif que je connais pour le développer ? Puis-je également utiliser le framework nautil que j'ai développé pour le développement?? La réponse est oui, cet article vous guidera étape par étape pour réaliser votre propre développement d'applet React et vous aidera à atteindre l'objectif de migration des projets React vers l'applet dans certains scénarios spécifiques.

Comparaison des solutions pour exécuter React dans des mini-programmes

Actuellement, l'industrie peut mieux prendre en charge les mini-programmes (sauf indication contraire, les mini-programmes font spécifiquement référence aux mini-programmes WeChat) pour exécuter des composants React. Il existe 3 ensembles de solutions, à savoir JD. .com Taro du laboratoire, remax d'une équipe d'Ant Financial (aucun nom d'équipe spécifique n'a été trouvé) et kbone d'une équipe de WeChat.

Taro

• Compilée, la nouvelle version est également basée sur le runtime

• analysé en wxml+js

• Ancienne marque, développement continu, support complet de la plateforme, itération continue

Remax

• Runtime, avec des macros compilées

• Basé sur un réconciliateur

• La mise à jour incrémentielle la plus élégante

• pas assez mature, le développement ultérieur est inconnu

Kbone

• Exécuter temps, dépendant du webpack

• Réalisez-le vous-même Un ensemble d'API DOM

• compatible avec vue, et même n'importe quel framework basé sur le rendu DOM

• Problèmes de performances (inspection complète), mise à jour presque arrêtée

Les trois ensembles de solutions sont différents, et dans leurs propres idées, tous sont uniques. Personnellement, si vous n'envisagez pas le développement cross-end, il est très utile d'implémenter vous-même un ensemble d'API DOM, car l'interface DOM est une norme HTML et vous n'avez pas besoin d'inventer un ensemble de normes vous-même. et une fois l'API DOM implémentée, toutes les autres applications basées sur DOM peuvent théoriquement prendre en charge son exécution. Cependant, son inconvénient est que chaque fois que vous changez de plate-forme, vous devez implémenter un ensemble d'API DOM pour cette plate-forme. Ce co?t est très élevé, car la norme d'interface DOM est extrêmement volumineuse et il est facile d'avoir des bugs lors de la mise en ?uvre. . à mon avis, l'implémentation la plus élégante est l'idée de??Remax, qui est un moteur de rendu basé sur React-Reconciler. Ce moteur de rendu résume l'instance du composant React dans un DSL unifié, analyse et restitue ce DSL sur différentes plates-formes. .

Mais après la mise à jour itérative de remax, il a commencé à s'appuyer fortement sur ses propres outils de compilation, ce qui m'a directement amené à renoncer à l'utiliser dans le projet. Parce que pour nos propres projets, nous n'avons peut-être pas besoin de tout cela. Nous utilisons uniquement React pour compléter certaines parties de l'ensemble de notre petit programme (par exemple, certains h5 qui ont été écrits en réaction que nous voulons restituer au petit programme). , nous exécutons toujours d'autres parties dans le projet original). S'il y a une dépendance à son outil de compilation, il faudra migrer l'intégralité du projet vers son outil de compilation. Alors autant utiliser taro, un outil ancien et stable.

Idée globale d'implémentation

Après quelques recherches, j'ai décidé d'adopter l'idée de remax, qui consiste à implémenter un moteur de rendu basé sur React-Reconciler, à générer un DSL, puis à créer un petit composant de programme pour analyser et restituer le DSL. . Après avoir terminé l'implémentation, j'ai intégré toutes ces logiques dans le produit final et publié le produit sous la forme de npm. Pour les petits développeurs de programmes, il leur suffit d'installer npm, d'exécuter la build npm dans les outils de développement, puis d'introduire ce package. dans votre propre page et utilisez l'API pour terminer le développement sans avoir besoin d'utiliser des outils de compilation supplémentaires.

Le plus grand avantage de cette solution est qu'elle ne dépend que faiblement (pas) des outils de compilation, de sorte que notre solution peut être exécutée dans n'importe quel projet sans avoir besoin d'introduire des outils de compilation supplémentaires pour changer de pile d'outils. De plus, étant donné que la partie réconciliateur a été regroupée dans le package npm, il s'agit d'un module qui peut être exécuté indépendamment. Par conséquent, vous pouvez même utiliser ce package npm pour restituer des composants de réaction dans des projets de style Vue ou de mini-programme de style natif. comme mpvue.

L'idée d'exécuter des composants React dans l'applet WeChat

Comme le montre l'image ci-dessus, nous passons un composant React via le moteur de rendu basé sur React-Reconciler et créons un pur objet DSL (y compris la fonction de rappel) .Nous Dans le fichier js de la page, cet objet est envoyé au thread de rendu via this.setData, et un composant imbriqué auto-référentiel que nous fournissons est utilisé dans wxml pour restituer le DSL. Une chose à noter ici est que React-Reconciler déclenchera le hook correspondant lorsque le composant sera mis à jour. à ce moment, un nouveau DSL sera à nouveau généré et le rendu sera à nouveau envoyé via this.setData. Par conséquent, le résultat de ce moteur de rendu est différent de celui de la simple utilisation de createElement. Le moteur de rendu prend en charge les fonctions intégrées de réaction telles que les hooks.

Ensuite, j'expliquerai les détails spécifiques afin que vous puissiez autant que possible écrire à la main le code décrit dans cet article, afin que vous puissiez obtenir le même effet que cet article dans votre propre projet. Vous pouvez cloner cet entrep?t localement, voir l'effet en cours et étudier l'ensemble de son processus de mise en ?uvre.

Rendu les composants de réaction en objets JS purs

Le moteur de rendu de réaction est essentiellement un exécuteur d'effets secondaires basé sur le système de planification de réaction. Le résultat de l'effet secondaire est une opération DOM dans l'environnement Web, et il est appelé rendu dans le. environnement natif. Le moteur rastérise les graphiques. Dans l'environnement artistique, il appelle la carte son pour jouer le son cette fois, nous avons besoin que le moteur de rendu génère un objet js pur afin qu'il puisse être transmis à l'applet en tant qu'objet. fonction entre les deux threads de l'applet. Le corps du message est transmis et l'interface est rendue dans l'applet en fonction de cet objet.

Certains étudiants m'ont demandé?: après la compilation jsx, le résultat de l'exécution de React.createElement n'est-il pas un pur objet JS?? Ici, vous devez comprendre l'essence de réagir. Les composants de React fournissent en fait un système de description pour React, qui décrit la structure des objets spécifiques exprimés par React. Cependant, cette description est abstraite et n’a de sens que lorsque vous l’instanciez et l’exécutez. La description que nous faisons dans le composant ne concerne pas seulement la partie jsx, elle inclut également la logique au niveau métier et programme. Par exemple, dans de nombreux scénarios, nous devons décider quelle partie de jsx renvoyer en fonction de l'état du composant, afin de restituer différentes interfaces. Cette partie du contenu doit s'appuyer sur un environnement d'exécution, qui est le moteur de rendu React.

Dans le passé, nous ne pouvions que simuler React-Dom et écrire nous-mêmes un moteur de rendu selon sa logique de fonctionnement. Désormais, React a créé une bibliothèque spéciale pour son planificateur, React-Reconciler, afin d'aider les développeurs à accéder rapidement au système de planification de React afin qu'ils puissent créer leurs propres moteurs de rendu. Voici une vidéo (apportez votre propre échelle) qui présente l'utilisation de base et les effets de React-Reconciler.

import Reconciler from 'react-reconciler'
const container = {}
const HostConfig = {
  // ... 極其復雜的一個配置
}
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)
  })
}

Dans le code ci-dessus, le contenu spécifique de HostConfig qui n'est pas donné est la clé. Il est utilisé pour préparer un réconciliateur. Du point de vue du code, il s'agit d'une collection de fonctions hook à l'intérieur. chaque fonction hook. Lors de l'utilisation du conteneur, vous pouvez voir qu'à différents moments, les éléments créés, montés et mis à jour que nous avons transmis seront appelés, et ils recevront le conteneur exploité, nous permettant d'obtenir l'objet js (il y en a aussi). fonctions sur le conteneur, mais nous pouvons l'ignorer, car this.setData effacera automatiquement ces fonctions).

étant donné que ce contenu de configuration est trop compliqué, il faudrait beaucoup d'espace pour l'expliquer clairement, je colle donc directement l'adresse du code source ici. Vous pouvez comprendre de quels éléments de configuration il dispose en lisant le code source, et vous pouvez mettre. this Après avoir divisé une partie du code, exécutez votre propre composant et utilisez console.log pour observer le moment et l'ordre dans lesquels ils sont appelés.

En bref, ces interfaces sont au niveau des connaissances et non d'une logique complexe. Après avoir compris le r?le et le timing d'exécution de chaque élément de configuration, vous pouvez écrire votre propre moteur de rendu. En théorie, ce n'est pas si difficile.

Sur la base de React-Reconciler, j'ai effectué quelques opérations d'effets secondaires dans tous les aspects du temps d'exécution de React. L'essence de ces effets secondaires est de modifier un objet js pur lorsque React est exécuté, il passera par un cycle de vie. Ceci Dans l'une de mes vidéos, j'ai parlé du processus spécifique du cycle de vie de React. Vous pouvez également suivre mon compte public personnel WeChat wwwtangshuangnet et discuter de questions connexes avec moi. Sur chaque n?ud du cycle de vie, le planificateur effectuera un effet secondaire, c'est-à-dire modifier l'objet js pur que j'ai fourni.

Je propose deux méthodes pour obtenir l'objet js généré dans le moteur de rendu du mini programme. Après avoir obtenu cet objet js, vous pouvez appeler this.setData de l'applet pour envoyer cet objet au thread de rendu pour le rendu.

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

嵌套遞歸自引用組件

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

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

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

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

我規(guī)定了一種特別的數據結構，大致如下：

{
  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中把所有組件通過這種形式枚舉出來之后，這個組件就能按照上述的數據結構遞歸渲染出整個結構。

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

不支持直接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的結果用的時候會報錯。解決辦法是把react的cjs/react.production.min.js作為react的入口文件，通過小程序的構建npm的相關配置邏輯，指定react構建的文件。

結語

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

文中鏈接：
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

推薦學習：《react視頻教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!