React教程 - 3. 渲染元素

本文译自React官方文档
全文翻译及相关代码,请参看我的Github

在React应用中,元素是最小的构建单位。
元素用于描述你想在屏幕上看到的东西:

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

不同于浏览器的DOM元素,React元素是简单对象(Plainj Object),并且创建代价很小。React DOM负责更新DOM,使其与React元素的一致。

注意:
一个更广为人知的概念-“组件(Components)”可能会让你与”元素”混淆。我们将在下一部分介绍组件。元素是用于建立组件的”原料”之一

1.将元素渲染为DOM

假设在你的HTML文件中的某处有一个div:

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

我们将其称为根元素-其内部所有事物都将由React DOM进行管理。
采用React创建的应用通常有一个根DOM节点。如果是想要将React结合入某个已有的应用,您可以根据需要创建任意多个根DOM节点。
利用ReactDOM.render()将一个React元素渲染至根DOM节点:

1
2
3
4
5
const element = <h1>Hello, World</h1>;
ReactDOM.render(
element,
document.getElementById('root');
);

在CodePen中尝试
这段代码会在页面上显示”Hello World”

2.更新被渲染的元素

React元素是的不可变的。一旦创建完成一个元素后,您无法改变其子元素或属性。元素就好比是电影中的某一帧:其代表了某个时间点的UI。
根据我们至今所学,更新UI的唯一方式是创建一个新元素并将其传递个ReactDOM.render():
如下面这个时钟实例所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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中尝试
其通过setInterval()每隔一秒调用一次ReactDOM.render()

注意:
实际上,大多React应用只调用一次ReactDOM.render()。在下一部分我们将学习如何将这些代码封装至有状态的组件

3.React只更新需要更新的部分

React DOM会将元素及其子元素与先前状态进行比较,并且只会更新状态变动的元素。
你可以通过浏览器工具查看上一个实例
tick
尽管我们每秒都创建了一个用于描述整个UI树的元素,但只有文本节点的内容被React DOM更新了。
根据我们的经验,”考虑UI全部时刻的状态而不是如何随时间改变它”能够避免许多问题。

本文首发于http://www.miaoyunze.com/,转载请注明出处