Merge pull request #2459 from didi/feat-rn-optimize-asyncChunk-reload

rn-optimize-asyncChunk-reload

Author: hiyuki

docs-vitepress/guide/rn/application-api.md

@@ -225,7 +225,7 @@ module.exports = {
 在 RN 环境下使用 `selectComponent` 或 `selectAllComponents` 时，必须在目标节点上标记 wx:ref。选择器支持范围有限，仅支持以下方式
   * id 选择器：`#id`
   * class 选择器（可连续指定多个）：`.a-class` 或 `.a-class.b-class.c-class`
-  
+
 ```javascript
 <template>
   <!-- 必须添加 wx:ref 标记 -->
@@ -277,7 +277,7 @@ Mpx 提供 `@mpxjs/webview-bridge` 来实现 H5 页面与 RN 应用的双向通
 ## 高级特性 {#advanced-features}
 
 `rnConfig` 是 Mpx 框架专为 React Native 环境提供的配置对象，用于定制 RN 平台特有的行为和功能。通过 `mpx.config.rnConfig` 可以配置异步分包、分享、路由控制、屏幕适配等高级特性。
-  
+
 ### 异步分包 {#async-subpackage}
 
 Mpx 在 RN 环境下实现了与微信小程序同等的异步分包功能，支持按需加载分包内容。基础使用可参考 [异步分包指南](https://www.mpxjs.cn/guide/advance/async-subpackage.html)
@@ -350,7 +350,7 @@ mpx.config.rnConfig.onLazyLoadPageError = (error) => {
 
 #### 自定义兜底页面 {#custom-fallback-page}
 
-对于异步分包页面加载失败的情况会展示默认兜底页面，用户可以点击兜底页面底部的重试按钮重新加载异步分包页面。那么对于开发者提供的自定义的 fallback 兜底页面，框架会自动给自定义页面注入一个 `onReload` 方法以供开发者做页面重试的操作，具体见下方示例：
+对于异步分包页面加载失败的情况会展示默认兜底页面，用户可以点击兜底页面底部的重试按钮重新加载异步分包页面。那么对于开发者提供的自定义的 fallback 兜底页面，框架会自动给自定义页面注入一个 `reload` 方法以供开发者做页面重试的操作，具体见下方示例：
 
 ```html
 <template>
@@ -364,12 +364,9 @@ mpx.config.rnConfig.onLazyLoadPageError = (error) => {
 import { createComponent } from '@mpxjs/core'
 
 createComponent({
-  props: {
-    onReload: Function // 框架自动注入
-  },
   methods: {
     handleRetry() {
-      this.onReload?.() // 触发重新加载
+      this.triggerEvent('reload') // 触发重新加载，reload 事件为框架自动注入
     }
   }
 })

packages/core/@types/index.d.ts

@@ -373,7 +373,7 @@ export interface RnConfig {
    * @param params.package 分包名
    * @returns Promise，表示加载完成
    */
-  loadChunkAsync?: (params: { url: string; package: string }) => Promise<any>
+  loadChunkAsync?: (params: { url: string; package: string }) => Promise<null>
 
   /**
    * 下载多个异步分包的方法（不执行）。

packages/webpack-plugin/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
 
 interface DefaultFallbackProps {
   onReload: () => void
+  bindreload: () => void
 }
 
 const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
@@ -171,7 +172,7 @@ const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
   } else if (status === 'error') {
     if (type === 'page') {
       const fallback = getFallback ? getFallback() : DefaultFallback
-      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage })
+      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage, bindreload: reloadPage })
     } else {
       return getFallback ? createElement(getFallback(), innerProps) : null
     }