React核心概念：渲染元素

上一节：JSX简介
下一节：组件&Props

引言

元素是React App中最小的构建块

元素描述了你在屏幕上看到的图形界面

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

不想浏览器的DOM元素，React元素是便于构建的普通对象。React DOM负责更新DOM以匹配React元素。

提示：
有人可能会把React元素和更广为人知的组件混淆，但要注意的是组件是由元素构成的。组件将在下一节讲解，这里建议先看完元素在进行下一步的学习。

将元素渲染进DOM

让我们设想一下在你的HTML文件中有一个<div>

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

因为在标签内部的所有元素都由React DOM管理，所以我们将这个<div>标签称作根节点。

使用React构建的应用通常有一个单独的根DOM节点。但如果您要在现有的应用中集成React，那么您可以按照需求构建许多独立的DOM根节点。

想要将React元素渲染进根DOM节点，则需要将这两者作为参数传递给ReactDOM.render()方法

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

上述代码将会在屏幕上展示Hello, world。

更新React元素

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()更新UI

提示：
在实践中，大部分React应用只调用ReactDOM.render()一次。在下节内容中我们将会讲述如何将这样的代码封装进组件中。

React只更新必要的内容

ReactDOM会将当前元素（包括子元素）与更新之前的元素作比较并且只更新能将DOM带入期望状态的那部分元素。

您可以通过浏览器来观察上一段代码的更新过程。

即使我们创建的元素是描述整个时钟的，但也只有时间内容被React DOM更新了。

根据我们的经验，考虑UI在任意时刻的状态而不是考虑随着时间变化的过程，可以消除一整类的bug。

上一节：JSX简介
下一节：组件&Props