【译】快速起步-渲染元素

react version: 15.5.0

渲染元素

Elements 是 React 应用中的最小单元。

一个元素定义了你会在屏幕上看到什么：

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

React 元素是很容易创建的纯对象，不同于浏览器的DOM元素。React DOM 负责从 React元素来更新DOM。

注意：

人们可能会将元素与更广为人知的组件混淆。我们将在 下一节 讨论组件。组件是由元素构成的，请不要跳过阅读本章节。

渲染元素到DOM中

在您的HTML文件中有一个 <div> ：

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

我们称它为根节点，因为它的内容都将被React DOM管理。

使用 React 构建的应用程序通常拥有单个根节点。如果你是整合 React 到已经存在的应用中，你可以以你喜欢的方式使用多个独立的根节点。

通过 ReactDOM.render() 来将 React 元素 渲染到 根节点中：

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

CodePen Demo

它会在页面上显示 "Hello, world"。

更新渲染完成的元素

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 Demo

通过 setInterval() 的回调函数，每一秒都会调用 ReactDOM.render()。

注意：

在实际运用中，许多React应用都仅仅只会调用一次 ReactDOM.render()。在下一节，我们将会学习如何将这些代码封装为 有状态组件。

我们建议不要跳过某些主题，因为它们彼此之间具有联系。

React 只更新有必要的部分

React DOM将元素及其子元素与上一个进行比较，然后仅将变化了的内容更新到指定DOM上。

可以通过浏览器DOM检查工具来验证 Demo 的局部更新，。

即使我们每时每刻都创建一个表示整个UI树的元素，也只有内容有变化的文本节点才会被React DOM更新。

以我们的经验，考虑UI在某个时刻的展现而不是考虑如何随时间去改变UI，可能会避免很多bug。