能否结合if条件在React中按需动态导入组件？

你已经了解通过React.lazy结合ES模块动态导入实现组件懒加载的基础用法，示例代码如下：

import * as React from 'react'

const SmileyFace = React.lazy(() => import('./smiley-face'))

function App() {
  return (
    <div>
      <React.Suspense fallback={<div>loading...</div>}>
        <SmileyFace />
      </React.Suspense>
    </div>
  )
}

现在你想将导入逻辑放在条件判断中，仅当视口尺寸大于移动端阈值（>400px）时才加载组件，并写了对应的代码，但这个实现不可行，问题出在这几点：

1. isMobile仅初始化计算一次：它只在组件首次加载时根据当时的窗口宽度判断，不会响应后续窗口缩放、设备旋转等尺寸变化，状态无法实时更新。
2. importIfNecessary函数未调用：定义了导入逻辑但从未执行，导致非移动端场景下SmileyFace始终为null，渲染时会直接报错（React无法渲染null组件）。
3. 懒加载逻辑不符合React规范：即使调用了导入函数，直接将React.lazy的结果赋值给全局变量的方式，无法配合React的状态更新机制，组件加载过程中没有正确的状态管理，会导致渲染异常。

正确实现方式 #

方案一：结合React.lazy与窗口监听（推荐，符合React Suspense规范）

import * as React from 'react'

// 提前声明懒加载组件，但仅在渲染时才会触发动态导入
const SmileyFace = React.lazy(() => import('./smiley-face'))

function App() {
  // 实时维护移动端状态
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 400)

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 400)
    }
    // 监听窗口尺寸变化
    window.addEventListener('resize', handleResize)
    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <div>
      {isMobile ? (
        <>移动端简化内容</>
      ) : (
        <React.Suspense fallback={<div>加载中...</div>}>
          <SmileyFace />
        </React.Suspense>
      )}
    </div>
  )
}

这里React.lazy声明的组件只有在非移动端场景下被渲染时，才会触发动态导入逻辑，同时通过监听窗口变化实时切换状态，完全符合React的渲染机制。

方案二：完全条件式动态导入（避免移动端加载组件代码）

如果你希望移动端场景下完全不加载SmileyFace的代码，可以用状态管理配合手动动态导入：

import * as React from 'react'

function App() {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 400)
  const [SmileyFace, setSmileyFace] = React.useState(null)

  React.useEffect(() => {
    const handleResize = async () => {
      const currentIsMobile = window.innerWidth <= 400
      setIsMobile(currentIsMobile)

      // 仅在非移动端且组件未加载时执行导入
      if (!currentIsMobile && !SmileyFace) {
        const module = await import('./smiley-face')
        setSmileyFace(module.default)
      }
    }

    // 初始化时执行一次判断
    handleResize()
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [SmileyFace])

  // 移动端直接返回对应内容
  if (isMobile) {
    return <>移动端简化内容</>
  }

  // 组件未加载完成时显示加载态
  if (!SmileyFace) {
    return <div>加载中...</div>
  }

  // 非移动端且组件加载完成后渲染
  return <SmileyFace />
}

这种方式下，移动端永远不会触发import('./smiley-face')，彻底避免了该组件代码的加载，适合对性能要求极高的场景。

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