渲染elements

首先，element是react中最基本的元素，它表示了你在屏幕上所看到的一个视图元素。element是这样定义的：

const element = <h1>Hello, world</h1>

和浏览器的dom元素不同的是，react的element是纯文本的对象，并且很容易创建。react根据element来更新实际的dom。

注意：
有人可能会将element和component混为一谈，后者是一个被大家熟知的概念，因为react宣称自己是面向组件化开发，而component正是组件的意思。实际上，element是component的组成元素。

将element渲染进dom树里

在你的html文件里会有这么一行代码：

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

我们将其称为根dom节点，因为在插入这个div之中的所有东西都会被react所控制。
用react创建的应用通常只有一个根dom节点。如果你需要将react的应用合并到已有的应用中，你只需要将root节点独立出来即可。
渲染element到dom中需要调用ReactDOM.render()函数：

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

上面的代码在页面中渲染了“Hello，world”。

更新被渲染的element

element是一但被渲染是不能被改变的。一旦你创建了一个element，你不能改变它的属性值和孩子元素。一个element像是一个单独的模块：它在某点处实时的渲染了UI。
就我们现有的知识而言，更新一个element的唯一办法是创建一个新的element并且执行ReactDOM.render()渲染它：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

注意：
在实际项目中，大多React的应用只会调用一次ReactDOM.render()。在下一章节，我们将会学到上面这样的代码怎样封装在状态组件中。

React仅仅更新需要更新的地方

React会将element和他的子元素同之前的进行比较，将发生改变的部分更新到实际的DOM树上。