React 元素渲染学习

元素是构成React应用的最小单位，用来描述我们在屏幕上看到的内容：

const element = <h1>hello</h1>

与浏览器的DOM元素不同，React当中的元素是普通的对象，React DOM可以确保浏览器DOM的数据内容与React元素保持一致。

将元素渲染到DOM中

我们在一个HTML页面中添加一个id="root"的根元素：
<div id="root"></div>在这个根元素中的所有内容都将由React DOM来管理，我们将其称为“根”DOM节点。我们在用React开发应用时一般只会定义一个根节点。如果我们是在一个已有的项目中引入React，我们可能会在不同的部分单独定义React根节点。
渲染方法：ReactDOM.render();
我们将元素传入这个方法，就可以将传入的元素渲染到页面上：

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

更新元素渲染

我们想想加入我们想我们定义的元素，如何做？当元素被创建后，目前是无法改变其内容和属性的。
一个元素就好像动画里的一帧，代表着页面某一个时间点的样子。
我们目前还没学习state什么的，根据现有的知识，我们想要更新页面的方法只有创建一个新的元素，然后将它传入渲染的方法中，重新渲染。
比如计数器：

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

这个例子，我们每秒传入render一个元素，每秒重新渲染一次。
注意：实际上，大多数时候React应用只会调用一次render方法，后续我们会继续学习。

React只会更新必要的部分

在上一个例子中，感觉上是每秒重新渲染一次，就应该是根节点的所有内容都会被替换重新渲染，我们可以打开控制台查证，并不是如此。

image.png

我们看变化的只有时间，其他的并没有变化。
事实上，React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。