Remax是螞蟻開源的一個用React來開發小程序的框架，采用運行時無語法限制的方案。整體研究下來主要分為三大部分：運行時原理、模板渲染原理、編譯流程；看了下現有大部分文章主要集中在Reamx的運行時和模板渲染原理上，而對整個React代碼編譯為小程序的流程介紹目前還沒有看到，本文即是來補充這個空白。
關于模板渲染原理看這篇文章：http://www.jfrwli.cn/article/229724.html
關于remax運行時原理看這篇文章：http://www.jfrwli.cn/article/229723.html
關于React自定義渲染器看這篇文章：http://www.jfrwli.cn/article/229725.html
Remax的基本結構：
1、remax-runtime 運行時，提供自定義渲染器、宿主組件的包裝、以及由React組件到小程序的App、Page、Component的配置生成器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 自定義渲染器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模板相關，與模板相關的處理原則及原理可以看這個http://www.jfrwli.cn/article/145552.htm
templates // 與渲染相關的模板
src/api 適配與微信小程序相關的各種全局api，有的進行了promisify化
|
1
2
3
4
5
6
7
8
9
|
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相關配置內容的適配處理
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
/** 頁面配置文件 */// reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.htmlexport interface PageConfig { /** * 默認值：#000000 * 導航欄背景顏色，如 #000000 */ navigationBarBackgroundColor?: string; /** * 默認值：white * 導航欄標題顏色，僅支持 black / white */ navigationBarTextStyle?: 'black' | 'white'; /** 全局配置文件 */// reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.htmlexport interface AppConfig { /** * 頁面路徑列表 */ pages: string[]; /** * 全局的默認窗口表現 */ window?: { /** * 默認值：#000000 * 導航欄背景顏色，如 #000000 */ navigationBarBackgroundColor?: string; /** * 默認值: white * 導航欄標題顏色，僅支持 black / white */ navigationBarTextStyle?: 'white' | 'black'; |
src/types/component.ts 微信內置組件相關的公共屬性、事件等屬性適配
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
import * as React from 'react';/** 微信內置組件公共屬性 */// reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.htmlexport 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的規范
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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生成
|
1
2
3
4
5
|
import * as React from 'react';import { createHostComponent } from '@remax/runtime';// 微信已不再維護export const Audio: React.ComponentType = createHostComponent('audio'); |
createHostComponent生成React的Element
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import * as React from 'react';import { RuntimeOptions } from '@remax/framework-shared';export default function createHostComponent<P = any>(name: string, component?: React.ComponentType<P>) { 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中進行引入
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
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<P = any>( name: string, props: Array<string | [string, string]>): React.ComponentType<P>;export declare function requirePluginComponent<P = any>(pluginName: string): React.ComponentType<P>;export declare function requirePlugin<P = any>(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); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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構造器關聯起來的。
假設原先頁面代碼是這個樣子，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import * as React from 'react';import { View, Text, Image } from 'remax/wechat';import styles from './index.css';export default () => { return ( <View className={styles.app}> <View className={styles.header}> <Image src="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*OGyZSI087zkAAAAAAAAAAABkARQnAQ" className={styles.logo} alt="logo" /> <View className={styles.text}> 編輯 <Text className={styles.path}>src/pages/index/index.js</Text>開始 </View> </View> </View> );}; |
這部分處理在remax-cli/src/build/entries/PageEntries.ts代碼中，可以看到這里是對源碼進行了修改，引入了runtime中的createPageConfig函數來對齊React組件與小程序原生Page需要的屬性，同時調用原生的Page構造器來實例化頁面。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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進行關聯
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
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方法來更新渲染視圖
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
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方法進行的，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
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框架的編譯流程解析(推薦)的文章就介紹到這了,更多相關React編寫小程序內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/dojo-lzz/archive/2021/04/21/14686861.html
