Node与Express开发（第2版）

174

｜

第

16

章

JSX

中的花括号可以包含任何合法的

JavaScript

表达式，甚至可以包含其他

HTML

元素。

渲染列表就是一个常见的用例：

const colors = ['red', 'green', 'blue']

const html = (

<ul>

{colors.map(color =>

<li key={color}>{color}</li>

)}

</ul>

)

这个例子有几点需要注意。首先，注意我们把

colors

映射成了返回

<li>

元素。这点很关

键，因为

JSX

完

全依靠

表达式

运算。因此，

<ul>

必须要包含一个表达式或表达式的一个数

组。如果你把

map

改成了

forEach

，就会发现那些

<li>

元素没有被渲染。其次，注意那些

<li>

元素接收了一个属性

key

：这是性能上的一个让步。为了让

React

知道何时需要重新

渲染元素，对每个元素它都需要一个唯一键。既然我们的数组元素是唯一的，就可以直接

使用元素的值，但通常你会使用一个

ID

，或者

（如果没有其他属性可用的话）使用元素在

数组中的索引。

继续阅读之前，鼓励你体验一下

client/src/App.js

中的一些

JSX

例子

。如果一直运行

yarn

start

，每次保存修改时，修改的内容都会自动地在浏览器中反映出来，如此无疑会为你的

学习周期加速。

在结束本节内容之前，还有一个话题需要提及，那就是

状态

（

state

）

。每个组件都可以有自

己的状态。状态可以解释为“组件关联的可以修改的数据”。购物车就是一个很好的例子。

购物车组件可以包含商品项目的一个列表，当你增加或移除购物车中的商品时，这个组件 ...