前端译趣

Frintjs实战: 使用子应用和区域

2018-05-24  本文已影响33人  linc2046
Frintjs实战: 使用子应用和区域

引言

本文专注于使用Reactjs渲染FrintJS子应用至指定UI区域。

为了掌握本文,建议先阅读下面两篇文章:

何为区域

传统网站的内容包括像头部、底部、侧边栏,一般会根据区域放置对应的内容。

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仓库上面的真实用例。

译者注

原文链接

上一篇 下一篇

猜你喜欢

热点阅读