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 呼叫，其根元件為 App。使用 React「點綴」頁面部分區域的頁面可能會有多個 render 呼叫，視需要而定。

請參閱以下更多範例。

參數

• reactNode：您想要顯示的React 節點。這通常會是像 <App /> 這樣的 JSX 片段，但您也可以傳遞使用 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 會清除 domNode 內所有現有的 HTML 內容，才會將 React 元件渲染到其中。如果您的 domNode 包含伺服器或建置期間由 React 產生的 HTML，請改用 hydrate()，它會將事件處理常式附加到現有的 HTML。

• 如果您對同一個 domNode 呼叫 render 多次，React 會根據您傳遞的最新 JSX 更新 DOM。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 的情況並不常見。通常，您會在元件內 更新狀態。