渲染元素

我们之前提到，React.element 描述了你能在屏幕上看到的内容。

RES
let element = <h1> {React.string("Hello World")} </h1>

不像浏览器的 DOM 元素，React 元素是创建成本很低的普通对象。React DOM 负责更新浏览器的 DOM 来匹配 React 元素。

渲染元素到 DOM

假设我们的 HTML 文件内有个像这样的 div：

HTML
<div id="root"/>

我们称之为“根” DOM 节点，该节点下所有的内容将被 React DOM 管理。

普通的 React 应用通常只有一个根 DOM 节点。如果你正在将 React 集成到现有应用中，那么你可以在应用中包含任意多个独立的根 DOM 节点。

我们需要两个步骤来将 React 应用渲染到 root div 节点：

• 通过 ReactDOM.querySelector 找到 DOM 节点到位置

• 使用 ReactDOM.render 将 React 元素渲染到 Dom.element 上

将应用渲染到 root div 的例子：

// Dom access can actually fail. ReScript
// is really explicit about handling edge cases!
switch(ReactDOM.querySelector("#root")){
| Some(root) => ReactDOM.render(<div> {React.string("Hello Andrea")} </div>, root)
| None => () // do nothing
}

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或属性。 React 元素就像一部电影里的一帧：它代表某个特定时刻的 UI。

如果要在初始的 ReactDOM.render 之后更新 React 元素，我们需要理解更多概念，例如 React 组件和状态管理。现在，只需将你的 React 应用想象成一颗 React 元素组成的树，树的某些节点会在应用的生命周期内被替换。

React 会自动识别元素的变更，并只会进行必要的更新来使 DOM 达到预期的状态。