render

render(reactNode, domNode, callback?)

• Reference
  • render(reactNode, domNode, callback?)
• Usage
  • 渲染根组件
  • 渲染多个根组件
  • 更新已渲染的组件树

Reference

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 进行多次调用。

具体参考下方示例。

Parameters

• reactNode：需要展示的 React 节点。这通常是一段 JSX，如 <App />，但你也可以传递使用 createElement() 构建的 React 元素，字符串，数字，null 或是 undefined。

• domNode：DOM 元素。React 会将 reactNode 渲染在该 DOM 元素中。从此刻开始，React 将管理 domNode 中的 DOM，并会在 React 树发生变化时更新它。

• 可选 callback：回调函数。如果编写了该函数，React 将在你的组件放入 DOM 后调用该函数。

Returns

通常 render 会返回 null。然后，如果你传递的 reactNode 是一个 class 组件，那么它将返回该组件的实例。

Caveats

• 在 React 18 中，render 函数已被 createRoot 取代。请在 React 18 及后续版本中使用 createRoot。

• 当你第一次调用 render 时，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 时，而不是你组件的 children（例如，modal 或者 tooltip），那么请使用 createPortal 来代替。

Usage

通过调用 render 函数在 浏览器 DOM 节点中展示 React 组件。

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

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

渲染根组件

在完全由 React 构建的应用程序中，你通常只需在启动时，执行此操作 —— 渲染 “根” 组件。

通常你不需要多次调用 render 或在更多地方调用它。从此刻开始，React 将管理你的应用程序的 DOM。如果你想更新 UI，你在组件中通过 using state 来实现。

渲染多个根组件

If your page isn’t fully built with React, call render for each top-level piece of UI managed by React.

你可以使用 unmountComponentAtNode() 来销毁已被渲染的组件树。

更新已渲染的组件树

你可以在同一 DOM 节点上多次调用 render。只要组件树结构与之前渲染的内容一致，React 就会 保留 state。请注意观察在输入框中输入内容时的效果，这意味着在此示例中每次重复调用 render 时，并不会造成任何影响：

多次调用 render 函数并不常见。通常，会通过在组件中 更新 state 来代替。