6、使用 React Hooks 编写第一个应用程序（上）

使用 React Hooks 编写第一个应用程序（上）

在开发 React 应用时，合理规划和实现组件是关键步骤。本文将详细介绍如何使用 React Hooks 构建一个博客应用，包括静态组件的实现和状态组件的处理。

1. 规划容器组件

在确定了基本组件后，需要找出逻辑上可以组合在一起的组件，形成容器组件。以下是规划的容器组件：
- PostList 组件 ：用于将文章分组显示。
- UserBar 组件 ：处理用户的登录、注销和注册操作。
- App 组件 ：将其他组件组合在一起，定义应用的整体结构。

2. 实现静态组件

在通过 Hooks 为博客应用添加状态之前，先将应用的基本功能建模为静态 React 组件，处理应用的静态视图结构。这样做可以避免后续将动态代码移动到不同组件，并且先处理 HTML 和 CSS 能帮助我们快速启动项目。

2.1 实现与用户相关的静态组件

与用户相关的功能需要四个组件：
- Login 组件 ：用户未登录时显示，包含用户名和密码输入框以及登录按钮。
- Register 组件 ：用户未登录时显示，与 Login 组件类似，但多一个重复密码的输入框。
- Logout 组件 ：用户登录后显示，显示当前登录用户的姓名和注销按钮。
- UserBar 组件