方案探索
在 React Native 中可以使用零 Bundle 大小的 React 服务器组件吗?
由于需要适应快速的产品模块发布请求,要求在App不发版的场景下,对首页的Banner进行动态更新。
当下RN所支持的热更新已经可以满足大部分需求,但是也存在两个问题
- 强制更新影响用户体验
- 静默更新不能及时触达
基于上述问题,需要一套类似服务端渲染(SSR)的方式来解决。
服务端渲染简单的可以理解成在服务端进行页面元素结构的下发(json 字符串),在前端对其解析生成对应的元素树。同样,如果使用字符串来呈现 React Native 视图,则可以创建 0kb JavaScript 的原生 React Server 组件(即不需要提前编译进客户端)。
实现
1. 定义支持渲染的前端组件
const ComponentEnum = {
'View': View,
'Text': Text,
'Image': Image,
'Button': Pressable,
'TextInput': TextInput,
};
2. 定义组件树解析结构
// 组件
type Component {
static type: string
props: any
children?: Component
}
// 点击事件
type Press {
"@clientFn": true
event: string
payload: any
}
3. 解析<