Ray 开发框架实现原理、使用和升级介绍

最新推荐文章于 2025-09-25 10:50:56 发布

原创

最新推荐文章于 2025-09-25 10:50:56 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#App #小程序 #物联网 #iot #ray #API #VNode

本文详细介绍了Ray如何在小程序中通过VNode实现React渲染，绕过DOM限制，以及VNode的结构和作用。还涵盖了Ray的使用、升级管理和优化建议，包括tsconfig配置以提高代码提示和开发体验。

实现原理

Ray 本质上是站在 Remax 的基础上完成的运行时改造，本质是一个通过 react-reconciler 实现的一个小程序端的渲染器。关于 react-reconciler 和 React 渲染器相关的内容推荐观看这个视频，这里不再赘述。

众所周知，小程序屏蔽了 DOM，我们的代码运行在一个 worker 线程中，无法直接去操作视图层的 DOM。Ray 通过引入 VNode，让 React 在 reconciliation 过程中不是直接去改变 DOM，而先更新 VNode。

VNode 的基本结构如下：

interface VNode {
  id: number;
  container: Container;
  children: VNode[];
  mounted: boolean;
  type: string | symbol;
  props?: any;
  parent: VNode | null;
  text?: string;
  appendChild(node: VNode): void;
  removeChild(node: VNode): void;
  insertBefore(newNode: VNode, referenceNode: VNode): void;
  toJSON(): RawNode;
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。