5. 小程序跨端方案进化之路 -陈嘉健

React ART
Mini Renderer
React Core Reconcilers hostConfig Renderers MiniDOM
挂载入口组件
构造 DOM 结构
构造小程序 app app.onLaunch
React 渲染 <App />
<App />
路由
构造小程序 page
page.onLoad 挂载 Page 到 App
蒸汽时代
基于 Webpack 构建， 支持绝大部分 JSX 语法， 支持 React 开发各端小程序。
框架优化
JSX
2017 年 1 月 微信小程序
2018 年 3 月 快应用
2018 年 11 月 字节跳动小程序
2017 年 9 月 支小程序
React 渲染 <Page />
<Page />
生命周期
appRef.onShow()
ref={getRef}
4
兼容 Vue
兼容 Vue
<aApppp>> <Page />
</aApppp>>
运行时架构
App Service（逻辑层）
react / Vue
DOM Tree
taro-runtime Adapters DOM BOM
小程序跨端方案进化之路
京东凹凸实验室 陈嘉健
小小程序框架
01 过去 02 现在 03 未来
马车代步
支持 React 开发微信小程序， 具有一定的工程化能力， 但也有不少缺陷。
原生开发痛点
孱弱的字符串模板 代码组织复杂 依赖管理混乱
不完全的 ES Next 规范不统一 落后的开发方式
DSL
设计思路
view
记录变动
textContent = 'x'
text
计算路径
[0].cn[0]
#text
page.setData
[0].cn[0][textContent] = 'x'
事件机制
onClick
view
getElementById
text
handler
#text
tpl_text
节点模板
tpl_view
tpl_text
tpl_view
tpl_text
tpl_button
节点模板示例——View
渲染
view
遍历 DOM 树
text
DOM 树 data
setData
tpl_view tpl_text
#text
tpl_#text
更新策略
text.textContent = 'x'
走向未来
支持使用 React、Vue 等框架 直接开发各端小程序！
支持 Vue ？
设计思路
createElement appendChild replaceChild removeChild
......
设计思路
框架
DOM
BOM
浏览器
1
DOM
渲染、更新、事件、样式
DOM
如何渲染？
小程序模板语法
代码转换
让代码转换为小程序代码
运行时适配
抹平框架特性的差异
编译时
源代码
词法分析
语法分析
语义分析
转换操作
目标代码
运行时
生命周期
渲染
事件
组件化
编译时 运行时
整体架构
React 代码 代码编译 微信小程序代码
运行时 适配 微信 小程序
缺点
1 JSX 语法的支持程度不高 2 基于 template 实现的组件化方案问题不断
编译时
整体架构
React 代码
代码编译
ka 运行行行时运行行行时
运行行行时
运行行行时
运行行行时
运行行行时
…
适配
微信 小小程序支支付宝 小小程序 小小程序字节 跳动 小小程序
QQ 小小程序
…
缺点
1 还不能完全支持 JSX 语法 2 每个小程序端拥有各自的运行时 3 调试困难
render
View（视图层）
setData
WXML template
整体架构
React
Vue
…
CLI Webpack
Runtime
React Adapter
Vue Adapter
DOM
BOM
优势
01 完整支持 React 与 Vue，及其生态库 02 不限制开发框架、拓展性强 03 与底层小程序框架解耦 04 支持 source-map 05 DOM 最小化更新
限制
1 禁止 eval、new Function、动态 require 等
zy
2 小程序 dom 节点相关方法为异步方法
transition-group
总结与展望
社区共建
生态建设
01 兼容原生小程序组件 02 实现 H5 转小程序 03 发展组件市场
IDE
01 工程化 02 数据监控 03 组件市场 04 可视化搭建
app page
样式
app.js app.css page.js page.css
2
BOM
BOM
window
document
navigator
webpack.ProvidePlugin
3
兼容 React
React
React Core
Reconcilers
React DOM
Renderers React Native