31、使用 TypeScript 开发 React.js 应用程序

使用 TypeScript 开发 React.js 应用程序

1. 天气应用的初步开发

在开发天气应用时，我们进行了以下操作：
1. 确保 useEffect() 调用 getWeather() 函数，该函数使用 fetch() API 来获取伦敦的天气信息。
2. 声明 weather 状态以存储检索到的温度和湿度，这些是检索到的天气对象的部分属性。
3. 添加 handleSubmit() 事件处理程序，以便在用户输入城市名称并点击“获取天气”按钮后调用 getWeather() 函数。
4. 修改 getWeather() 函数，将检索到的天气信息保存到 weather 状态中。
5. 在表单下方的网页上显示检索到的温度。

不过，我们不应该将所有应用逻辑都放在一个 App 组件中。接下来，我们将创建一个单独的组件来负责显示天气数据。

2. React 组件类型：容器组件与展示组件

React 应用是一个组件树，我们需要区分容器组件和展示组件：
- 容器组件（智能组件） ：包含应用逻辑，与外部数据提供者通信，并将数据传递给其子组件。通常是有状态的，并且很少或没有标记。
- 展示组件（哑组件） ：仅从其父组件接收数据并显示它。典型的展示组件是无状