對象代碼之外的 JSX 條件渲染是否會拆分？

Question

對象代碼的條件渲染是否會按預期拆分和延遲加載？ 這是我正在談論的一個簡短示例。

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>
}

我想知道是否所有三個組件都會在渲染時加載，或者只是由 selectionIndex 選擇的一個。 我正在嘗試使用它來根據狀態設置的菜單有條件地選擇要顯示的內容，但我不想一次加載所有內容。

Answer 1

它們不會一次全部渲染。 你可以自己試驗，把console.log放在組件里面很容易找到。

React for web 由兩個庫組成，“react”和“react-dom”。 “react”負責將您的邏輯意圖封裝到聲明性數據結構中，而“react-dom”則使用這些數據結構並處理工作的實際“渲染”部分。

JSX 元素創建語法<Component {…props} />轉換為普通 JS 作為對React.createElement(Component, props)的 API 調用。 這個 API 調用的返回值實際上只是一個具有某種形狀的普通對象，大致如下所示：

{
  type: Component,
  props: props
}

這就是前面提到的“聲明式數據結構”。 您可以在控制台中檢查它。

可以看到，調用React.createElement只是返回這樣的數據結構，不會直接調用.render()方法或函數組件的函數體。 數據結構被提交到“react-dom”庫以最終“渲染”。

因此，您的示例代碼僅創建這些數據結構，但不會呈現相關組件。

Answer 2

似乎它基於 selectionIndex 有條件地加載。 所有其他組件不會立即加載。

PS：如果您覺得哪個將首先加載，只需在該組件中放置一個控制台日志並輕松調試

有條件地加載演示鏈接- 如果您打開此鏈接，則最初根據 selectionIndex 值為“一”加載組件。

Answer 3

我不會涉及太多技術細節，因為我覺得@hackape 已經為您提供了一個很好的答案，我的答案只是為了解釋如何（檢查它）

一般來說，我建議你下載React Developer Tools

• 鉻鏈接
• 火狐鏈接

然后，如果您打開開發人員控制台中的組件選項卡，則可以檢查正在呈現哪些組件。 這是一個沙盒示例，找出最好的方法是畢竟自己測試:-)

正如您在開發者工具（右下）中看到的，只有當前設置的元素被渲染