采用React编写小程序的Remax框架的编译流程 解析(推荐)

网友投稿 343 2023-11-14

Remax是蚂蚁开源的一个用React来开发小程序的框架，采用运行时无语法限制的方案。整体研究下来主要分为三大部分：运行时原理、模板渲染原理、编译流程；看了下现有大部分文章主要集中在Reamx的运行时和模板渲染原理上，而对整个React代码编译为小程序的流程介绍目前还没有看到，本文即是来补充这个空白。

采用React编写小程序的Remax框架的编译流程解析(推荐)

关于模板渲染原理看这篇文章：https://www.jb51-/article/132635.htm

关于remax运行时原理看这篇文章：https://www.jb51-/article/210293.htm

关于React自定义渲染器看这篇文章：https://www.jb51-/article/198425.htm

Remax的基本结构：

1、remax-runtime 运行时，提供自定义渲染器、宿主组件的包装、以及由React组件到小程序的App、Page、Component的配置生成器

// 自定义渲染器

export { default as render } from ./render;

// 由app.js到小程序App构造器的配置处理

export { default as createAppConfig } from ./createAppConfig;

// 由React到小程序Page页面构造器的一系列适配处理

export { default as createPageConfig } from ./createPageConfig;

// 由React组件到小程序自定义组件Component构造器的一系列适配处理

export { default as createComponentConfig } from ./createComponentConfig;

export { default as createNativeComponent } from ./createNativeComponent;

// 生成宿主组件，比如小程序原生提供的View、Button、Canvas等

export { default as createHostComponent } from ./createHostComponent;

export { createPortal } from ./ReactPortal;

export { RuntimeOptions, PluginDriver } from @remax/framework-shared;

export * from ./hooks;

import { ReactReconcilerInst } from ./render;

export const unstable_batchedUpdates = ReactReconcilerInst.batchedUpdates;

export default {

unstable_batchedUpdates,

};

2、remax-wechat 小程序相关适配器

template模板相关，与模板相关的处理原则及原理可以看这个https://www.jb51-/article/145552.htm

templates // 与渲染相关的模板

src/api 适配与微信小程序相关的各种全局api，有的进行了promisify化

import { promisify } from @remax/framework-shared;

declare const wx: WechatMiniprogram.Wx;

export const canIUse = wx.canIUse;

export const base64ToArrayBuffer = wx.base64ToArrayBuffer;

export const arrayBufferToBase64 = wx.arrayBufferToBase64;

export const getSystemInfoSync = wx.getSystemInfoSync;

export const getSystemInfo = promisify(wx.getSystemInfo);

src/types/config.ts 与小程序的Page、App相关配置内容的适配处理

src/types/component.ts 微信内置组件相关的公共属性、事件等属性适配

import * as React from react;

/** 微信内置组件公共属性 */

// reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html

export interface BaseProps {

/** 自定义属性: 组件上触发的事件时，会发送给事件处理函数 */

readonly dataset?: DOMStringMap;

/** 组件的唯一标示: 保持整个页面唯一 */

id?: string;

/** 组件的样式类: 在对应的 WXSS 中定义的样式类 */

className?: string;

/** 组件的内联样式: 可以动态设置的内联样式 */

style?: React.CSSProperties;

/** 组件是否显示: 所有组件默认显示 */

hidden?: boolean;

/** 动画对象: 由`wx.createAnimation`创建 */

animation?: Array<Record<string, any>>;

// reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

/** 点击时触发 */

onTap?: (event: TouchEvent) => void;

/** 点击时触发 */

onClick?: (event: TouchEvent) => void;

/** 手指触摸动作开始 */

onTouchStart?: (event: TouchEvent) => void;

src/hostComponents 针对微信小程序宿主组件的包装和适配；node.ts是将小程序相关属性适配到React的规范

export const alias = {

id: id,

className: class,

style: style,

animation: animation,

src: src,

loop: loop,

controls: controls,

poster: poster,

name: name,

author: author,

onError: binderror,

onPlay: bindplay,

onPause: bindpause,

onTimeUpdate: bindtimeupdate,

onEnded: bindended,

};

export const props = Object.values(alias);

各种组件也是利用createHostComponent生成

import * as React from react;

import { createHostComponent } from @remax/runtime;

// 微信已不再维护

export const Audio: React.ComponentType = createHostComponent(audio);

createHostComponent生成React的Element

import * as React from react;

import { RuntimeOptions } from @remax/framework-shared;

export default function createHostComponent(name: string, component?: React.ComponentType) {

if (component) {

return component;

}

const Component = React.forwardRef((props, ref: React.Ref<any>) => {

const { children = [] } = props;

let element = React.createElement(name, { ...props, ref }, children);

element = RuntimeOptions.get(pluginDriver).onCreateHostComponentElement(element) as React.DOMElement<any, any>;

return element;

});

return RuntimeOptions.get(pluginDriver).onCreateHostComponent(Component);

}

3、remax-macro 按照官方描述是基于babel-plugin-macros的宏；所谓宏是在编译时进行字符串的静态替换，而Javascript没有编译过程，babel实现宏的方式是在将代码编译为ast树之后，对ast语法树进行操作来替换原本的代码。详细文章可以看这里https://zhuanlan.zhihu.com/p/64346538；

remax这里是利用macro来进行一些宏的替换，比如useAppEvent和usePageEvent等，替换为从remax/runtime中进行引入

import { createMacro } from babel-plugin-macros;

import createHostComponentMacro from ./createHostComponent;

import requirePluginComponentMacro from ./requirePluginComponent;

import requirePluginMacro from ./requirePlugin;

import usePageEventMacro from ./usePageEvent;

import useAppEventMacro from ./useAppEvent;

function remax({ references, state }: { references: { [name: string]: NodePath[] }; state: any }) {

references.createHostComponent?.forEach(path => createHostComponentMacro(path, state));

references.requirePluginComponent?.forEach(path => requirePluginComponentMacro(path, state));

references.requirePlugin?.forEach(path => requirePluginMacro(path));

const importer = slash(state.file.opts.filename);

Store.appEvents.delete(importer);

Store.pageEvents.delete(importer);

references.useAppEvent?.forEach(path => useAppEventMacro(path, state));

references.usePageEvent?.forEach(path => usePageEventMacro(path, state));

}

export declare function createHostComponent(

name: string,

props: Array<string | [string, string]>

): React.ComponentType;

export declare function requirePluginComponent(pluginName: string): React.ComponentType;

export declare function requirePlugin(pluginName: string): P;

export declare function usePageEvent(eventName: PageEventName, callback: (...params: any[]) => any): void;

export declare function useAppEvent(eventName: AppEventName, callback: (...params: any[]) => any): void;

export default createMacro(remax);

import * as t from @babel/types;

import { slash } from @remax/shared;

import { NodePath } from @babel/traverse;

import Store from @remax/build-store;

import insertImportDeclaration from ./utils/insertImportDeclaration;

const PACKAGE_NAME = @remax/runtime;

const FUNCTION_NAME = useAppEvent;

function getArguments(callExpression: NodePath<t.CallExpression>, importer: string) {

const args = callExpression.node.arguments;

const eventName = args[0] as t.StringLiteral;

const callback = args[1];

Store.appEvents.set(importer, Store.appEvents.get(importer)?.add(eventName.value) ?? new Set([eventName.value]));

return [eventName, callback];

}

export default function useAppEvent(path: NodePath, state: any) {

const program = state.file.path;

const importer = slash(state.file.opts.filename);

const functionName = insertImportDeclaration(program, FUNCTION_NAME, PACKAGE_NAME);

const callExpression = path.findParent(p => t.isCallExpression(p)) as NodePath<t.CallExpression>;

const [eventName, callback] = getArguments(callExpression, importer);

callExpression.replaceWith(t.callExpression(t.identifier(functionName), [eventName, callback]));

}

个人感觉这个设计有些过于复杂，可能跟remax的设计有关，在remax/runtime中，useAppEvent实际从remax-framework-shared中导出；

不过也倒是让我学到了一种对代码修改的处理方式。

4、remax-cli remax的脚手架，整个remax工程，生成到小程序的编译流程也是在这里处理。

先来看一下一个作为Page的React文件是如何与小程序的原生Page构造器关联起来的。

假设原先页面代码是这个样子，

import * as React from react;

import { View, Text, Image } from remax/wechat;

import styles from ./index.css;

export default () => {

return (

<Image

src="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*OGyZSI087zkAAAAAAAAAAABkARQnAQ"

className={styles.logo}

alt="logo"

编辑 <Text className={styles.path}>src/pages/index/index.js</Text>开始

</View>

);

};

这部分处理在remax-cli/src/build/entries/PageEntries.ts代码中，可以看到这里是对源码进行了修改，引入了runtime中的createPageConfig函数来对齐React组件与小程序原生Page需要的属性，同时调用原生的Page构造器来实例化页面。

import * as path from path;

import VirtualEntry from ./VirtualEntry;

export default class PageEntry extends VirtualEntry {

outputSource() {

return `

import { createPageConfig } from @remax/runtime;

import Entry from ./${path.basename(this.filename)};

Page(createPageConfig(Entry, ${this.name}));

}

createPageConfig来负责将React组件挂载到remax自定义的渲染容器中，同时对小程序Page的各个生命周期与remax提供的各种hook进行关联

export default function createPageConfig(Page: React.ComponentType<any>, name: string) {

const app = getApp() as any;

const config: any = {

data: {

root: {

children: [],

modalRoot: {

children: [],

wrapperRef: React.createRef<any>(),

lifecycleCallback: {},

onLoad(this: any, query: any) {

const PageWrapper = createPageWrapper(Page, name);

this.pageId = generatePageId();

this.lifecycleCallback = {};

this.data = { // Page中定义的data实际是remax在内存中生成的一颗镜像树

root: {

children: [],

modalRoot: {

children: [],

};

this.query = query;

// 生成自定义渲染器需要定义的容器

this.container = new Container(this, root);

this.modalContainer = new Container(this, modalRoot);

// 这里生成页面级别的React组件

const pageElement = React.createElement(PageWrapper, {

page: this,

query,

modalContainer: this.modalContainer,

ref: this.wrapperRef,

});

if (app && app._mount) {

this.element = createPortal(pageElement, this.container, this.pageId);

app._mount(this);

} else {

// 调用自定义渲染器进行渲染

this.element = render(pageElement, this.container);

}

// 调用生命周期中的钩子函数

return this.callLifecycle(Lifecycle.load, query);

onUnload(this: any) {

this.callLifecycle(Lifecycle.unload);

this.unloaded = true;

this.container.clearUpdate();

app._unmount(this);

Container是按照React自定义渲染规范定义的根容器，最终是在applyUpdate方法中调用小程序原生的setData方法来更新渲染视图

applyUpdate() {

if (this.stopUpdate || this.updateQueue.length === 0) {

return;

}

const startTime = new Date().getTime();

if (typeof this.context.$spliceData === function) {

let $batchedUpdates = (callback: () => void) => {

callback();

};

if (typeof this.context.$batchedUpdates === function) {

$batchedUpdates = this.context.$batchedUpdates;

}

$batchedUpdates(() => {

this.updateQueue.map((update, index) => {

let callback = undefined;

if (index + 1 === this.updateQueue.length) {

callback = () => {

nativeEffector.run();

/* istanbul ignore next */

if (RuntimeOptions.get(debug)) {

console.log(`setData => 回调时间：${new Date().getTime() - startTime}ms`);

}

};

}

if (update.type === splice) {

this.context.$spliceData(

{

[this.normalizeUpdatePath([...update.path, children])]: [

update.start,

update.deleteCount,

...update.items,

callback

);

}

if (update.type === set) {

this.context.setData(

{

[this.normalizeUpdatePath([...update.path, update.name])]: update.value,

callback

);

}

});

this.updateQueue = [];

return;

}

const updatePayload = this.updateQueue.reduce<{ [key: string]: any }>((acc, update) => {

if (update.node.isDeleted()) {

return acc;

}

if (update.type === splice) {

acc[this.normalizeUpdatePath([...update.path, nodes, update.id.toString()])] = update.items[0] || null;

if (update.children) {

acc[this.normalizeUpdatePath([...update.path, children])] = (update.children || []).map(c => c.id);

}

} else {

acc[this.normalizeUpdatePath([...update.path, update.name])] = update.value;

}

return acc;

}, {});

// 更新渲染视图

this.context.setData(updatePayload, () => {

nativeEffector.run();

/* istanbul ignore next */

if (RuntimeOptions.get(debug)) {

console.log(`setData => 回调时间：${new Date().getTime() - startTime}ms`, updatePayload);

}

});

this.updateQueue = [];

}

而对于容器的更新是在render文件中的render方法进行的，

function getPublicRootInstance(container: ReactReconciler.FiberRoot) {

const containerFiber = container.current;

if (!containerFiber.child) {

return null;

}

return containerFiber.child.stateNode;

}

export default function render(rootElement: React.ReactElement | null, container: Container | AppContainer) {

// Create a root Container if it doesnt exist

if (!container._rootContainer) {

container._rootContainer = ReactReconcilerInst.createContainer(container, false, false);

}

ReactReconcilerInst.updateContainer(rootElement, container._rootContainer, null, () => {

// ignore

});

return getPublicRootInstance(container._rootContainer);

}

另外这里渲染的组件，其实也是经过了createPageWrapper包装了一层，主要是为了处理一些forward-ref相关操作。

现在已经把页面级别的React组件与小程序原生Page关联起来了。

对于Component的处理与这个类似，可以看remax-cli/src/build/entries/ComponentEntry.ts文件

import * as path from path;

import VirtualEntry from ./VirtualEntry;

export default class ComponentEntry extends VirtualEntry {

outputSource() {

return `

import { createComponentConfig } from @remax/runtime;

import Entry from ./${path.basename(this.filename)};

Component(createComponentConfig(Entry));

}

那么对于普通的组件，remax会把他们编译称为自定义组件，小程序的自定义组件是由json wxml wxss js组成，由React组件到这些文件的处理过程在remax-cli/src/build/webpack/plugins/ComponentAsset中处理，生成wxml、wxss和js文件

export default class ComponentAssetPlugin {

builder: Builder;

cache: SourceCache = new SourceCache();

constructor(builder: Builder) {

this.builder = builder;

}

apply(compiler: Compiler) {

compiler.hooks.emit.tapAsync(PLUGIN_NAME, async (compilation, callback) => {

const { options, api } = this.builder;

const meta = api.getMeta();

const { entries } = this.builder.entryCollection;

await Promise.all(

Array.from(entries.values()).map(async component => {

if (!(component instanceof ComponentEntry)) {

return Promise.resolve();

}

const chunk = compilation.chunks.find(c => {

return c.name === component.name;

});

const modules = [...getModules(chunk), component.filename];

let templatePromise;

if (options.turboRenders) {

// turbo page

templatePromise = createTurboTemplate(this.builder.api, options, component, modules, meta, compilation);

} else {

templatePromise = createTemplate(component, options, meta, compilation, this.cache);

}

await Promise.all([

await templatePromise,

await createManifest(this.builder, component, compilation, this.cache),

]);

})

);

callback();

});

}

而Page的一系列文件在remax-cli/src/build/webpack/plugins/PageAsset中进行处理，同时在createMainifest中会分析Page与自定义组件之间的依赖关系，自动生成usingComponents的关联关系。

到此这篇关于采用React编写小程序的Remax框架的编译流程解析(推荐)的文章就介绍到这了,

您可能感兴趣的文章:Java反应式框架Reactor中的Mono和FluxReact Native项目框架搭建的一些心得体会yii2.0框架使用 beforeAction 防非法登陆的方法分析JavaScript框架Angular和React深度对比前端框架学习总结之Angular、React与Vue的比较详解React前端框架实现原理的理解

标签：解析程序流程小程序 root

暂时没有评论，来抢沙发吧~

采用React编写小程序的Remax框架的编译流程 解析(推荐)

Remax的基本结构：

微信小程序选项卡功能开发步骤与方法全解析

微信小程序利用 JS 实现注册 60s 倒计时功能解析

微信小程序开发实现 tabs 选项卡效果实例代码解析

最近发表

更多内容

小程序SDK

Finclip技术文档

小程序开发

小程序容器

小程序框架

Finclip小程序平台

Finclip用户投稿

车联网

推荐文章

小程序SDK是什么意思？小程序sdk和插件有什么区别？

小程序支付功能怎么实现？

企业app开发流程是什么？

app运营模式有哪些？

小程序多端引流怎么做？

小程序生态分析的机会和威胁

Flutter入门这一篇效率文章就够了

原生与跨平台解决方案分析,跨平台软件开发技术方案

热更新技术：让软件更新变得更加轻松快速

解决方案

银行解决方案

证券解决方案

互联网解决方案

政企OA解决方案

科技解决方案

loT解决方案

信任解决方案

热评文章

AppCan:基于混合模式的移动应用开发,移动混合模

Hybrid App混合模式开发的了解

小程序容器技术助力券商数字营销突围，小程序容器化的意

用mpvue开发微信小程序基础知识（vue.js开发

小程序多端框架全面测评对比，强烈推荐！

开放银行银行案例，迎接金融创新的未来