从Mobile8.0平台与微应用剖析RN组件生命周期

转载本文需注明出处：微信公众号EAWorld，违者必究。

前言：

随着时代的发展，我们越来越多的感受到app不再是一个‘孤岛’，而是围绕app主要业务建立起了移动生态圈。移动8.0为客户提供了从移动端、移动中台服务、移动运营管理三大维度立体地打造企业自己移动生态圈的方案，而本文我们的关注点在于移动端维度是如何在移动生态大放异彩的。

目录：

1、移动8.0移动端概述

2、移动8.0中微应用的实现方式

3、移动8.0中微应用的生命周期管理

4、展望

1.移动8.0移动端概述

相信大家在日常生活中使用App的时候，都有这样的体会，App的功能日益强大，我们不仅能从App中获取到它提供的主要服务，往往还能在App中获取到由它的主要业务衍生出来的众多服务，而这些服务可能彼此相关，也可能相互独立。

比如在门户App中加入了请假、办公、会议室、日程等功能，这些其实并不是一开始就固定在门户App中的功能，而是基于每个用户的信息动态配置的上去的，根据后台配置来控制消失、显示，并且这些功能可以是由多厂商、多团队提供的。

由此可见App的功能由单一变得复杂，这种改变并不是简单的功能叠加，而是围绕着应用主流业务的移动生态圈的构建，这其中我们需要解决不同团队之间的差异化问题。

将众多移动业务构建在一个稳定的移动生态圈中，是全面移动信息化背景下的新趋势，而这一理念的提出与实现可追溯到2016年微信生态中的微信小程序解决方案，到了2017年，风靡一时的微信‘跳一跳’小游戏让我们感受到小程序召之即来、麾之即去的无限魅力。

如今，随着移动Mobile8.0的发布，普元也有了自己的移动生态圈构建解决方案。

Mobile8.0移动端采用React Native的开发模式，利用了RN经济高效的方式来构建和维护跨平台，节省开发成本，兼容了大量React Native生态中的三方组件，同时支持用户自行集成三方组件，此外，Mobile8.0还兼容了HTML5、Cordova等主流框架的集成，提供了跨生态的优势。

那么微信中构成微信生态圈的是微信小程序，普元的Mobile8.0又是拿什么来构建自己的生态圈的呢？

Mobile8.0采用React Native技术作为客户端跨平台引擎，提供多Bundle的工程化支持，保障快速开发的同时，还能拥有良好用户体验。Mobile8.0构建的生态圈中业务聚合和管理的实现方式我们也将其称之为微应用，相信很多人都早已听说过，这其实并不是什么新概念了，对应的便是微信生态中的微信小程序。

2.移动8.0中微应用的实现方式

在Mobile8.0中，微应用是我们进行业务业务聚合及管理的最小粒度，本质上是一种开发、管理的模型，理论上微应用并不限定具体的开发语言和技术，只要实现了相应的微应用运行容器，我们就可以使用任何移动开发技术进行微应用的开发。

Mobile8.0微应用的蓝图中，平台应支持的微应用类型包括以下几个：

1. React-native微应用：使用React-native语言开发的微应用。
2. 原生微应用：使用iOS/Android原生言语开发的微应用。
3. H5微应用：使用HTML5技术开发的微应用，常见的开发框架有Vue,React等,H5-微应用按加载方式，还可以分为在线H5微应用和离线H5微应用。
4. Cordova微应用：使用Cordova技术开发的微应用。

但是目前已发布的普元Mobile8.0平台中的微应用只支持HTML5一种实现方式，在后续的版本中我们还会加入由React Native、安卓/Ios原生等技术实现的微应用，从而更具市场竞争力。

为了用户更快捷方便的开发微应用，Mobile8.0平台还提供了一套微应用开发框架，其集成了当下热门的Vue技术，并引入vant组件库。

说完了微应用的实现技术，但是由H5构建的微应用又是如何运行在React Native中的呢？

这便要说到实现微应用的核心-微应用容器了，微应用容器是门户应用也就是主应用能够运行微应用的核心。门户会根据微应用类型，使用对应的微应用容器会为每一个微应创建独立的运行环境。如下图所示：

H5微应用运行在H5容器中，H5容器根据平台不同有着不同的实现。Android平台使用其WebView，iOS上使用WKWebView。Android和iO在实现技术上虽略有不同，但其本质基本上是一样的。我们以Android端的实现方式为例进行说明。

我们从代码层面能更直观地分析门户App与微应用的关系。Mobile8.0平台下，在门户App中打开微应用相当简单，只需要像下面的示例代码中直接调用SDK提供的接口并将微应用的相关参数传递过去，便能跳转到对应微应用页面中。如果你仅满足于功能的开发，那么会使用这个接口就可以了；但是如果你更关心Mobile8.0底层做了哪些工作、微应用的实现机制，就得顺着它刨根问底了。

H5微应用运行在H5容器中，H5容器根据平台不同有着不同的实现。Android平台使用其WebView，iOS上使用WKWebView。Android和iO在实现技术上虽略有不同，但其本质基本上是一样的。我们以Android端的实现方式为例进行说明。

我们从代码层面能更直观地分析门户App与微应用的关系。Mobile8.0平台下，在门户App中打开微应用相当简单，只需要像下面的示例代码中直接调用SDK提供的接口并将微应用的相关参数传递过去，便能跳转到对应微应用页面中。如果你仅满足于功能的开发，那么会使用这个接口就可以了；但是如果你更关心Mobile8.0底层做了哪些工作、微应用的实现机制，就得顺着它刨根问底了。

  primeton.app.openWebview({
                url: item.h5Url,
                appId: item.microappId,
                subscribeKey: item.subscriptionKey,
                options: {
                    showActionBar: true,
                    actionBarColor: '#339FF4',
                    autoTitle: true,
                    needToken: true
                }
            })

（左右滑动查看全部代码）

到这我们难免会好奇，openwebview接口做了什么使我们能如此简单就能使用微应用？

同样的我们可以在源码中找到答案，openWebview接口其实只是Bundle中的一个函数，它的功能只是加载一个React Native页面组件H5ViewComponent，并带着参数跳转到该页面中。

primeton.app.openWebview = function(object){
    var url = "H5ViewComponent.js"//加载H5页面组件
    var __selfRequire = require;
var pageComponent = __selfRequire(url).pageComponent;
    _pmNavigator.push({//路由到该页面
        name: url,
        component: pageComponent,
        params: object
    });
}

（左右滑动查看全部代码）

跳转到H5页面组件后，便加载Native组件H5View，将参数进一步传递给该Native组件。这里的H5View组件是我们实现跨平台的关键，也是React Native与Android / iOS交互的桥梁。

export class pageComponent extends Component {
...
  render() {
        return (
            <View style={{ flex: 1 }}>
                <H5View url={this.state.url} 
                    showActionBar={this.state.showActionBar}
                    autoTitle={this.state.autoTitle} 
                    actionBarColor={this.state.actionBarColor}
                    title={this.state.title} 
                    needToken={this.state.needToken} 
                    ref="H5ViewRef" 
                    style={{ width: '100%', height: '100%'}}></H5View>
            </View>
        );
    }
}

（左右滑动查看全部代码）

通过调用Native组件我们便可以与Android或iOS原生层实现的微应用容器打交道。以Android为例，在安卓平台下我们使用Native组件H5View，实际上调用到的是由Android原生层封装的H5View。

但这个Android的H5View就是所谓的微应用容器了吗？

还不太准确，前面我们说到微应用容器在Android中是由webview实现的，而H5View是微应用容器的父容器。他们之间的关系如下图所示：

除了微应用容器，H5View还包含了两大模块，标题栏和底部菜单栏。

标题栏负责微应用内的页面导航，以及在关闭微应用时向主应用发送关闭微应用通知事件。由于微应用是集成在React Native工程中的一个页面组件，我们并不能在原生端主动关闭微应用，关闭事件是由React Native控制的，这里我们用到了React Native的原生组件DeviceEventEmitter来添加微应用关闭事件的监听。

webview是Android中微应用容器的具体实现，其内部封装了浏览器的内核，是android系统提供的用来显示网页的组件。拿到门户传递过来的参数后，webview通过加载微应用的url来打开对应的H5微应用，并根据参数中的配置信息将标题显示在标题栏中。

底部菜单栏默认处于关闭状态，点击标题栏右上角按钮时弹出，主要包括分享、收藏微应用、意见反馈等功能。

以上便是Mobile8.0中微应用的实现方式，为了代码安全H5View组件的源码已被集成到jar文件中，并且实际开发时也并不会直接与它接触，这里只是带大家了解其实现机制。

3.移动8.0中微应用的生命周期管理

上面我们介绍了Mobile8.0中微应用的实现方式，简单来说它是通过将Native组件放到一个H5ViewComponent组件中进行管理，从而实现微应用机制的。也就是说，只要我们能开发出对应的Native组件及底层实现，最终通过类似H5ViewComponent组件的容器进行管理，我们可以使用任何语言、任何技术开发微应用。

H5ViewComponent组件是由React Native代码编写并放入bundle中，在使用时隐式调用，所以开发的时候并不会察觉到这个组件的存在。既然它是一个React Native组件，那么它和普通的组件其实也并无二异，该具有的生命周期它也全有，接下来我们分析H5ViewComponent组件源码，窥探它在各个生命周期阶段做了什么。

在门户App中调用primeton.app.openWebview打开微应用，实例化H5ViewComponent组件并进入路由栈，微应用的生命周期由此开始。

H5ViewComponent组件的实例化阶段我们通过defaultProps 为其设置默认属性，如果调用openWebview时传递的参数为空，微应用容器将按下面配置加载微应用。

static defaultProps = {
        appId: '',
        url: '',
        options: {
            showActionBar: true,
            actionBarColor: '#5376AB',
            title: "我的页面",
            autoTitle: true,
            needToken: false
        }
    }

（左右滑动查看全部代码）

紧接着constructor将openwebview传递的参数装配到state中，以便在运行期进行微应用参数的动态修改（但其实在H5实现的版本中，并没有在运行期进行修改的情况）。

constructor(props) {
        super(props);
        this.state = {
            appId: this.props.appId,
            url: this.props.url,
            showActionBar: this.props.options.showActionBar,
            actionBarColor: this.props.options.actionBarColor,
            title: this.props.options.title,
            autoTitle: this.props.options.autoTitle,
            needToken: this.props.options.needToken
        };
        page = this;
    }

（左右滑动查看全部代码）

在componentWillMont中，我们添加了安卓物理返回键事件的监听以及在Android/iOS原生层封装的H5View关闭事件的监听。这里我们虽然使用的是componentWillMont，但这个生命周期并不推荐大家使用，因为React16.3版本以后componentWillMount及其他两个生命周期函数就被标识为不安全的生命周期函数，在未来的版本中我们也会考虑将其迁移至componentDidMount里去做这些事。

componentWillMount() {
        BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        this.listener = DeviceEventEmitter.addListener('H5WebViewClose_Event', _H5WebViewClose);
    }

（左右滑动查看全部代码）

第一次render后H5ViewComponent组件被挂载到DOM节点上，我们才真正的看到渲染出来的微应用界面。

在运行期间H5微应用没有与门户App信息交互动态刷新的过程，微应用的页面跳转也是在原生层进行的。当用户关闭微应用时，原生层向React Native发送关闭微应用事件通知，触发关闭微应用事件并将H5ViewComponent移出路由栈，此时H5ViewComponent组件进入componentWillUnmount周期，即将从DOM节点树卸载H5ViewComponent容器组件。

这一周期便是移除监听事件，包括安卓物理返回和微应用关闭事件，避免不必要的错误。

 componentWillUnmount() {
        BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
        // 移除监听的关闭事件
        if (this.listener) {
            this.listener.remove();
        }
    }

（左右滑动查看全部代码）

4.展望

移动互联在不经意间，已经正式迈入了第二个十年。第二个十年对于移动互联来讲，已经迈入到成熟期。野蛮的、高速的发展时期已经一去不复返，仅仅靠一个App就能成为高估值的公司的时代也已经不复存在，依托多团队模型、让更多的移动业务在生态中发展起来，全面推进企业移动信息化，成为我们移动平台建设的新目标。

最后，如果你有更好的移动生态构建方案，欢迎在评论区讨论。