元素渲染

Rendering Elements

• 元素是构成 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