작은 프로그램이 반응할 수 있나요?

WeChat 애플릿에서 React 컴포넌트를 실행하는 아이디어

위 그림과 같이 React-Reconciler 기반의 렌더러를 통해 React 컴포넌트를 전달하여 DSL의 순수 객체(콜백 함수 포함)를 생성합니다. 페이지의 js 파일에서 이 개체는 this.setData를 통해 렌더링 스레드로 전송되고, 우리가 제공하는 자체 참조 중첩 구성 요소는 wxml에서 DSL을 렌더링하는 데 사용됩니다. 여기서 주목해야 할 점은 컴포넌트가 업데이트될 때 React-reconciler가 해당 후크를 트리거한다는 것입니다. 이때 새로운 DSL이 다시 생성되고 this.setData를 통해 렌더링이 다시 전송됩니다. 따라서 이 렌더러의 결과는 단순히 createElement를 사용한 결과와 다릅니다. 렌더러는 Hooks와 같은 React의 내장 기능을 지원합니다.

다음으로, 이 글에서 설명한 코드를 최대한 손으로 직접 작성하여, 여러분의 프로젝트에서도 이 글과 동일한 효과를 얻을 수 있도록 구체적인 내용을 설명하겠습니다. 이 웨어하우스를 로컬로 복제하고, 실행 효과를 확인하고, 전체 구현 프로세스를 연구할 수 있습니다.

리액트 구성요소를 순수 JS 객체로 렌더링합니다

리액트 렌더러는 본질적으로 리액트 스케줄링 시스템을 기반으로 하는 사이드 이펙트 실행기입니다. 사이드 이펙트의 결과는 웹 환경에서의 DOM 작업이며, 이를 렌더링이라고 합니다. 엔진은 그래픽을 래스터화합니다. 아트 환경에서는 사운드 카드를 호출하여 이번에는 애플릿에 전달할 수 있도록 순수한 js 객체를 생성해야 합니다. 애플릿의 두 스레드 사이에 함수가 전달되고 인터페이스는 이 객체를 기반으로 애플릿에 렌더링됩니다.

몇몇 학생들이 저에게 묻더군요. jsx 컴파일 후 React.createElement의 실행 결과가 순수 JS 객체 아닌가요? 여기에서 React의 본질을 이해해야 합니다. React의 구성요소는 실제로 React로 표현되는 특정 객체의 구조를 설명하는 React에 대한 설명 시스템을 제공합니다. 그러나 이 설명은 추상적이며 인스턴스화하고 실행할 때만 의미가 있습니다. 구성 요소에서 작성하는 설명은 jsx 부분뿐만 아니라 비즈니스 및 프로그램 수준 논리도 포함합니다. 예를 들어, 많은 시나리오에서는 다양한 인터페이스를 렌더링하기 위해 구성 요소 상태에 따라 반환할 jsx 부분을 결정해야 합니다. 콘텐츠의 이 부분은 실행 환경, 즉 반응 렌더러에 의존해야 합니다.

과거에는 React-dom을 시뮬레이션하고 운영 로직에 따라 렌더러를 직접 작성할 수만 있었습니다. 이제 React는 개발자가 React의 스케줄링 시스템에 빠르게 액세스하여 자신만의 렌더러를 구축할 수 있도록 스케줄러인 React-reconciler를 위한 특수 라이브러리를 만들었습니다. React-Reconciler의 기본적인 사용법과 효과를 소개하는 영상(Bring Your Own Ladder)입니다.

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 실행 시간의 모든 측면에서 몇 가지 부작용 작업을 수행했습니다. 이러한 부작용의 핵심은 React가 실행될 때 수명 주기를 거치는 것입니다. 내 동영상 중 하나에서 나는 React의 라이프사이클의 구체적인 프로세스에 대해 이야기했습니다. 내 개인 WeChat 공개 계정 wwwtangshuangnet을 팔로우하고 나와 관련 문제에 대해 논의할 수도 있습니다. 각 라이프사이클 노드에서 스케줄러는 부작용, 즉 내가 제공한 순수 js 객체를 수정하는 작업을 수행합니다.

미니 프로그램의 렌더러에서 생성된 js 객체를 얻는 두 가지 방법을 제공합니다. 이 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视频教程》