React从入门到精通系列之(3)渲染元素

三、渲染元素

React元素是React应用程序的最小构建结构。
React元素描述了您想在屏幕上看到什么：

const element = <h1>hello world</h1>;

与浏览器DOM元素不同，React元素是纯对象，创建起来很方便。 React DOM负责匹配React元素并更新DOM。

note
人们可能将元素与更广为人知的“组件”概念混淆。 我们将在下一节中介绍组件。 元素是由什么组件组成的，我们建议您在向前跳过之前阅读此部分。

渲染元素到DOM中

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

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

我们将其称为“root”DOM节点，接下来其中的所有内容将由React DOM来管理。

仅使用React构建的应用程序通常具有单个 root DOM节点。 如果你正在将React集成到现有的应用程序中，则可以创建尽可能多单独的 root DOM节点。

要将React元素渲染到 root DOM节点，可以将它们都传递给ReactDOM.render()方法:

import React from 'react';
import ReactDOM from 'react-dom';

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

更新渲染元素

React元素是不可变的。 创建元素后，您不能更改其子元素或属性。
React元素就像电影中的单个帧：它表示某个时间点的UI。

到目前为止，以我们的知识，更新UI的唯一方法是创建一个新的元素，并将其传递给ReactDOM.render()。

考虑这个滴答时钟示例：

import React from 'react';
import ReactDOM from 'react-dom';

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

它每秒从setInterval()的回调函数中调用ReactDOM.render()。

note
实际上，大多数React应用程序只调用ReactDOM.render()一次。 在接下来的章节中，我们将学习如何将这样的代码封装成有状态的组件。

按需更新

React DOM将元素及其子元素的内容与该元素变化之前的内容进行比较，并仅进行DOM更新以使DOM达到所需的状态。
您可以通过使用浏览器工具检查最后一个示例来验证。
即使我们在每个tick上创建一个描述整个UI树的元素，只有内容发生改变的文本节点才被React DOM更新。

在我们的经验中，思考UI应该如何更新给定的时间，而不是随着时间的更改去修改整体的内容(DOM比较，按需更新)。