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 并不常见。通常，会在组件内部 更新状态。