Javascript JSX条件呈现是否会从对象代码中分离出来？

对象代码的条件呈现是否会按预期分割和延迟加载？这里有一个简短的例子来说明我所说的

const Component1 = lazy(() => import('some path'));
const Component2 = lazy(() => import('some path'));
const Component3 = lazy(() => import('some path'));

render () {
  const { selectionIndex } = this.state;
  <Suspense fallback={<div>Loading...</div>}>
    {{
      one: <Component1 />,
      two: <Component2 />,
      three: <Component3 />,
    }[selectionIndex]}
  </Suspense>
}

const Component1=lazy（（）=>import（'some path'）；
const Component2=lazy（（）=>import（'some path'）；
const Component3=lazy（（）=>import（'some path'）；
渲染（）{
const{selectionIndex}=this.state；
{{
一:,，
二:,，
三:,，
}[选择索引]}
}

---

我想知道是在渲染时加载所有三个组件，还是仅加载selectionIndex选择的组件。我试图使用它根据状态设置的菜单有条件地选择要显示的内容，但我不想一次加载所有内容。

似乎它是根据selectionIndex有条件地加载的。不会同时加载所有其他组件

附言：如果您觉得哪个组件将首先加载，只需在该组件中放置一个控制台日志，即可轻松调试

---

-如果打开此选项，则组件将根据selectionIndex值为“一”的情况开始加载。

它们不会一次全部渲染。您可以自己进行实验，将

控制台放在组件中。在组件中记录
是一种很容易找到答案的方法

React for web由两个LIB组成，“React”和“React dom”。“react”负责将逻辑意图封装到声明性数据结构中，而“react dom”使用这些数据结构并处理作业的实际“呈现”部分

JSX元素创建语法
转换为普通JS，作为对
React.createElement（组件、道具）
的API调用。此API调用的返回值实际上只是一个特定形状的普通对象，大致如下所示：

{
类型：组件，
道具：道具
}

这是前面提到的“声明性数据结构”。您可以在控制台中检查它

如您所见，调用
React.createElement
只返回这样的数据结构，它不会直接调用
.render（）
方法或函数组件的函数体。数据结构被提交到“react dom”lib，最终被“呈现”

因此，您的示例代码只是创建了这些数据结构，但相关的组件将不会被呈现。
我不打算讨论太多的技术细节，因为我觉得@hackape已经为您提供了一个很好的答案来解释为什么，我的答案的重点只是解释如何（检查它）

一般来说，我建议您下载React开发者工具





然后，如果在开发人员控制台中打开components选项卡，就可以检查正在呈现哪些组件。下面是一个沙盒示例，最好的方法是自己测试：-）



正如您在开发者工具（右下角）中看到的，只有当前设置的元素被渲染