render
函数会将一段 JSX(“React 节点”)渲染到浏览器 DOM 容器节点中。
render(reactNode, domNode, callback?)
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 构建的应用程序中,你通常只需在启动时,执行此操作 —— 渲染 “根” 组件。
import './styles.css'; import { render } from 'react-dom'; import App from './App.js'; render(<App />, document.getElementById('root'));
通常你不需要多次调用 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.
import './styles.css'; import { render } from 'react-dom'; import { Comments, Navigation } from './Components.js'; render( <Navigation />, document.getElementById('navigation') ); render( <Comments />, document.getElementById('comments') );
你可以使用 unmountComponentAtNode()
来销毁已被渲染的组件树。
更新已渲染的组件树
你可以在同一 DOM 节点上多次调用 render
。只要组件树结构与之前渲染的内容一致,React 就会 保留 state。请注意观察在输入框中输入内容时的效果,这意味着在此示例中每次重复调用 render
时,并不会造成任何影响:
import { render } from 'react-dom'; import './styles.css'; import App from './App.js'; let i = 0; setInterval(() => { render( <App counter={i} />, document.getElementById('root') ); i++; }, 1000);
多次调用 render
函数并不常见。通常,会通过在组件中 更新 state 来代替。