refactor: app and page lifecycle by SoloJiang · Pull Request #1927 · alibaba/rax

SoloJiang · 2020-06-22T15:22:28Z

支持应用级生命周期：

小程序
Web framework App: onLaunch/onError
PHA

支持 withPageLifeCycle

小程序
Web framework App
PHA

支持小程序运行时 withRouter

SoloJiang · 2020-06-22T15:32:29Z

应用级使用方法：

// app.js
import { runApp } from 'rax-app';
import appConfig from './app.json';

runApp(appConfig, {
  dynamicConfig: true,
  onLaunch(options) {
    
  },
  onShow() {
    
  },
  onHide() {
    
  },
  onError(err) {
    
  },
  onTabItem({ from, path, text, index }) {
    
  }
});

SoloJiang · 2020-06-22T15:33:09Z

页面级使用方法：

// 函数组件
import { createElement } from 'rax';
import { usePageShow } from 'rax-app';

function Home() {
  usePageShow(() => {
    // 首次调用，回调函数会在组件完成渲染后执行
  });
  usePageHide(() => {
    
  });
}

// Class Component
import { createElement, Component } from 'rax';
import { withPageLifeCycle } from 'rax-app';

class Home extends Component {
  onShow() {
    // 首次调用，函数在组件 constructor 之后调用
  }
}

export default withPageLifeCycle(Home);

chenjun1011 · 2020-07-17T04:06:25Z

packages/rax-app/src/page.js

+          // In MiniApp platform show event will trigger after addPageLifeCycle, so it needn't be execute in constructor
+          this.onShow();
+        }
+        addPageLifeCycle(SHOW, this.onShow.bind(this));


如果是！isMiniAppPlatform 会执行两边 onShow？

时机不同，在 !isMiniAppPlatform 的环境下，constructor 的时候已经错过了页面 onShow 的时机，这里是最早执行 onShow 的时候了

SoloJiang · 2020-07-20T06:19:16Z

以下功能下一期添加：

默认保活和超过 5 个保活页面自动销毁机制
tabbar 的 onTabItemClick 事件

chenbin92 · 2020-07-20T06:53:36Z

packages/rax-app/src/history.js

@@ -0,0 +1,12 @@
+import { isMiniAppPlatform } from './env';
+
+let history;


路由这块可以考虑将 createHistory 的逻辑从 runApp 也抽离到这个文件，是否更合理一些

chenbin92 · 2020-07-20T07:05:33Z

packages/rax-app/src/router.js

+
+let withRouter;
+
+if (isMiniApp || isWeChatMiniProgram || isByteDanceMicroApp) {


可以直接使用上面封装的 isMiniAppPlatform ？https://github.com/alibaba/rax/pull/1927/files#diff-307cc0431c8b94324dcb47f5d0595ff4R3

chenbin92 · 2020-07-20T07:07:33Z

packages/rax-app/src/router.js

@@ -0,0 +1,30 @@
+import { createElement } from 'rax';
+import { withRouter as webSPAWithRouter } from 'rax-use-router';


这个 router 不只是针对 webSPA 的吧？如果是感觉不太语义。

chenbin92 · 2020-07-20T07:08:21Z

packages/rax-app/src/router.js

+import { withRouter as webSPAWithRouter } from 'rax-use-router';
+import { isMiniApp, isWeChatMiniProgram, isByteDanceMicroApp } from 'universal-env';
+
+let withRouter;


直接 let withRouter = webSPAWithRouter 下面逻辑就不用 else 了

chenbin92 · 2020-07-20T07:11:32Z

packages/rax-app/src/runApp.js

+    throw new Error('Error: the runApp method second param can only be Object.');
  }
+
+  const pageProps = handleDynamicConfig(dynamicConfig);


这里有点没理解，如果 dynamicConfig 为 false，为什么要把 dynamicConfig 当做 pageProps，场景是？

这个是兼容以前的逻辑，以前 runApp 第二个参数是 pageProps，后面 raxjs 就直接干掉这个逻辑就好了

chenbin92 · 2020-07-20T07:12:16Z

packages/rax-app/src/runApp.js

-
-  // In MiniApp, it needn't return App Component
-  if (isMiniApp || isWeChatMiniProgram) {
+  } else if (isMiniApp || isWeChatMiniProgram || isByteDanceMicroApp) {


使用 isMiniAppPlatform，其他地方也可用统一改下

chenbin92

Reviewed

chenbin92 · 2020-07-20T08:10:10Z

packages/rax-app/src/app.js

  window.addEventListener('appshare', ({ context, shareInfo, options }) => {
    emit(SHARE, context, shareInfo, options);
  });
+  window.addEventListener('tabitemclick', ({ options, context }) => {


window 在 SSR 下是无效的，需要考虑下吗

chenbin92 · 2020-07-20T08:46:56Z

packages/rax-app/src/app.js

+        // Emit app hide
+        emit(HIDE);
+        // Emit page hide
+        pageEmit(HIDE, router.current.path);


这个文件相关的 pageEmit 是不是放到 page.js 合理些？

这个是 history.listen 回调的逻辑，可能没法拆过去

要在 app 启动之后开始监听

chenbin92 · 2020-07-20T08:49:46Z

packages/rax-app/src/app.js

+      }
+    }
+  });
+  // Emit Web lifeCycles


Emit error lifeCycles ？

chenbin92 · 2020-07-20T09:44:35Z

packages/rax-app/src/runApp.js

+
  for (let i = 0, l = routes.length; i < l; i++) {
    if (fullpath === routes[i].path || routes[i].regexp && routes[i].regexp.test(fullpath)) {
      initialComponent = routes[i].component;


下一行如果是 class 组件直接跳过了？

这边所有的页面都包了一层 Wrapper :
const importComponent = `() => () => interopRequire(require('${getDepPath(route.source, this.rootContext)}'))`;

chenbin92 · 2020-07-20T12:10:56Z

packages/rax-app/src/app.js

+    // Get history
+    const history = getHistory();
+    // The app switches from foreground to background
+    if (router.current && history.pathname === router.current.path) {


history 上应该没有 pathname，这里是 history.location.pathname ?

chenbin92 · 2020-07-20T12:12:26Z

packages/rax-app/src/runApp.js

+          // Flow router info
+          router.prev = router.current;
+          router.current = {
+            path: location.pathname,


这里改成的 key 是 pathname 会不会更语义点，在对比的时候也是 history.location.pathname === router.current.pathname ?

https://github.com/alibaba/rax/pull/1927/files#diff-b636603ce2a0fe89646dcd00e6d265ceR181

chenbin92 · 2020-07-20T12:21:02Z

packages/rax-app/src/app.js

+    console.log('@weex-module/globalEvent error: ' + err);
+  }
+} else if (!isUndef(document) && !isUndef(window)) {
+  document.addEventListener('visibilitychange', function() {


visibilitychange 事件现在还是 Recommendation 阶段，Safari 并未完全按照规范实现，即在 Safari 切换 Tab 时不会触发

Safari 后续再兼容

chenbin92 · 2020-07-21T03:13:27Z

packages/rax-app/src/runApp.js


      // Emit app launch cycle.
-      emit('launch');
+      appEmit(LAUNCH);


在小程序下逻辑走不到这里，怎么触发？https://github.com/alibaba/rax/pull/1927/files#diff-b636603ce2a0fe89646dcd00e6d265ceR149

小程序自己有 app lanuch 的钩子，我用 window trigger 的

chenjun1011 · 2020-07-23T06:09:41Z

packages/rax-app/src/runApp.js


-export default function runApp(appConfig, pageProps = {}) {
+function handleDynamicConfig(config) {
+  if (config.dynamicConfig) {


没有 config.dynamicConfig 就先 return 吧

SoloJiang added 2 commits June 22, 2020 18:17

feat: add app lifecycle

0c537ca

feat: support more extention for runApp

b43dd1d

SoloJiang requested review from ChrisCindy, boiawang, chenjun1011, fyangstudio, imsobear and wssgcg1213 June 22, 2020 15:35

SoloJiang changed the title ~~refactor: app and page lifecycle~~ [WIP]refactor: app and page lifecycle Jun 22, 2020

Merge branch 'master' into refactor-lifecycle

c5ed7fc

weekly-digest bot mentioned this pull request Jul 12, 2020

Weekly Digest (5 July, 2020 - 12 July, 2020) #1955

Closed

feat: finish all lifecycle

e7a9c1b

SoloJiang changed the title ~~[WIP]refactor: app and page lifecycle~~ refactor: app and page lifecycle Jul 14, 2020

chore: opitimize code

cf91736

chenjun1011 reviewed Jul 17, 2020

View reviewed changes

chenjun1011 approved these changes Jul 17, 2020

View reviewed changes

weekly-digest bot mentioned this pull request Jul 19, 2020

Weekly Digest (12 July, 2020 - 19 July, 2020) #1958

Closed

chenbin92 reviewed Jul 20, 2020

View reviewed changes

packages/rax-app/src/app.js Outdated

}

}

});

// Emit Web lifeCycles

Copy link

Collaborator

chenbin92 Jul 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Emit error lifeCycles ？

SoloJiang added 2 commits July 20, 2020 17:04

chore: opitimize code

a2ed73d

chore: opitimize code

fec6431

chenbin92 reviewed Jul 20, 2020

View reviewed changes

chenbin92 reviewed Jul 21, 2020

View reviewed changes

SoloJiang added 2 commits July 23, 2020 11:08

chore: optimize code

6471c7b

chore: optimize code

ebf25df

chenjun1011 reviewed Jul 23, 2020

View reviewed changes

chenjun1011 approved these changes Jul 23, 2020

View reviewed changes

chenbin92 approved these changes Jul 23, 2020

View reviewed changes

chore: bump version

ca55c4e

imsobear approved these changes Jul 23, 2020

View reviewed changes

imsobear merged commit 984b0ec into master Jul 23, 2020

imsobear deleted the refactor-lifecycle branch July 23, 2020 06:49

weekly-digest bot mentioned this pull request Jul 26, 2020

Weekly Digest (19 July, 2020 - 26 July, 2020) #1961

Closed

		@@ -0,0 +1,12 @@
		import { isMiniAppPlatform } from './env';

		let history;


		let withRouter;

		if (isMiniApp \|\| isWeChatMiniProgram \|\| isByteDanceMicroApp) {

		@@ -0,0 +1,30 @@
		import { createElement } from 'rax';
		import { withRouter as webSPAWithRouter } from 'rax-use-router';

Conversation

SoloJiang commented Jun 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SoloJiang commented Jun 22, 2020

Uh oh!

SoloJiang commented Jun 22, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SoloJiang commented Jul 20, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chenbin92 Jul 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chenbin92 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chenbin92 Jul 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SoloJiang commented Jun 22, 2020 •

edited

Loading

chenbin92 Jul 20, 2020 •

edited

Loading

chenbin92 Jul 20, 2020 •

edited

Loading