Dynamic Component — async/await Pattern

DEX475 - JavaScript

📄 第 162 页 🎬 视频课程

课程章节介绍

好,同学,我们来看这段关于动态导入的推荐做法。 先说个重要的概念:现在,处理动态导入,Lightning Web Components 官方推荐使用 ,async/await, 模式。它比老式的 Promise 链更清晰,也更容易维护。 那实现的时候,有一个非常关键的架构决策,你要记住——,一定要让 `linkedCallback` 这个生命周期钩子保持同步,,然后把真正的异步工作委托给一个单独的 `async` 助手方法。为什么?如果让 `linkedCallback` 直接返回一个 Promise,框架不会等待它,这会导致组件还没准备好就渲染了,产生很多时序上的 Bug。所以这种“同步钩子 + 异步助手”的模式,能帮你完美避开这些问题。 接下来,我把整个流程梳理一下,你一听就明白: 1. 组件挂载时,,`linkedCallback` 被触发,,它马上调用我们定义好的异步加载助手。 2. 这个助手会 ,启动动态 `import()`,,去加载外部组件。 3. 在导入完成之前,我们的主组件不会傻等——它会 ,先用一个占位符渲染,,比如放一个小小的加载图标或文字。 4. 等动态导入的 Promise 解析完成,拿到 ,组件的构造函数,。 5. 这时候,我们用这个构造函数替换掉占位符,,生成真正的动态组件,。 6. 最后,这个新挂载的动态组件,,它自己的 `linkedCallback` 也会被触发,,完成它内部的初始化。 这样既保证了主组件快速响应,又完全控制了异步加载的时机。 最后,还有一个测试中容易踩的坑:当你用动态导入时,最终渲染出来的自定义元素,它的标签名是 LWC 内部的默认值,并不是你源代码里的那个名字。那在测试里你怎么选中它呢?不要依赖标签名,而是要用 ,`lwc:ref` 指令,,或者给动态容器加一个 ,自定义的 `data-*` 属性,,然后用 `querySelector` 去获取,这样才可靠。 这就是整个 async/await 动态导入的推荐做法和要点,大家理解了吗?

关键词

LWC Lightning Web Components Salesforce