Hooks + TS 搭建一个任务管理系统（二）：数据驱动UI

2023-09-18 03:38:28

数据驱动UI的魅力

在现代前端开发中，数据驱动UI已成为主流趋势。其核心思想是将应用程序的状态与UI紧密绑定，当状态发生变化时，UI也会随之更新。这种设计模式不仅可以简化开发流程，还可以提高应用程序的性能和响应速度。

构建项目列表组件

接下来，我们将构建一个能够动态渲染项目列表的 React 组件。首先，我们需要定义一个名为 ProjectList 的函数组件：

import React from "react";

const ProjectList = () => {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    fetchProjects();
  }, []);

  const fetchProjects = async () => {
    const response = await fetch("/api/projects");
    const data = await response.json();
    setProjects(data);
  };

  return (
    <ul>
      {projects.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  );
};

export default ProjectList;

在这个组件中，我们首先使用 useState 钩子来定义 projects 状态，用于存储项目列表数据。然后，我们使用 useEffect 钩子来在组件挂载时获取项目列表数据。最后，我们使用 map 方法来遍历 projects 状态，并为每个项目渲染一个 <li> 元素。

将组件集成到应用程序中

现在，我们需要将 ProjectList 组件集成到我们的应用程序中。我们可以创建一个新的页面，并在其中导入 ProjectList 组件：

import React from "react";
import ProjectList from "./ProjectList";

const ProjectsPage = () => {
  return (
    <div>
      <h1>项目列表</h1>
      <ProjectList />
    </div>
  );
};

export default ProjectsPage;

在 App.js 文件中，我们需要在路由表中添加一个新的路由，指向 ProjectsPage：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import ProjectsPage from "./ProjectsPage";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={ProjectsPage} />
      </Switch>
    </Router>
  );
};

export default App;