元素渲染 (精读React官方文档

这是我参与更文挑战的第16天，活动详情查看：更文挑战

元素是什么？

官方描述：元素是构成 React 应用的最小砖块。元素描述了你在屏幕上想看到的内容。与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

解读

React元素的本质是对象。
React DOM会负责将这个对象更新到DOM中，来和React元素保持一致。
组件和元素是不同的，组件是由元素组成的。

元素举例

const element = <h1>Hello, world</h1>;
复制代码

将一个元素渲染为DOM

一般情况下React构建的应用通常只有一个根节点。

通过ReactDOM.render将React元素渲染到根DOM节点

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

更新已渲染的元素

官方描述：React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

解读

在React中要想更新UI必须调用render。

React只更新它需要更新的部分

官方描述：React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

解读

React在更新的时候，不会全部更新，只会更新不同的地方，这是一种通俗的说法，也就是React在更新的时候，会调用Diff算法，关于这个算法的详细描述，后面我会出专门的专栏进行讲解。

例子

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);
复制代码