渲染Elements

Elements是React应用的最小构建块。
一个element描述了你在屏幕上想看到的:

const element = 
Hello, world
;

不像浏览器DOM中的elements，React elements是javascript中的简单对象，创建它们几乎没有效率损失。React DOM负责更新那些匹配React elements的DOM。

注解：
人们可能会将元素与更广为人知的'组件'概念相混淆。我们将在下节引入组件。组件是由Elements构建的，我们建议你不要跳过此节。

将一个Element渲染到DOM

我们假设你的HTML文件中存在一个

:

我们把它称为DOM根节点，因为它里面的所有节点都由React DOM管理。
仅由React构建的应用通常只有一个单独的DOM根节点。如果你打算将React整合到已存在的app中，你可以随意添加孤立的DOM根节点。
将React element和DOM根节点传递给ReactDOM.render()，就可以将React element渲染到DOM根节点:

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

在CodePen上试试
页面上将显示"Hello World"。

更新已渲染的Element

React elements是不可变的。element一旦创建好，就无法改变他的子孙和属性。一个element就如电影中的某一帧：他表示某个时间点上的UI。
根据现在学到的东西，创建一个新的element，并传给ReactDOM.render() 是更新UI的唯一方法。
看看下面这个计时时钟的例子：

function tick() {
  const element = (
    

      
Hello, world!
      
It is {new Date().toLocaleTimeString()}.
    
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

在CodePen上试试看
例子中通过setInterval()函数的回调，每秒调用次ReactDOM.render()。

注解:
实际上大部分React应用只会调用一次ReactDOM.render()。在下一节，我们将学会如果将这种代码封装在状态组件中。
我们建议你不要跳过该主题，因为他们都是互相关联的。

React只会更新那些需要更新的

React DOM将element和它的子孙和之前的进行对比，只会进行必要的DOM更新，来使DOM达到预期的状态。
用浏览器工具查看上一个例子，可以验证这一说法。

即使每滴答一下，我们就创建一个新的element来描述整个UI树，也只有那个文本变化的文本节点得到更新，这都是React DOM的功劳。
以我们的经验来说，去思考UI在某时刻是如何表现的，而不是一段时间内UI该如何变化。这样可以消除一大堆的bugs。