Node与Express开发（第2版）

单页应用

｜

181

{vacations.map(vacation =>

<div key={vacation.sku}>

<h3>{vacation.name}</h3>

<p>{vacation.description}</p>

<span className="price">{vacation.price}</span>

</div>

)}

</div>

</>

)

}

跟前面一样，

useState

配置了组件的状态数据，让它包含一个

vacations

数组，并提供属

性设置方法。现在我们增加了

useEffect

，它会调用

API

获取度假数据，然后异步调用这

个属性设置方法。注意我们给

useEffect

传入了一个空数组作为第二个参数，这是给

React

的一个信号，告诉它这个

effect

钩子只应该在组件刚被挂载的时候运行一次

。表面上，以

这种方式给出信号似乎有些怪异，一旦对钩子有了更多了解，你就会发现实际上它是始终

如一的。更多信息请查阅

React

文档中的钩子部分。

钩子是相对较新的概念，是在

2019

年

2

月份的版本

16.8

中才加入的

，因此，即使你已经

有了一些

React

的开发经验

，也可能对它们并不熟悉。我坚持认为，钩子是在

React

架构

上一项卓越的创新，而且，尽管开始看起来有些怪异，最终你还是会发现它们实际上简化

了你的组件，并且可以减少那些人们常犯的更棘手的、与状态相关的错误。

既然已经了解了如何从服务器获取数据，那么再来关注一下另一个方向的信息传输。

16.4.5

　向服务器发送信息 ...