使用React.Lazy时如何判断所有代码块(chunks)是否已全部加载完成？

方案1：优先使用事件委托（最推荐） #

该方案不需要关心懒加载代码块的加载状态，从根源避免绑定时机问题。你可以直接给表单父容器（或form元素本身）绑定事件监听，利用事件冒泡机制捕获所有input的触发事件，不管input来自预加载还是懒加载组件。
示例代码：

// 表单父组件内实现
const FormContainer = () => {
  const handleInputEvent = (e) => {
    if (e.target.tagName === 'INPUT') {
      // 在这里执行你的input事件逻辑
      console.log('input触发', e.target.value)
    }
  }

  return (
    <form onInput={handleInputEvent}>
      {/* 这里放置所有组件，包括懒加载的表单组件 */}
      <React.Suspense fallback={<div>加载中...</div>}>
        <LazyFormPart1 />
        <LazyFormPart2 />
      </React.Suspense>
    </form>
  )
}

这种方式不需要做任何加载状态监听，所有动态渲染的input都会自动生效。

方案2：封装React.lazy统计全局加载状态 #

如果你确实需要精确获知所有懒加载代码块的加载完成时机，可以自己封装一层React.lazy，维护全局的加载计数器：

// 自定义lazy封装
let pendingLazyCount = 0
let allLoadedCallback = null

const customLazy = (factory) => {
  pendingLazyCount++
  const lazyComponent = React.lazy(() => {
    return factory().finally(() => {
      pendingLazyCount--
      // 计数为0时触发回调
      if (pendingLazyCount === 0 && allLoadedCallback) {
        allLoadedCallback()
        allLoadedCallback = null
      }
    })
  })
  return lazyComponent
}

// 项目中所有懒加载组件都用customLazy代替React.lazy
const LazyFormPart1 = customLazy(() => import('./LazyFormPart1'))
const LazyFormPart2 = customLazy(() => import('./LazyFormPart2'))

// 监听所有代码块加载完成
const setAllLazyLoadedCallback = (callback) => {
  if (pendingLazyCount === 0) {
    callback()
  } else {
    allLoadedCallback = callback
  }
}

在你需要执行input绑定的位置调用setAllLazyLoadedCallback传入对应逻辑即可。

方案3：基于Suspense的加载状态判断 #

如果你的所有懒加载表单组件都包裹在同一个Suspense组件下，可以通过监听fallback的显示状态判断加载是否完成：

const FormContainer = () => {
  const [allLazyLoaded, setAllLazyLoaded] = useState(false)

  useEffect(() => {
    // Suspense的fallback消失后，下一个渲染周期所有懒加载组件已经挂载
    const timer = requestIdleCallback(() => {
      setAllLazyLoaded(true)
    })
    return () => cancelIdleCallback(timer)
  }, [])

  useEffect(() => {
    if (allLazyLoaded) {
      // 在这里执行你的input绑定逻辑
      document.querySelectorAll('form input').forEach(input => {
        // 绑定事件
      })
    }
  }, [allLazyLoaded])

  return (
    <form>
      <React.Suspense fallback={<div>加载中...</div>}>
        <LazyFormPart1 />
        <LazyFormPart2 />
      </React.Suspense>
    </form>
  )
}

提示：非必要不建议直接操作DOM绑定事件，优先使用React的声明式事件写法，结合状态管理实现需求，可完全避免加载时机、DOM更新导致的绑定失效问题。如果必须手动绑定DOM事件，要记得在组件卸载时解绑，避免内存泄漏。

内容的提问来源于stack exchange，提问作者A Zuniga