render

render(reactNode, domNode, callback?)

• 參考
  • render(reactNode, domNode, callback?)
• 用法
  • 渲染根元件
  • 渲染多個根節點
  • 更新渲染樹

參考

render(reactNode, domNode, callback?)

呼叫 render 以在瀏覽器 DOM 元素內顯示 React 元件。

import { render } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

React 會在 domNode 中顯示 <App />，並接管對其內部 DOM 的管理。

完全使用 React 構建的應用程式通常只有一個帶有其根元件的 render 呼叫。 對頁面部分內容使用 React“點綴”的頁面可以根據需要進行多次 render 呼叫。

請參閱下面的更多示例。

引數

• reactNode：要顯示的 *React 節點*。這通常是一段 JSX，例如 <App />，但您也可以傳遞使用 createElement() 構造的 React 元素、字串、數字、null 或 undefined。

• domNode：一個DOM 元素。 React 會在您傳遞的此 DOM 元素內顯示 reactNode。從這一刻起，React 將管理 domNode 內部的 DOM，並在 React 樹發生更改時更新它。

• 可選 callback：一個函式。如果傳遞，React 會在您的元件被放置到 DOM 中後呼叫它。

返回值

render 函式通常返回 null。但是，如果傳遞的 reactNode 是一個*類元件*，則它將返回該元件的一個例項。

注意事項

• 在 React 18 中，render 已被 createRoot 替代。請在 React 18 及更高版本中使用 createRoot。

• 第一次呼叫 render 時，React 會在將 React 元件渲染到 domNode 中之前，清除 domNode 內所有現有的 HTML 內容。如果 domNode 包含由 React 在伺服器端或構建期間生成的 HTML，請改用 hydrate()，它會將事件處理程式附加到現有的 HTML。

• 如果在同一個 domNode 上多次呼叫 render，React 將根據需要更新 DOM 以反映傳遞的最新 JSX。React 將透過與之前渲染的樹進行 “匹配” 來確定 DOM 的哪些部分可以重用，哪些部分需要重新建立。在同一個 domNode 上再次呼叫 render 類似於在根元件上呼叫 set 函式：React 會避免不必要的 DOM 更新。

• 如果應用程式完全使用 React 構建，則應用程式中可能只有一個 render 呼叫。（如果使用框架，它可能會為你進行此呼叫。）如果想在元件子級之外的 DOM 樹的不同部分（例如，模態框或工具提示）中渲染一段 JSX，請使用 createPortal 而不是 render。

用法

呼叫 render 函式可以在 瀏覽器 DOM 節點 內顯示 React 元件。

import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

渲染根元件

在完全使用 React 構建的應用中，通常只會在啟動時執行一次——以渲染“根”元件。

通常情況下，不需要再次呼叫 render 或在更多的地方呼叫它。從現在開始，React 將管理應用程式的 DOM。要更新 UI，元件將 使用狀態。

渲染多個根節點

如果頁面 不是完全使用 React 構建，則為 React 管理的每個頂級 UI 部分呼叫 render。

可以使用 unmountComponentAtNode() 銷燬渲染的樹。

更新渲染的樹

可以在同一個 DOM 節點上多次呼叫 render。只要元件樹結構與之前渲染的結構相匹配，React 就會 保留狀態。 請注意，如何在輸入框中鍵入內容，這意味著每秒重複呼叫 render 進行的更新不會破壞性地更新。

多次呼叫 render 並不常見。通常，會在元件內部 更新狀態。