React.lazy回调是否保证仅执行一次?RTK/RTKQ注入场景相关疑问
React.lazy 回调函数执行次数说明
- 官方保证结论:
React.lazy接收的工厂回调函数仅会被执行一次,这是React官方明确的设计约定。 - 底层逻辑:React会对回调返回的Promise及加载完成的组件做全局缓存,不管后续该懒加载组件被多少次挂载渲染,回调只会在组件第一次需要被渲染时触发一次,不会重复调用。
- 你的使用场景适配:你在回调中注入RTK、RTKQ端点的写法是安全的,不用担心重复注入导致的状态冲突、报错问题。
- 可选优化建议:可以增加简单的防御性判断,避免非React触发回调的极端场景下出现重复注入,优化后的示例代码如下:
const Component = React.lazy(() => { // 增加注入前的存在性判断,兜底极端场景 if (!store.getState().hasOwnProperty(componentApi.reducerPath)) { injectApi(componentApi) injectStore(componentStore) } return import('component-path') })
注:你提供的原示例代码末尾缺少闭合
React.lazy调用的右括号,实际编码时记得补上。
内容的提问来源于stack exchange,提问作者radulle
相关产品推荐
相关产品推荐

