React--Rendering Elements（渲染元素）

Rendering Elements（渲染元素）

元素是React应用程序最小的构建块。

元素描述了你想在屏幕上看到什么：

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

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

注意：

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

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

假如在你的HTML文件某处有一个<div>:

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

我们将其称为‘根’DOM节点，因为其中的所有内容将由React DOM管理。
仅使用React构建的应用程序通常具有单个根DOM节点。如果将React集成到现有应用程序中，则可以拥有尽可能多的孤立的根DOM节点。

要将React元素渲染到根DOM节点，请将两者都传入ReactDOM.render():

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

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

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

React元素是不可变的。创建元素后，你不能更改其子元素或属性。元素像电影中的单个帧：它表示某个时间点的UI。

根据我们迄今为止的知识，更新UI的唯一方法是创建一个新的元素，并将其传入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);

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

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

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

React DOM 将元素及其子元素与先前对应的元素进行比较，并且只在必要时更新DOM，以使DOM达到所需的状态。

你可以通过使用浏览器工具检查最后一个示例来验证：

即使我们在每个tick上创建一个描述整个UI树的元素，但只有内容改变的文本节点才被React DOM 更新。

根据我们的经验，想想UI在任何给定的时刻应该的样子，而不是考虑如何随着时间变化去改变它以消除某类bug。

本文译自：https://facebook.github.io/react/docs/rendering-elements.html

欢迎大家来做点评哦......