@mpxjs/core 2.9.58 → 2.9.62

package/@types/index.d.ts

@@ -34,17 +34,17 @@ type Data = object | (() => object)
 export type PropType<T> = {
   __type: T
 } & (
-  T extends String
+    T extends String
     ? StringConstructor
     : T extends number
-      ? NumberConstructor
-      : T extends boolean
-        ? BooleanConstructor
-        : T extends any[]
-          ? ArrayConstructor
-          : T extends object
-            ? ObjectConstructor
-            : never
+    ? NumberConstructor
+    : T extends boolean
+    ? BooleanConstructor
+    : T extends any[]
+    ? ArrayConstructor
+    : T extends object
+    ? ObjectConstructor
+    : never
   )
 
 type FullPropType<T> = {
@@ -85,10 +85,10 @@ type GetDataType<T> = T extends () => any ? ReturnType<T> : T
 
 type GetPropsType<T extends Properties> = {
   readonly [K in keyof T]: T[K] extends FullPropType<infer V>
-    ? V
-    : T[K] extends PropType<infer V>
-      ? V
-      : WechatMiniprogram.Component.PropertyToData<T[K]>
+  ? V
+  : T[K] extends PropType<infer V>
+  ? V
+  : WechatMiniprogram.Component.PropertyToData<T[K]>
 }
 
 type RequiredPropertyNames<T> = {
@@ -246,7 +246,7 @@ export function injectMixins (mixins: object | Array<object>, options?: MixinTyp
 // export function watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
 interface AnyConstructor {
-  new (...args: any[]): any
+  new(...args: any[]): any
 
   prototype: any
 }
@@ -266,6 +266,7 @@ interface MpxConfig {
   setDataHandler: (data: object, target: ComponentIns<{}, {}, {}, {}, []>) => any | null
   forceFlushSync: boolean,
   webRouteConfig: object,
+  webConfig: object,
   webviewConfig?: WebviewConfig
 }
 
@@ -285,9 +286,9 @@ export type Plugin = PluginInstallFunction | {
   install: PluginInstallFunction
 }
 
-export type PluginFunction<T extends Plugin> = T extends PluginInstallFunction ? T : T extends { install: infer U } ? U : never;
+export type PluginFunction<T extends Plugin> = T extends PluginInstallFunction ? T : T extends { install: infer U } ? U : never
 
-export type PluginFunctionParams<T extends PluginInstallFunction> = T extends (app: any, ...args: infer P) => any ? P : [];
+export type PluginFunctionParams<T extends PluginInstallFunction> = T extends (app: any, ...args: infer P) => any ? P : []
 
 export interface Mpx {
   getMixin: typeof getMixin
@@ -297,7 +298,7 @@ export interface Mpx {
   observable: typeof observable
   watch: typeof watch
 
-  use <T extends Plugin = Plugin>(plugin: T, ...rest: PluginFunctionParams<PluginFunction<T>>): Mpx
+  use<T extends Plugin = Plugin> (plugin: T, ...rest: PluginFunctionParams<PluginFunction<T>>): Mpx
 
   implement (name: string, options?: ImplementOptions): void
 
@@ -376,8 +377,8 @@ export interface RefUnwrapBailTypes {
 export type UnwrapRef<T> = T extends ShallowRef<infer V>
   ? V
   : T extends Ref<infer V>
-    ? UnwrapRefSimple<V>
-    : UnwrapRefSimple<T>
+  ? UnwrapRefSimple<V>
+  : UnwrapRefSimple<T>
 
 export type UnwrapRefSimple<T> = T extends | Function
   | CollectionTypes
@@ -386,10 +387,10 @@ export type UnwrapRefSimple<T> = T extends | Function
   | RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
   ? T
   : T extends Array<any>
-    ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
-    : T extends object & { [ShallowReactiveMarker]?: never } // not a shallowReactive
-      ? { [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]> }
-      : T
+  ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
+  : T extends object & { [ShallowReactiveMarker]?: never } // not a shallowReactive
+  ? { [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]> }
+  : T
 
 // If the the type T accepts type "any", output type Y, otherwise output type N.
 // https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
@@ -572,13 +573,9 @@ export function watch<T extends Reactive<object>> ( // for reactive value
 ): () => void
 
 export function effectScope (detached?: boolean): EffectScope
-
 export function getCurrentScope (): EffectScope | undefined
-
 export function onScopeDispose (fn: () => void): void
-
 export function set<T extends object> (target: T, key: string | number, value: any): void
-
 export function del<T extends object> (target: T, key: keyof T): void
 
 // nextTick
@@ -586,43 +583,25 @@ export function nextTick (fn: () => any): void
 
 // lifecycle
 export function onBeforeMount (callback: () => void): void
-
 export function onMounted (callback: () => void): void
-
 export function onBeforeUpdate (callback: () => void): void
-
 export function onUpdated (callback: () => void): void
-
 export function onBeforeUnmount (callback: () => void): void
-
 export function onUnmounted (callback: () => void): void
-
 export function onLoad<T extends Record<string, string | undefined>> (callback: (query: T) => void): void
-
-// wechat dose not have generics
-// export function onLoad (callback: WechatMiniprogram.Page.ILifetime['onLoad']): void
-
 export function onShow (callback: WechatMiniprogram.Page.ILifetime['onShow']): void
-
 export function onHide (callback: WechatMiniprogram.Page.ILifetime['onHide']): void
-
 export function onResize (callback: WechatMiniprogram.Page.ILifetime['onResize']): void
-
 export function onPullDownRefresh (callback: WechatMiniprogram.Page.ILifetime['onPullDownRefresh']): void
-
 export function onReachBottom (callback: WechatMiniprogram.Page.ILifetime['onReachBottom']): void
-
 export function onShareAppMessage (callback: WechatMiniprogram.Page.ILifetime['onShareAppMessage']): void
-
 export function onShareTimeline (callback: WechatMiniprogram.Page.ILifetime['onShareTimeline']): void
-
 export function onAddToFavorites (callback: WechatMiniprogram.Page.ILifetime['onAddToFavorites']): void
-
 export function onPageScroll (callback: WechatMiniprogram.Page.ILifetime['onPageScroll']): void
-
 export function onTabItemTap (callback: WechatMiniprogram.Page.ILifetime['onTabItemTap']): void
-
 export function onSaveExitState (callback: () => void): void
+export function onServerPrefetch (callback: () => any): void
+export function onReactHooksExec (callback: () => void): void
 
 // get instance
 export function getCurrentInstance<T extends ComponentIns<{}, {}, {}>> (): { proxy: T, [x: string]: any }
@@ -672,6 +651,8 @@ export const ONLOAD: string
 export const ONSHOW: string
 export const ONHIDE: string
 export const ONRESIZE: string
+export const SERVERPREFETCH: string
+export const REACTHOOKSEXEC: string
 
 declare global {
   const defineProps: (<T extends Properties = {}>(props: T) => Readonly<GetPropsType<T>>) & (<T>() => Readonly<T>)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.58",
+  "version": "2.9.62",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.58",
+    "@mpxjs/utils": "^2.9.59",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -31,6 +31,9 @@
     "@react-navigation/native-stack": "^6.9.26",
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": "^2.19.0",
+    "react-native-safe-area-context": "^4.10.1",
+    "react-native-webview": "^13.10.5",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.27.2",
@@ -63,6 +66,15 @@
     },
     "@ant-design/react-native": {
       "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    },
+    "react-native-webview": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -81,5 +93,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "49fe4c4bc46ff4bf87cd8adde37981d4b4134aa7"
+  "gitHead": "c31a343e7ef2c1c1585002752d8c50f016a858ae"
 }

package/src/convertor/wxToReact.js

@@ -5,7 +5,7 @@ import {
 import { implemented } from '../core/implement'
 
 // 暂不支持的wx选项，后期需要各种花式支持
-const unsupported = ['relations', 'moved', 'definitionFilter', 'onShareAppMessage', 'options', 'behaviors', 'externalClasses']
+const unsupported = ['relations', 'moved', 'definitionFilter', 'onShareAppMessage', 'options']
 
 function convertErrorDesc (key) {
   error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)

package/src/core/innerLifecycle.js

@@ -11,6 +11,7 @@ export const ONSHOW = '__onShow__'
 export const ONHIDE = '__onHide__'
 export const ONRESIZE = '__onResize__'
 export const SERVERPREFETCH = '__serverPrefetch__'
+export const REACTHOOKSEXEC = '__reactHooksExec__'
 
 export const INNER_LIFECYCLES = [
   BEFORECREATE,
@@ -21,6 +22,7 @@ export const INNER_LIFECYCLES = [
   UPDATED,
   BEFOREUNMOUNT,
   SERVERPREFETCH,
+  REACTHOOKSEXEC,
   UNMOUNTED,
   ONLOAD,
   ONSHOW,

package/src/core/mergeOptions.js

@@ -354,7 +354,7 @@ function transformHOOKS (options) {
     const componentHooksMap = makeMap(convertRule.lifecycle.component)
     for (const key in options) {
       // 使用Component创建page实例，页面专属生命周期&自定义方法需写在methods内部
-      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && key !== 'serverPrefetch' && !componentHooksMap[key]) {
+      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && !componentHooksMap[key]) {
         if (!options.methods) options.methods = {}
         options.methods[key] = options[key]
         delete options[key]

package/src/core/proxy.js

@@ -42,7 +42,8 @@ import {
   ONLOAD,
   ONSHOW,
   ONHIDE,
-  ONRESIZE
+  ONRESIZE,
+  REACTHOOKSEXEC
 } from './innerLifecycle'
 import contextMap from '../dynamic/vnode/context'
 import { getAst } from '../dynamic/astCache'
@@ -498,11 +499,28 @@ export default class MpxProxy {
     return result
   }
 
-  doRenderWithVNode (vnode) {
+  doRenderWithVNode (vnode, cb) {
+    const renderTask = this.createRenderTask()
+    let callback = cb
+    // mounted之后才会触发BEFOREUPDATE/UPDATED
+    if (this.isMounted()) {
+      this.callHook(BEFOREUPDATE)
+      callback = () => {
+        cb && cb()
+        this.callHook(UPDATED)
+        renderTask && renderTask.resolve()
+      }
+    }
     if (!this._vnode) {
-      this.target.__render({ r: vnode })
+      this._vnode = diffAndCloneA(vnode).clone
+      pauseTracking()
+      // 触发渲染时暂停数据响应追踪，避免误收集到子组件的数据依赖
+      this.target.__render({ r: vnode }, callback)
+      resetTracking()
     } else {
-      let diffPath = diffAndCloneA(vnode, this._vnode).diffData
+      const result = diffAndCloneA(vnode, this._vnode)
+      this._vnode = result.clone
+      let diffPath = result.diffData
       if (!isEmptyObject(diffPath)) {
         // 构造 diffPath 数据
         diffPath = Object.keys(diffPath).reduce((preVal, curVal) => {
@@ -510,11 +528,11 @@ export default class MpxProxy {
           preVal[key] = diffPath[curVal]
           return preVal
         }, {})
-        this.target.__render(diffPath)
+        pauseTracking()
+        this.target.__render(diffPath, callback)
+        resetTracking()
       }
     }
-    // 缓存本地的 vnode 用以下一次 diff
-    this._vnode = diffAndCloneA(vnode).clone
   }
 
   doRender (data, cb) {
@@ -734,6 +752,7 @@ export const onShow = createHook(ONSHOW)
 export const onHide = createHook(ONHIDE)
 export const onResize = createHook(ONRESIZE)
 export const onServerPrefetch = createHook(SERVERPREFETCH)
+export const onReactHooksExec = createHook(REACTHOOKSEXEC)
 export const onPullDownRefresh = createHook('__onPullDownRefresh__')
 export const onReachBottom = createHook('__onReachBottom__')
 export const onShareAppMessage = createHook('__onShareAppMessage__')

package/src/index.js

@@ -29,11 +29,12 @@ export {
   UPDATED,
   BEFOREUNMOUNT,
   UNMOUNTED,
-  SERVERPREFETCH,
   ONLOAD,
   ONSHOW,
   ONHIDE,
-  ONRESIZE
+  ONRESIZE,
+  SERVERPREFETCH,
+  REACTHOOKSEXEC
 } from './core/innerLifecycle'
 
 export {
@@ -43,7 +44,6 @@ export {
   onUpdated,
   onBeforeUnmount,
   onUnmounted,
-  onServerPrefetch,
   onLoad,
   onShow,
   onHide,
@@ -55,7 +55,9 @@ export {
   onAddToFavorites,
   onPageScroll,
   onTabItemTap,
-  onSaveExitState
+  onSaveExitState,
+  onServerPrefetch,
+  onReactHooksExec
 } from './core/proxy'
 
 export { getMixin } from './core/mergeOptions'
@@ -140,15 +142,16 @@ Mpx.config = {
   setDataHandler: null,
   forceFlushSync: false,
   webRouteConfig: {},
+  webConfig: {},
   /*
     支持两个属性
     hostWhitelists Array 类型 支持h5域名白名单安全校验
     apiImplementations webview JSSDK接口 例如getlocation
    */
   webviewConfig: {},
-   /**
-   * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
-   */
+  /**
+  * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
+  */
   rnConfig: {}
 }
 

package/src/platform/builtInMixins/directiveHelperMixin.ios.js

@@ -1,14 +1,8 @@
-import { warn, type } from '@mpxjs/utils'
 export default function directiveHelperMixin () {
   return {
     methods: {
       __getWxKey (item, key) {
-        const value = key === '*this' ? item : item[key]
-        if (typeof value === 'string' || typeof value === 'number') {
-          return value
-        } else {
-          warn(`wx:key's value should return a string or a number, received: ${type(value)}`, this.__mpxProxy.options.mpxFileResource)
-        }
+        return key === '*this' ? item : item[key]
       }
     }
   }

package/src/platform/builtInMixins/refsMixin.ios.js

@@ -57,13 +57,15 @@ export default function getRefsMixin () {
         })
       },
       __getRefVal (key) {
-        if (!this.__refs[key]) {
-          this.__refs[key] = []
+        return (instance) => {
+          if (instance) {
+            this.__refs[key] = this.__refs[key] || []
+            this.__refs[key].push(instance)
+          }
         }
-        return (instance) => instance && this.__refs[key].push(instance)
       },
       __selectRef (selector, refType, all = false) {
-        const splitedSelector = selector.match(/(#|\.)?\w+/g) || []
+        const splitedSelector = selector.match(/(#|\.)?[^.#]+/g) || []
         const refsArr = splitedSelector.map(selector => {
           const selectorMap = this.__selectorMap?.value[selector] || []
           const res = []

package/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -1,8 +1,8 @@
-import { isObject, isArray, dash2hump, isFunction, isEmptyObject } from '@mpxjs/utils'
+import { isObject, isArray, dash2hump, isFunction } from '@mpxjs/utils'
 import { Dimensions } from 'react-native'
 
-function concat (a, b) {
-  return a ? b ? (a + ' ' + b) : a : (b || '')
+function concat (a = '', b = '') {
+  return a ? b ? (a + ' ' + b) : a : b
 }
 
 function stringifyArray (value) {
@@ -44,7 +44,7 @@ const propertyDelimiter = /:(.+)/
 const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
 const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
 
-function parseStyleText (cssText) {
+function parseStyleText (cssText = '') {
   const res = {}
   const arr = cssText.split(listDelimiter)
   for (let i = 0; i < arr.length; i++) {
@@ -110,7 +110,8 @@ export default function styleHelperMixin (type) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
-        const result = []
+        // todo 每次返回新对象会导致react memo优化失效，需要考虑优化手段
+        const result = {}
         const classMap = {}
         if (type === 'page' && isFunction(global.__getAppClassMap)) {
           Object.assign(classMap, global.__getAppClassMap.call(this))
@@ -118,22 +119,25 @@ export default function styleHelperMixin (type) {
         if (isFunction(this.__getClassMap)) {
           Object.assign(classMap, this.__getClassMap())
         }
-        if ((staticClass || dynamicClass) && !isEmptyObject(classMap)) {
+        if (staticClass || dynamicClass) {
           const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
-          classString.split(' ').forEach((className) => {
+          classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
-              result.push(classMap[className])
+              Object.assign(result, classMap[className])
+            } else if (this.props[className] && isObject(this.props[className])) {
+              // externalClasses必定以对象形式传递下来
+              Object.assign(result, this.props[className])
             }
           })
         }
 
         if (staticStyle || dynamicStyle) {
           const styleObj = Object.assign(parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
-          result.push(transformStyleObj(this, styleObj))
+          Object.assign(result, transformStyleObj(this, styleObj))
         }
 
         if (show === false) {
-          result.push({
+          Object.assign(result, {
             display: 'none'
           })
         }

package/src/platform/createApp.ios.js

@@ -40,7 +40,7 @@ function createAppInstance (appData) {
 export default function createApp (option, config = {}) {
   const appData = {}
 
-  const { NavigationContainer, createNavigationContainerRef, createNativeStackNavigator } = global.__navigationHelper
+  const { NavigationContainer, createNavigationContainerRef, createNativeStackNavigator, SafeAreaProvider } = global.__navigationHelper
   // app选项目前不需要进行转换
   const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
@@ -114,13 +114,13 @@ export default function createApp (option, config = {}) {
         if (currentState === 'active') {
           global.__mpxAppCbs.show.forEach((cb) => {
             cb(options)
-            global.__mpxAppFocusedState.value = 'show'
           })
-        } else if (currentState === 'background') {
+          global.__mpxAppFocusedState.value = 'show'
+        } else if (currentState === 'inactive') {
           global.__mpxAppCbs.hide.forEach((cb) => {
             cb()
-            global.__mpxAppFocusedState.value = 'hide'
           })
+          global.__mpxAppFocusedState.value = 'hide'
         }
       })
 
@@ -133,22 +133,25 @@ export default function createApp (option, config = {}) {
         global.__mpxAppFocusedState.value = `resize${count++}`
       })
       return () => {
-        changeSubscription()
+        changeSubscription && changeSubscription.remove()
         resizeSubScription && resizeSubScription.remove()
       }
     }, [])
 
-    return createElement(NavigationContainer,
-      {
-        ref: navigationRef,
-        onStateChange,
-        onUnhandledAction
-      },
-      createElement(Stack.Navigator,
+    return createElement(SafeAreaProvider,
+      null,
+      createElement(NavigationContainer,
         {
-          initialRouteName: firstPage
+          ref: navigationRef,
+          onStateChange,
+          onUnhandledAction
         },
-        ...pageScreens
+        createElement(Stack.Navigator,
+          {
+            initialRouteName: firstPage
+          },
+          ...pageScreens
+        )
       )
     )
   })

package/src/platform/patch/react/getDefaultOptions.ios.js

@@ -1,11 +1,11 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../../observer/effect'
 import { watch } from '../../../observer/watch'
-import { reactive, set } from '../../../observer/reactive'
+import { reactive, set, del } from '../../../observer/reactive'
 import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
-import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE } from '../../../core/innerLifecycle'
+import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE, REACTHOOKSEXEC } from '../../../core/innerLifecycle'
 import mergeOptions from '../../../core/mergeOptions'
 import { queueJob } from '../../../observer/scheduler'
 import { createSelectorQuery } from '@mpxjs/api-proxy'
@@ -24,20 +24,7 @@ function getSystemInfo () {
   }
 }
 
-function getRootProps (props) {
-  const rootProps = {}
-  for (const key in props) {
-    if (hasOwn(props, key)) {
-      const match = /^(bind|catch|capture-bind|capture-catch|style):?(.*?)(?:\.(.*))?$/.exec(key)
-      if (match) {
-        rootProps[key] = props[key]
-      }
-    }
-  }
-  return rootProps
-}
-
-function createEffect (proxy, components, props) {
+function createEffect (proxy, components) {
   const update = proxy.update = () => {
     // pre render for props update
     if (proxy.propsUpdatedFlag) {
@@ -57,7 +44,9 @@ function createEffect (proxy, components, props) {
     return components[tagName] || getByPath(ReactNative, tagName)
   }
   proxy.effect = new ReactiveEffect(() => {
-    return proxy.target.__injectedRender(createElement, getComponent, getRootProps(props))
+    // reset instance
+    proxy.target.__resetInstance()
+    return proxy.target.__injectedRender(createElement, getComponent, proxy.target.__getRootProps())
   }, () => queueJob(update), proxy.scope)
 }
 
@@ -67,8 +56,8 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
     },
     __getProps () {
-      const propsData = {}
       const props = propsRef.current
+      const propsData = {}
       Object.keys(validProps).forEach((key) => {
         if (hasOwn(props, key)) {
           propsData[key] = props[key]
@@ -85,6 +74,23 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       })
       return propsData
     },
+    __getRootProps () {
+      const props = propsRef.current
+      const rootProps = {}
+      for (const key in props) {
+        if (hasOwn(props, key)) {
+          const match = /^(bind|catch|capture-bind|capture-catch|style):?(.*?)(?:\.(.*))?$/.exec(key)
+          if (match) {
+            rootProps[key] = props[key]
+          }
+        }
+      }
+      return rootProps
+    },
+    __resetInstance () {
+      this.__refs = {}
+      this.__dispatchedSlotSet = new WeakSet()
+    },
     __getSlot (name) {
       const { children } = propsRef.current
       if (children) {
@@ -185,6 +191,12 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
         return props.id
       },
       enumerable: true
+    },
+    props: {
+      get () {
+        return propsRef.current
+      },
+      enumerable: true
     }
   })
 
@@ -198,17 +210,13 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   const proxy = instance.__mpxProxy = new MpxProxy(rawOptions, instance)
   proxy.created()
 
-  if (type === 'page') {
-    proxy.callHook(ONLOAD, [props.route.params || {}])
-  }
-
   Object.assign(proxy, {
     onStoreChange: null,
     // eslint-disable-next-line symbol-description
     stateVersion: Symbol(),
     subscribe: (onStoreChange) => {
       if (!proxy.effect) {
-        createEffect(proxy, components, propsRef.current)
+        createEffect(proxy, components)
         // eslint-disable-next-line symbol-description
         proxy.stateVersion = Symbol()
       }
@@ -225,7 +233,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   })
   // react数据响应组件更新管理器
   if (!proxy.effect) {
-    createEffect(proxy, components, propsRef.current)
+    createEffect(proxy, components)
   }
 
   return instance
@@ -271,8 +279,12 @@ const triggerResizeEvent = (mpxProxy) => {
   }
 }
 
-function usePageContext (mpxProxy) {
-  const { routeName } = useContext(routeContext) || {}
+function usePageContext (mpxProxy, instance) {
+  const { pageId } = useContext(routeContext) || {}
+
+  instance.getPageId = () => {
+    return pageId
+  }
 
   useEffect(() => {
     let unWatch
@@ -280,8 +292,8 @@ function usePageContext (mpxProxy) {
     const hasHideHook = hasPageHook(mpxProxy, [ONHIDE, 'hide'])
     const hasResizeHook = hasPageHook(mpxProxy, [ONRESIZE, 'resize'])
     if (hasShowHook || hasHideHook || hasResizeHook) {
-      if (hasOwn(pageStatusContext, routeName)) {
-        unWatch = watch(() => pageStatusContext[routeName], (newVal) => {
+      if (hasOwn(pageStatusContext, pageId)) {
+        unWatch = watch(() => pageStatusContext[pageId], (newVal) => {
           if (newVal === 'show' || newVal === 'hide') {
             triggerPageStatusHook(mpxProxy, newVal)
           } else if (/^resize/.test(newVal)) {
@@ -298,27 +310,23 @@ function usePageContext (mpxProxy) {
 }
 
 const pageStatusContext = reactive({})
-function setPageStatus (routeName, val) {
-  set(pageStatusContext, routeName, val)
-}
+let pageId = 0
 
-function usePageStatus (navigation, route) {
+function usePageStatus (navigation, pageId) {
   let isFocused = true
-  setPageStatus(route.name, '')
+  set(pageStatusContext, pageId, '')
   useEffect(() => {
-    setPageStatus(route.name, 'show')
     const focusSubscription = navigation.addListener('focus', () => {
-      setPageStatus(route.name, 'show')
+      pageStatusContext[pageId] = 'show'
       isFocused = true
     })
     const blurSubscription = navigation.addListener('blur', () => {
-      setPageStatus(route.name, 'hide')
+      pageStatusContext[pageId] = 'hide'
       isFocused = false
     })
-
     const unWatchAppFocusedState = watch(global.__mpxAppFocusedState, (value) => {
       if (isFocused) {
-        setPageStatus(route.name, value)
+        pageStatusContext[pageId] = value
       }
     })
 
@@ -326,6 +334,7 @@ function usePageStatus (navigation, route) {
       focusSubscription()
       blurSubscription()
       unWatchAppFocusedState()
+      del(pageStatusContext, pageId)
     }
   }, [navigation])
 }
@@ -336,42 +345,43 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
-    const propsRef = useRef(props)
+    const propsRef = useRef(null)
+    propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
       instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components })
     }
     const instance = instanceRef.current
-    // reset instance
-    instance.__refs = {}
-    instance.__dispatchedSlotSet = new WeakSet()
     useImperativeHandle(ref, () => {
       return instance
     })
-    const proxy = instance.__mpxProxy
 
-    if (!isFirst) {
-      // 处理props更新
-      propsRef.current = props
-      Object.keys(props).forEach(key => {
-        if (hasOwn(validProps, key)) {
-          instance[key] = props[key]
-        }
-      })
-      proxy.propsUpdated()
-    }
+    const proxy = instance.__mpxProxy
 
-    usePageContext(proxy)
+    proxy.callHook(REACTHOOKSEXEC)
 
     useEffect(() => {
+      if (!isFirst) {
+        // 处理props更新
+        Object.keys(props).forEach(key => {
+          if (hasOwn(validProps, key)) {
+            instance[key] = props[key]
+          }
+        })
+      }
       if (proxy.pendingUpdatedFlag) {
         proxy.pendingUpdatedFlag = false
         proxy.callHook(UPDATED)
       }
     })
 
+    usePageContext(proxy, instance)
+
     useEffect(() => {
+      if (type === 'page') {
+        proxy.callHook(ONLOAD, [props.route.params || {}])
+      }
       proxy.mounted()
       return () => {
         proxy.unmounted()
@@ -383,17 +393,19 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     useSyncExternalStore(proxy.subscribe, proxy.getSnapshot)
 
-    return proxy.effect.run()
+    return rawOptions.__disableMemo ? proxy.effect.run() : useMemo(() => proxy.effect.run(), [proxy.stateVersion])
   }))
 
   if (type === 'page') {
-    const { Provider } = global.__navigationHelper
+    const { Provider, useSafeAreaInsets, GestureHandlerRootView } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
-      usePageStatus(navigation, route)
+      const currentPageId = useMemo(() => ++pageId, [])
+      usePageStatus(navigation, currentPageId)
 
       useLayoutEffect(() => {
         navigation.setOptions({
+          headerShown: pageConfig.navigationStyle !== 'custom',
           headerTitle: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
@@ -402,18 +414,23 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
         })
       }, [])
 
+      navigation.insets = useSafeAreaInsets()
+
       return createElement(Provider,
         null,
-        createElement(ReactNative.View,
+        createElement(GestureHandlerRootView,
           {
             style: {
-              ...ReactNative.StyleSheet.absoluteFillObject,
+              flex: 1,
               backgroundColor: pageConfig.backgroundColor || '#ffffff'
+            },
+            onLayout (e) {
+              navigation.layout = e.nativeEvent.layout
             }
           },
           createElement(routeContext.Provider,
             {
-              value: { routeName: route.name }
+              value: { pageId: currentPageId }
             },
             createElement(defaultOptions,
               {

package/src/platform/patch/wx/lifecycle.js

@@ -5,7 +5,9 @@ import {
   ONSHOW,
   ONHIDE,
   ONLOAD,
-  ONRESIZE
+  ONRESIZE,
+  SERVERPREFETCH,
+  REACTHOOKSEXEC
 } from '../../../core/innerLifecycle'
 
 const APP_HOOKS = [
@@ -16,6 +18,7 @@ const APP_HOOKS = [
   'onPageNotFound',
   'onUnhandledRejection',
   'onThemeChange',
+  'onSSRAppCreated',
   'onAppInit'
 ]
 
@@ -43,7 +46,9 @@ const COMPONENT_HOOKS = [
   'moved',
   'detached',
   'pageShow',
-  'pageHide'
+  'pageHide',
+  'serverPrefetch',
+  'reactHooksExec'
 ]
 
 export const lifecycleProxyMap = {
@@ -54,7 +59,9 @@ export const lifecycleProxyMap = {
   [ONSHOW]: ['pageShow', 'onShow'],
   [ONHIDE]: ['pageHide', 'onHide'],
   [ONLOAD]: ['onLoad'],
-  [ONRESIZE]: ['onResize']
+  [ONRESIZE]: ['onResize'],
+  [SERVERPREFETCH]: ['serverPrefetch'],
+  [REACTHOOKSEXEC]: ['reactHooksExec']
 }
 
 export const LIFECYCLE = {