# 元素渲染

* 元素是构成 React 应用的最小砖块
* 元素描述了你在屏幕上想看到的内容
* 与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致

> 不要把 **元素** 和 **组件** 搞混，组件是由元素构成的

\`\`\`jsx harmony

const element = Hello, world!

````
## 将一个元素渲染为 DOM 

```html

<div id="root"></div>
````

* 这是 HTML 中被成为 “根” 的 DOM 节点，因为该节点内的所有内容都将由 React DOM 管理
* 使用 React 构建的应用通常只有一个单一的根节点，如果你在将 React 集成一个已有的应用，那你可以在应用中包含任意多的独立根节点
* 想要将一个 React 元素渲染到根 DOM 节点中，只需要把它们一起传入 ReactDOM.render() 中

  \`\`\`jsx harmony

const element = Hello, woeld ReactDOM.render(element, document.getElementById('root'));

\`\`\`

## 更新已渲染的元素

* React 元素是不可变对象，一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧，它代表某个特定时刻的 UI
* 可以通过重复调用 ReactDOM.render() 来实现 UI 的更新
* 但是在实践中，大多数 React 应用只会调用一次 ReactDOM.render()，而使用有状态组件来解决

## React 只更新它需要更新的部分

* React DOM 会将元素和它的子元素 与 它们之前的状态进行比较，并只会进行必要的更新来使 DOM 打到预期的状态
* 尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变的内容
* 考虑 UI 在任意给定时刻的状态，而不是随时间变化的过程，能够消灭一整类的bug