1.将JSX展现到DOM节点中

React中的经常性的元素，我想大家知道JSX(不知道的读者，请看本人博客JSX讲解)，如下所示，言简意赅：

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

然而不同于浏览器中页面的DOM，React有自己的DOM，即JSX对象，React的一部分作用就是将JSX对象更新到网页中的DOM节点上，如何将JSX对象更新到DOM节点上就是一个关键性的问题了，首先我们需要一个根DOM节点作为一个承载JSX对象的容器，这个东西承载响应的ReactDOM的所有东西。

一般一个应用的建立只会有一个根节点，如果你想整合一个额外的ReactDOM 应用到已经存在的应用中，则需要一个额外的根节点来承载。

将ReactJSX元素展现在DOM节点中是使用React.render()函数`，实例如下：

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

第一个参数为JSX对象，第二参数为要承载的容器节点，所大家也知道怎么玩$6$这个函数了，先来装个逼：

ReactDOM.render(
  <div>-----</div>,document.getElementById('root')
);

2.更新JSX对象的尴尬

根据官网表示，JSX是属于一种不可变的对象，即只要一创建就不能被改变，继续我们c++，java中的字符串一样，是属于常量范围，不容许改变，不能改变属性啊，孩子节点也不可以改变，这个元素就像电影中的某一帧，是处于一个确定的时间点上，不管你放多少遍它都不会发生改变。

那么怎么办呢，唯有创建一个新的JSX对象，然后以你要改变的容器为根节点，通过ReactDOM.render()进行覆盖了。

function tick() {
  const el = (
    <div>
      <h1>Hello,world!</h1>
      <h2>It is {new Date().toString()}.</h2>
    </div>
  );
  ReactDOM.render(
    el,document.getElementById('root')
  );
}
setInterval(tick,1000);

通过这份代码大家就知道了，如果你要改变root容器中的内容，只能用render重新覆盖了。

提醒

这里大家需要知道一个常识，对于大多数React应用而言，React.render()通常只会调用一次，有趣，说好的需要覆盖重复调用呢！好尴尬呀，后续会讲到如何写出只需要调用一次的render调用就可以上述功能的组件。

React渲染DOM节点时，只会渲染改变了的节点，如上面显示时间的代码，它只会更新大括号中的内容，其他的它不会改变，怎么实现的呢？

React会检查当前要更新的节点和之前节点作比较，如果发生了变化才会更新，否则不会更新这个节点，这样非常有效的减少了reflow和repaint渲染，之所以可以这么做的原因，是因为他们是公共的根节点，就是说改变之前的节点的根节点和当前我要更新的根节点处于同一节点，我们通过递归比较就可以知道有没有发生改变。

然而以上的一切都有一个问题，就是实际上我们需要的是，当发生改变时它自然会改变，而不是我们通过时间去控制它改变。

这些种种问题后续的博客会一一解决。

下一篇博客会讲组件和属性对象props