Rendering Elements（渲染节点）

Elements（节点）是React apps中最简单的构建块。

一个Elmeent定义了你将在屏幕上看到什么内容，如：

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

不像浏览器中的DOM节点，React elements其实就是一个普通的对象，你可以很容易的创建它，然后由React DOM来保持element和DOM的更新同步！

  • 注意

一种使人困惑的观念就是把Elements称之为Components，我们将在下一个章节介绍Components！其实Components就是由Elements组合构建起来的，如果作一个比喻：在一个国家中，国家就是一个component，而每一个人就是一个element，由所有的这个国家的人（element）构成了这个国家（component）。我们鼓励你不要跳过本章关于element的讲解，而直接查看component。

Rendering an Element into the DOM（把element渲染到dom中）

我们说过在你的html文件某个地方总有下面的“div”存在：

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

我们之所以称之为根节点，是因为所有在其内部的内容都由React DOM来管理。如果你的app只是用react来构建的话，那么你的页面只会存在一个单一的root节点，但是如果你用react来集成一部分内容到一个已经搭建好的app里面，那么你就可以拥有很多的root节点，当然如果你喜欢的话！

为了把element渲染到dom，需要使用ReactDOM.render():

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

上面的代码将会使你在页面中看到“Hello,World”。

Updating the Rendered Element（更新一个已经渲染过的element）

React elements 是不可变的，只要你创建过一次，那么你就不能修改的它的子节点或者属性，一个Element就好像一部电影的某个瞬间的那一帧照片一样，它代表了用户界面在某个确定时间瞬间的具体状态。

随着我们对react掌握的逐步加深，我们会明白更新用户界面只有一个方法，那就是创建一个新的Element，然后把它传递给ReactDOM.render()，再渲染到页面中。

我们先来看一下关于时钟的例子：

  1.  function tick(){
  2.      const element = (
  3.          <div>
  4.              <h1>Hello,world!</h1>
  5.              <h2>It is {new Date().toLocaleTimeString()}.</h2>
  6.          </div>
  7.      );
  8.      ReactDOM.render(
  9.          element,
  10.          document.getElementById('root')
  11.      );
  12.      setTimeout(tick,1000);
  13.  };
  14.  tick();
  15.  //setInterval(tick,1000);

这段代码会每隔1秒钟调用一次ReactDOM.render()，这里可以使用setInterval或setTimeout。

  • 注意

在实际开发过程中，React apps应该只能调用一次ReactDOM.render()，我们将在下一个章节学习怎样把上面的功能封装到一个stateful components中，我们建议先看完这里，因为它们是彼此依赖的。

React Only Updates What’s Necessary（ReactDOM只会更新需要更新的节点）

React在更新dom的时候，会将当前dom跟前一次的dom作一个对比，然后只会更新有变化的节点，这一点你可以通过浏览器的开发者工具查看代码变化情况得知，如：

Rendering Elements（渲染节点） - 图1

由上面的图片得知，尽管我们我们每一次调用tick方法的时候，我们创建了一个完整的用户界面dom树，但是只有一个文本节点的内容发生了变化，所有ReactDOM只会更新这个文本节点。

以我们以往开发react的经验来看，思考每个确定的时间点，用户界面应该显示什么内容，而不是考虑时刻去修改它可以消除一些类的bug问题。