React.lazy在函数组件中加载异常的原因及Suspense生效疑问

1. React.Suspense的作用范围是「渲染链上的最近父级」 #

React.Suspense只负责处理它直接包裹的组件，以及该组件渲染过程中同步触发的懒加载请求。路由外层的Suspense仅包裹了<MobileHome/>本身，当<MobileHome/>已经完成挂载后，它内部才触发ChatHome、MeHome的懒加载时，这些新的加载请求不在外层Suspense的管辖范围内——外层Suspense已经完成了对<MobileHome/>的加载处理，不会再监听它内部后续的懒加载动作。

2. React.lazy定义位置影响加载触发时机 #

• 当你把React.lazy放在<MobileHome/>外部时，这个懒加载组件的加载请求会在<MobileHome/>被路由渲染时同步触发，这时候外层Suspense还处于等待<MobileHome/>加载完成的状态，自然能捕获到这个懒加载请求，所以加载状态正常。
• 而放在组件内部时，React.lazy的定义和组件渲染是绑定的，只有当<MobileHome/>挂载完成、内部逻辑执行到渲染懒加载组件时，才会触发加载请求，这时候外层Suspense已经「结束工作」，没人处理这个加载状态，就会出现加载永不结束的情况。

3. 内部添加Suspense解决问题的本质 #

在<MobileHome/>内部用React.Suspense包裹懒加载组件，相当于给这些组件的渲染链补上了最近的「加载处理器」，当它们触发懒加载时，这个内部Suspense会接管加载状态的展示，直到组件加载完成。

内容的提问来源于stack exchange，提问作者Prolewin Batholomew