Frintjs实战: 使用子应用和区域
引言
本文专注于使用Reactjs渲染FrintJS子应用至指定UI区域。
为了掌握本文，建议先阅读下面两篇文章:
何为区域
传统网站的内容包括像头部、底部、侧边栏，一般会根据区域放置对应的内容。
-
头部 会有logo和导航链接
-
底部 有更多的导航和版权信息
-
主体 主要内容区
-
侧边栏 基于主体内容的上下文信息
FrintJS中， 我们引用frint-react包或frint-vue包用来实现<Region />组件, Region组件可以定义应用的不同区域。
区域定义完成后，任何注册至渲染区域的知应用都会在区域内部渲染，反之，没有任何结果。
如何使用区域
想象下面是我们在根应用渲染的React组件，也可以组件树的任何位置渲染。
import React from 'react';
import { Region } from 'frint-react';
export default function Root() {
return (
<div>
<div className="main">
...
</div>
<div className="sidebar">
<Region name="sidebar" />
</div>
</div>
);
}
上面我们仅仅在组件内部定义sidebar区域，目前只是占位用，只有挂载了子应用后才会有界面显示。
注册子应用
我们需要注册一个子应用看到实际效果：
import RootApp from './root-app';
import ChildApp from './child-app';
window.app = new RootApp();
window.app.registerApp(ChildApp, {
regions: ['sidebar'],
});
上面代码实现了根应用实例的访问，然后通过指定一系列想要渲染的区域名称，将子应用ChildApp注册至根应用。
现在无论<Region name="sidebar">在任何位置渲染，区域内部会自动渲染ChildApp子应用。
单区域注册多个子应用
可以在同一区域注册多个子应用，如果你要控制渲染顺序，注册时可以指定weight参数，weight值越低，对应的子应用就会在前面渲染。
window.app.registerApp(ChildApp1, {
regions: ['sidebar'],
weight: 5,
});
window.app.registerApp(ChildApp2, {
regions: ['sidebar'],
weight: 10,
});
通过区域传递数据
区域也可以额外的props传递数据，子应用在需要之时可以通过RxJS观察对象形式访问数据。
数据可以传递到props上：
import React from 'react';
import { Region } from 'frint-react';
function MyComponent() {
const data = {};
return (
<div>
<Region name="sidebar" data={data} />
</div>
);
}
通过props传递的数据，可以随时变化，子应用也可以后续使用provider访问。
你可以在官方文档中了解更多。
代码分割
你可能会想，在全局变量window.app中定义了根应用的实例。
技巧
我们在Travix一直使用一项技巧，帮助我们將大型应用进行分包操作。
Webpack善于将打包文件快速分包成多个分片，但对于单个仓库来说，那只适用于源代码指定了唯一入口。
采用FrintJS的区域之后，我们无需知道区域渲染内容，只需要在正确的位置定义区域。
这样不同的团队可以在自己仓库中实现对应的子应用。
服务端职责
我们可以在服务端确定按需加载哪些子应用分包，浏览器加载完成分包后会通过访问全局window.app注册每个子应用。
服务端返回的应用大致是这样:
<!-- 公用库, 包括：React and FrintJS -->
<script src="./vendors.js"></script>
<!-- FrintJS 根应用 -->
<script src="./root.js"></script>
<!-- 动态生成的子应用列表 -->
<script src="./child-1.js"></script>
<script src="./child-2.js"></script>
<script src="./child-3.js"></script>
示例
要理解代码分割这个主题还需要另外一篇博文，现在你只需要查看我们github仓库上面的真实用例。
译者注
- 因译者水平有限，如有错误，欢迎指正交流
网友评论