• 1.将元素渲染为DOM
• 2.更新被渲染的元素
• 3.React只更新需要更新的部分

本文译自React官方文档
全文翻译及相关代码，请参看我的Github

在React应用中，元素是最小的构建单位。
元素用于描述你想在屏幕上看到的东西：

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

不同于浏览器的DOM元素，React元素是简单对象(Plainj Object)，并且创建代价很小。React DOM负责更新DOM，使其与React元素的一致。

注意：
一个更广为人知的概念-“组件(Components)”可能会让你与”元素”混淆。我们将在下一部分介绍组件。元素是用于建立组件的”原料”之一

1.将元素渲染为DOM

假设在你的HTML文件中的某处有一个div:

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

我们将其称为根元素-其内部所有事物都将由React DOM进行管理。
采用React创建的应用通常有一个根DOM节点。如果是想要将React结合入某个已有的应用，您可以根据需要创建任意多个根DOM节点。
利用ReactDOM.render()将一个React元素渲染至根DOM节点：

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

在CodePen中尝试
这段代码会在页面上显示”Hello World”

2.更新被渲染的元素

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);

在CodePen中尝试
其通过setInterval()每隔一秒调用一次ReactDOM.render()

注意：
实际上，大多React应用只调用一次ReactDOM.render()。在下一部分我们将学习如何将这些代码封装至有状态的组件

3.React只更新需要更新的部分

React DOM会将元素及其子元素与先前状态进行比较，并且只会更新状态变动的元素。
你可以通过浏览器工具查看上一个实例

尽管我们每秒都创建了一个用于描述整个UI树的元素，但只有文本节点的内容被React DOM更新了。
根据我们的经验，”考虑UI全部时刻的状态而不是如何随时间改变它”能够避免许多问题。