渲染

render(reactNode, domNode, callback?)

• 参考
  • render(reactNode, domNode, callback?)
• 用法
  • 渲染根组件
  • 渲染多个根
  • 更新渲染树

参考

¥Reference

render(reactNode, domNode, callback?)

调用 render 以在浏览器 DOM 元素内显示 React 组件。

¥Call render to display a React component inside a browser DOM element.

import { render } from 'react-dom';

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

React 将在 domNode 中显示 <App />，并接管管理其中的 DOM。

¥React will display <App /> in the domNode, and take over managing the DOM inside it.

完全使用 React 构建的应用通常只会对其根组件进行一次 render 调用。页面的某些部分使用 React 的 “sprinkles” 的页面可能会根据需要调用尽可能多的 render。

¥An app fully built with React will usually only have one render call with its root component. A page that uses “sprinkles” of React for parts of the page may have as many render calls as needed.

请参阅下面的更多示例。

¥See more examples below.

参数

¥Parameters

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

  ¥reactNode: A React node that you want to display. This will usually be a piece of JSX like <App />, but you can also pass a React element constructed with createElement(), a string, a number, null, or undefined.

• domNode：DOM 元素。 React 将显示你在此 DOM 元素中传递的 reactNode。从这一刻起，React 将管理 domNode 内部的 DOM，并在你的 React 树发生变化时更新它。

  ¥domNode: A DOM element. React will display the reactNode you pass inside this DOM element. From this moment, React will manage the DOM inside the domNode and update it when your React tree changes.

• 可选 callback：一个功能。如果通过，React 将在你的组件放入 DOM 后调用它。

  ¥optional callback: A function. If passed, React will call it after your component is placed into the DOM.

返回

¥Returns

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

¥render usually returns null. However, if the reactNode you pass is a class component, then it will return an instance of that component.

注意事项

¥Caveats

• 在 React 18 中，render 被 createRoot。 取代 请在 React 18 及更高版本中使用 createRoot。

  ¥In React 18, render was replaced by createRoot. Please use createRoot for React 18 and beyond.

• 第一次调用 render 时，React 会在将 React 组件渲染到其中之前清除 domNode 中所有现有的 HTML 内容。如果你的 domNode 包含 React 在服务器上或构建期间生成的 HTML，请改用 hydrate()，它将事件处理程序附加到现有 HTML。

  ¥The first time you call render, React will clear all the existing HTML content inside the domNode before rendering the React component into it. If your domNode contains HTML generated by React on the server or during the build, use hydrate() instead, which attaches the event handlers to the existing HTML.

• 如果你多次在同一个 domNode 上调用 render，React 将根据需要更新 DOM 以反映你传递的最新 JSX。React 将决定 DOM 的哪些部分可以重用，哪些需要由 “匹配它” 使用之前渲染的树重新创建。在同一个 domNode 上再次调用 render 类似于在根组件上调用 set 函数：React 避免了不必要的 DOM 更新。

  ¥If you call render on the same domNode more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by “matching it up” with the previously rendered tree. Calling render on the same domNode again is similar to calling the set function on the root component: React avoids unnecessary DOM updates.

• 如果你的应用完全使用 React 构建，你的应用中可能只有一个 render 调用。（如果你使用框架，它可能会为你执行此调用。）当你想在 DOM 树的不同部分渲染一段 JSX 时，它不是你的组件的子级（例如，模态或工具提示），请使用 createPortal 而不是 render。

  ¥If your app is fully built with React, you’ll likely have only one render call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn’t a child of your component (for example, a modal or a tooltip), use createPortal instead of render.

用法

¥Usage

调用 render 以在 浏览器 DOM 节点 中显示 React 组件。

¥Call render to display a React component inside a browser DOM node.

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

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

渲染根组件

¥Rendering the root component

在完全使用 React 构建的应用中，你通常只会在启动时执行一次 - 渲染 “根” 组件。

¥In apps fully built with React, you will usually only do this once at startup—to render the “root” component.

通常你不需要再次调用 render 或在更多地方调用它。从这一点开始，React 将管理你应用的 DOM。要更新 UI，你的组件将 使用状态。

¥Usually you shouldn’t need to call render again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will use state.

渲染多个根

¥Rendering multiple roots

如果你的页面 不是完全用 React 构建的，请为 React 管理的每个顶层 UI 片段调用 render。

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

你可以使用 unmountComponentAtNode()。 销毁渲染的树木

¥You can destroy the rendered trees with unmountComponentAtNode().

更新渲染树

¥Updating the rendered tree

你可以在同一个 DOM 节点上多次调用 render。只要组件树结构与之前渲染的内容相匹配，React 就会 保持状态。 通知你如何键入输入，这意味着每秒重复 render 调用的更新不是破坏性的：

¥You can call render more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will preserve the state. Notice how you can type in the input, which means that the updates from repeated render calls every second are not destructive:

多次调用 render 并不常见。通常，你会在组件中使用 更新状态。

¥It is uncommon to call render multiple times. Usually, you’ll update state inside your components instead.