【山东大学软件学院21级项目实训】前端2：创建一个现代化用户资料页面：使用 React、Material-UI 和 React Query

前提回顾：

在本文中，我们将深入探讨如何使用 React、Material-UI 和 React Query 创建一个现代化的用户资料页面。这个页面将展示用户的头像、基本信息、状态面板以及活动热图。让我们逐步解析这个过程，并探讨每个部分的实现细节。

技术栈简介

React: 一个用于构建用户界面的 JavaScript 库。
Material-UI: 一个受 Google Material Design 规范启发的 React 组件库。
React Query: 一个用于数据获取和状态管理的库，简化了与服务器通信的流程。

项目结构

为了方便管理，我们将代码分成多个组件。主要组件包括 Profile、HistoryInfoPanel、StatusPanel 和 DayHeatmap。我们会专注于 Profile 组件，它是整个页面的核心。

代码解析

创建 `Profile` 组件

Profile 组件是整个页面的核心，负责展示用户的头像、基本信息和其他子组件。以下是 Profile 组件的实现：

获取查询参数和用户数据

export default function Profile() {
  const [params, setParams] = useSearchParams();
  const { isLoading, isSuccess, data } = useQuery({
    queryKey: [`${get_user_info}/${params.get("id") ?? localStorage.getItem("userId")} `],
    queryFn: queryFn,
  });

useSearchParams: 这个钩子函数用于获取和设置 URL 查询参数。这里我们获取 id 参数。

useQuery: 来自 React Query，用于执行异步数据请求。我们定义了 queryKey 和 queryFn：

queryKey: 是请求的唯一键值，用于缓存和数据匹配。这里我们使用用户信息的 URL 以及用户 ID 作为键值。
queryFn: 是实际执行请求的函数，负责从服务器获取数据。

子组件：`StatusPanel` 和 `DayHeatmap`

在 Profile 组件中，我们还嵌入了 StatusPanel 和 DayHeatmap 子组件：

<Grid item xs={12}>
  <Container sx={{ marginTop: 2, marginBottom: 2 }}>
    <StatusPanel />
  </Container>
</Grid>
<Grid item xs={12}>
  <Container
    sx={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      marginTop: 3,
    }}
  >
    <DayHeatmap type="user" id={localStorage.getItem("userId")} />
  </Container>
</Grid>

StatusPanel: 这是一个自定义组件，显示用户的状态信息。

DayHeatmap: 显示用户活动的热图。这里传递了 type 和 id 属性，id 从 localStorage 中获取。

整体渲染效果

总结

通过结合 React、Material-UI 和 React Query，我们可以轻松创建一个功能丰富、外观现代的用户资料页面。这个页面不仅展示了用户的基本信息，还集成了多个子组件，提供了全面的用户数据展示和交互功能。通过合理的组件划分和数据管理，我们确保了代码的可维护性和扩展性。