Skip to content

Latest commit

 

History

History
93 lines (63 loc) · 3.1 KB

【译】快速起步-渲染元素.md

File metadata and controls

93 lines (63 loc) · 3.1 KB
title date react version
快速起步-渲染元素
2017-04-14 07:10:50 -0700
15.5.0

渲染元素

ElementsReact 应用中的最小单元。

一个元素定义了你会在屏幕上看到什么:

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

React 元素是很容易创建的纯对象,不同于浏览器的DOM元素。React DOM 负责从 React元素来更新DOM。

注意:

人们可能会将元素与更广为人知的组件混淆。我们将在 下一节 讨论组件。组件是由元素构成的,请不要跳过阅读本章节。

渲染元素到DOM中

在您的HTML文件中有一个 <div>

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

我们称它为根节点,因为它的内容都将被React DOM管理。

使用 React 构建的应用程序通常拥有单个根节点。如果你是整合 React 到已经存在的应用中,你可以以你喜欢的方式使用多个独立的根节点。

通过 ReactDOM.render() 来将 React 元素 渲染到 根节点中:

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

CodePen Demo

它会在页面上显示 "Hello, world"。

更新渲染完成的元素

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

CodePen Demo

通过 setInterval() 的回调函数,每一秒都会调用 ReactDOM.render()

注意:

在实际运用中,许多React应用都仅仅只会调用一次 ReactDOM.render()。在下一节,我们将会学习如何将这些代码封装为 有状态组件

我们建议不要跳过某些主题,因为它们彼此之间具有联系。

React 只更新有必要的部分

React DOM将元素及其子元素与上一个进行比较,然后仅将变化了的内容更新到指定DOM上。

可以通过浏览器DOM检查工具来验证 Demo 的局部更新,DOM inspector 展示具体更新

即使我们每时每刻都创建一个表示整个UI树的元素,也只有内容有变化的文本节点才会被React DOM更新。

以我们的经验,考虑UI在某个时刻的展现而不是考虑如何随时间去改变UI,可能会避免很多bug。