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

使用 TypeScript 开发 React.js 应用

1. 开发天气应用的前期准备

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

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

2. 使用 props

2.1 容器组件和展示组件

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