前端uix体系page页面生命周期

1. 页面生命周期介绍

下图说明了页面 Page 实例的生命周期（以/entry/mobile/work.w为例子）

1.1 打开页面过程说明

1. 加载页面资源文件 → 创建组件 → loading=true（显示加载遮罩）→ 派发onLoad事件
2. 下面开始两条线并行
   1. 加载自动加载的数据 → 派发onInitState事件（加载用户数据）→ loading=false（隐藏加载遮罩）
   2. 显示页面切换动画（用时300ms）→ 派发onShow事件
3. 上面两条线完成，渲染页面 → 派发onReady事件

1.2 图形说明

1. 上图中提到的数据组件，泛指不可视组件，包括数据集组件（restData），服务请求组件（serviceRequest），上下文组件（context）等

2. 注意上图中 loading 的变化，loading 等于 true 时，页面会有默认遮罩加载效果，可通过 this.state.loading 获取 loading 的值

1.3 事件列表

2 数据初始化事件

数据初始化事件 onInitState 是 uix 体系页面 page 组件新提供的事件，旨在统一管理数据的初始化，即不论是自动加载的数据，还是用户写代码加载的数据，都属于数据初始化。当数据初始化开始时，显示页面加载遮罩，当数据初始化完成时，关闭页面加载遮罩。

数据初始化事件不仅用于加载用户数据，返回值会写入state。作为状态数据。示例代码如下：

onPageInitState = async (event) => {
    let serviceInfo = await this.request({
        url: "/manager/services/info"
    });
    return serviceInfo.data;
}

在onReady事件中，执行 console.log(this.state);可看到state的内容，如下图所示

其中

• loading 和 data 是平台使用的 state 部分
  • loading 表示页面的 loading 状态
  • data 包括页面不可视组件的状态，展开后如下图所示
• name 和 label是数据初始化事件的返回值，写入了 state

3 特别说明

3.1 使用 transaction 优化渲染速度

如果在初始化过程中有大量修改数据的行为，为了性能需要使用 transaction，transaction 可以用来批量更新，在全部更新后才会通知观察者。示例代码如下：

import {transaction} from "../wxsys/lib/mobx/mobx-2.6.2.umd";

onPageInitState = async (event) => {
    let menus = await this.request({
        url: "/manager/menus"
    });
    transaction(() => {
        menus.data.forEach((func) => {
            this.comp("menuData").newData();
            this.comp("menuData").setValue("title", func.title);
        })
    });
}

3.2 自定义加载遮罩

可以在common.js中自定义加载遮罩

• 引入页面的Page

  • antdpro 引入

      import Page from '../comp/antdpro/components/Page/Page.react';
    

  • vantui 引入

      import Page from '../comp/vantui/components/Page/Page.react';
    

• 全局修改方案

    import React from 'react';
    import {Loading} from '@antmjs/vantui';
    //全局修改方案。页面自定义方案 按照标准react逻辑自己render关注this.state.loading状态即可
    Page.setDefaultLoading((props)=>{
        //传递的props有 pagePath  以及当前页面的props  可以据此做出不同页面的骨架屏方案。
        let pagePath = props.pagePath;
        return <Loading>{pagePath}</Loading>
    })