小さなプログラムでも反応できますか?

WeChat アプレットで反応コンポーネントを実行するというアイデア

上の図に示すように、反応に基づいてレンダラーを通じて反応コンポーネントを作成します。 -reconciler DSL の純粋なオブジェクト (コールバック関数を含む) を取得します。ページの js ファイルでは、このオブジェクトを this.setData を通じてレンダリング スレッドに送信します。wxml では、提供する自己参照のネストされたコンポーネントを使用します。 DSL レンダリングを実行します。ここで注意すべき点は、コンポーネントが更新されると、react-reconciler が対応するフックをトリガーすることです。このとき、新しい DSL が再度生成され、レンダリングが this.setData を通じて再度送信されます。したがって、単純に createElement を使用した場合とは結果が異なり、フックなどの React の組み込み関数をサポートしています。

次は、この記事に記載されているコードをできるだけ手書きして、ご自身のプロジェクトでこの記事と同じ効果を実現できるように、具体的な内容を説明していきます。このウェアハウスのクローンをローカルに作成し、実行効果を確認し、実装プロセス全体を検討できます。

反応コンポーネントを純粋な JS オブジェクトとしてレンダリングする

反応レンダラーは、基本的に、反応スケジューリング システムに基づく副作用実行プログラムです。副作用の結果は、 Web環境 DOMの操作です ネイティブ環境ではレンダリングエンジンを呼び出してグラフィックスをラスタライズします アート環境ではサウンドカードを呼び出して音を再生します 今回の計画ではレンダラーにハンドオーバーを容易にするために純粋な js オブジェクトを生成します。アプレットは、アプレットの 2 つのスレッド間でメッセージ本文として渡され、インターフェイスはこのオブジェクトに基づいてアプレット内にレンダリングされます。

何人かの学生から「jsx コンパイル後の React.createElement の実行結果は純粋な JS オブジェクトではないのですか?」と質問されました。ここで、react の本質を理解する必要があります。実際、react のコンポーネントは、react で表現される特定のオブジェクトの構造を記述する、react の記述システムを提供します。ただし、この説明は抽象的なものであり、インスタンス化して実行する場合にのみ意味を持ちます。コンポーネント内で行う記述は jsx 部分だけではなく、ビジネス レベルおよびプログラム レベルのロジックも含まれます。たとえば、多くのシナリオでは、さまざまなインターフェイスをレンダリングするために、コンポーネントのステータスに基づいて jsx のどの部分を返すかを決定する必要があります。コンテンツのこの部分は、実行環境 (反応レンダラー) に依存する必要があります。

以前は、react-dom をシミュレートし、その動作ロジックに従ってレンダラーを自分で書くことしかできませんでした。現在、React は、開発者が React のスケジューリング システムにすぐにアクセスして独自のレンダラーを構築できるようにするために、スケジューラ用の特別なライブラリ、react-reconciler を作成しました。こちらは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)
  })
}

上記のコードでは、指定されていない HostConfig の特定の内容がキーです。これは Reconciler を準備するために使用されます。コードの観点から見ると、これはフック関数のコレクションです。設定する必要があります。これを各フック関数内に記述します。コンテナを操作するための副作用をいくつか記述します。さまざまな時点で、渡した作成、マウント、および更新が呼び出され、操作されたコンテナを受け取り、js を取得できることがわかります。オブジェクト (コンテナ上にもコンテナがあります。いくつかの関数がありますが、this.setData が自動的にクリアするため無視できます)。

この設定内容は複雑すぎてわかりやすく説明すると紙面が多くなってしまうため、ソースコードのアドレスを直接貼り付けておきます。コードのこの部分を分割し、独自のコンポーネントを実行し、console.log を使用してそれらが呼び出されるタイミングと順序を観察できます。

つまり、これらのインターフェイスは複雑なロジックではなく知識レベルであり、各構成アイテムの役割と実行タイミングを理解した後、独自のレンダラーを作成できます。理論的には、それほど難しいことではありません。

react-reconciler に基づいて、react の実行のあらゆる側面でいくつかの副作用を実行しました。これらの副作用の本質は、純粋な JS オブジェクトを変更することです。react が実行されると、ライフを通過します。サイクルについては、React のライフサイクルの特定のプロセスに関する私のビデオの 1 つで説明されています。また、私の個人的な WeChat 公開アカウント wwwtangshuangnet をフォローして、関連する問題について私と話し合うこともできます。各ライフサイクル ノードで、スケジューラは副作用を実行します。つまり、提供した純粋な js オブジェクトを変更します。

ミニ プログラムのレンダラーで生成された js オブジェクトを取得するための 2 つのメソッドを提供します。この js オブジェクトを取得した後、アプレットの this.setData を呼び出し、このオブジェクトをレンダリングのためにレンダリング スレッドに送信できます。

利用react渲染器得到的纯对象上存在一些函数，调用这些函数会触发它们对应的逻辑（比如调用setState触发hooks状态更新），从而触发调度器中的钩子函数执行，container对象再次被修改，updated被再次调用，this.setData被再次执行，这样，就实现了真正的react运行时在小程序中的植入。

嵌套递归自引用组件

渲染线程接收到this.setData发送过来的js对象后，如何将这个对象作为布局的信息，渲染到界面上呢？由于小程序的特殊架构，它为了安全起见，渲染线程中无法执行可操作界面的脚本，所有的渲染，都得依靠模板语法和少量的wxs脚本。所以，要怎么做呢？

小程序提供了自定义组件的功能，在app.json或对应的page.json中，通过usingComponents来指定一个路径，从而可以在wxml中使用这个组件。而有趣的地方在于，组件本身也可以在组件自己的component.json中使用usingComponents这个配置，而这个配置的内容，可以直接指向自己，例如，我在自己的组件中，这样自引用：

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

自己引用自己作为组件之后，在其wxml中，我们就可以使用组件自己去渲染子级数据，即一种嵌套递归的形式进行渲染。

我规定了一种特别的数据结构，大致如下：

{
  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中把所有组件通过这种形式枚举出来之后，这个组件就能按照上述的数据结构递归渲染出整个结构。

当然，这里还需要处理一些细节，例如响应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编译的过程。

另一种办法是走一遍编译，在小程序的页面目录下，创建一个页面同名的.jsx文件，再利用bebel将它编译为.js文件。但是这样的话，你需要在发布小程序的时候，忽略掉所有的.jsx文件。另外，还有一个坑是，小程序的编译不提供process.env，所以编译react的结果用的时候会报错。解决办法是把react的cjs/react.production.min.js作为react的入口文件，通过小程序的构建npm的相关配置逻辑，指定react构建的文件。

结语

本文详细讲解了如何在微信小程序中直接运行react组件的思路，同时，你可以参考这个仓库，运行效果看看，研究它的整个实现过程。总结而言，这个方法分为3个部分：1. 基于react-reconciler实现一个把react组件渲染为纯js对象的渲染器，之所以需要纯js对象，是因为小程序发送到渲染线程的数据必须是纯对象。2. 利用小程序的自定义组件，实现自引用嵌套递归的组件，用于利用上一步得到的js对象渲染成真正的界面。3. 解决jsx问题，将前两步的结果，在page中进行实施，以真正完成在小程序中渲染react组件的效果。当然，本文阐述过程，仅仅提供了这套思路，在真正用到项目中时，使用过程中肯定还会遇到一些坑，仅能作为原有小程序开发项目的补充手段，比如之前写好的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视频教程》