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

作者:日期:2017-02-09 19:57:23 点击:92

三、渲染元素

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()方法:

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

更新渲染元素

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

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

考虑这个滴答时钟示例:

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比较,按需更新)。

上一篇: 基于Node.js的爬虫入门

下一篇: React从入门到精通系列之(4)组件化和Props传递