2.Rendering Elements（渲染元素）

React版本：15.4.2
**翻译：xiyoki **

元素是React应用程序最小的构建块。
元素描述了你想在屏幕上看到什么：

const element = 
Hello, world
;

与浏览器DOM元素不同，React元素是纯对象，创建起来很廉价。React DOM 负责更新DOM，以匹配React元素。

注意：
人们可能将元素与更广为人知的‘组件’的概念混淆。我们将在下一节中介绍组件。元素是组件的构成部分。

Rendering an Element into the DOM（将元素渲染到DOM中）

假如在你的HTML文件某处有一个

:

我们将其称为‘根’DOM节点，因为其中的所有内容将由React DOM管理。
仅使用React构建的应用程序通常具有单个根DOM节点。如果将React集成到现有应用程序中，则可以拥有尽可能多的孤立的根DOM节点。
要将React元素渲染到根DOM节点，请将两者都传入ReactDOM.render():

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

它在页面上显示‘Hello World’。

Updating the Rendered Element（更新已渲染的元素）

React元素是不可变的。创建元素后，你不能更改其子元素或属性。元素像电影中的单个帧：它表示某个时间点的UI。
根据我们迄今为止的知识，更新UI的唯一方法是创建一个新的元素，并将其传入ReactDOM.render()。
考虑这个滴答时钟示例：

function tick() {
  const element = (
    

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

setInterval(tick, 1000);

上述代码从一个setInterval()回调中每隔一秒调用一次ReactDOM.render()。

注意：
在实践中，大多数React应用程序只调用一次ReactDOM.render()。在接下来的章节中，我们将学习如何将这样的代码封装成有状态的组件。

React Only Updates What's Necessary（React只更新所需的）

React DOM 将元素及其子元素与先前对应的元素进行比较，并且只在必要时更新DOM，以使DOM达到所需的状态。
你可以通过使用浏览器工具检查最后一个示例来验证：

即使我们在每个tick上创建一个描述整个UI树的元素，但只有内容改变的文本节点才被React DOM 更新。
根据我们的经验，思考UI在任何给定的时刻应该的样子，而不是考虑如何随着时间变化去改变它以消除某类bug。