React Hooks 数据获取指南：利用 state 和 effect Hooks 获取数据

2024-01-12 05:55:26

利用 React Hooks 高效获取和管理数据

在当今飞速发展的网络环境中，及时获取和展示数据至关重要，它能够打造互动性和吸引力的 Web 应用程序。React Hooks 提供了一种优雅且强大的机制，帮助你轻松高效地从各种来源获取数据。在本篇博文中，我们将深入探究如何利用 state 和 effect Hooks 来实现这一目标。

使用 state Hooks 管理数据

state Hooks（例如 useState）使我们能够管理 React 组件中的内部状态。它们非常适合管理从数据源获取的数据。例如，我们可以创建一个 state Hook 来存储 Hacker News API 返回的热门文章：

const [articles, setArticles] = useState([]);

使用 effect Hooks 获取数据

effect Hooks（例如 useEffect）允许我们在组件生命周期的特定点执行副作用，比如获取数据。我们可以利用 useEffect 在组件挂载时获取数据：

useEffect(() => {
  const fetchArticles = async () => {
    const response = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json');
    const articleIds = await response.json();
    const articles = await Promise.all(articleIds.slice(0, 10).map(async (id) => {
      const articleResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);
      return await articleResponse.json();
    }));
    setArticles(articles);
  };
  fetchArticles();
}, []);

此 useEffect Hook 在组件挂载时执行（空依赖数组 []），调用 fetchArticles 函数获取数据，并将其存储在 articles state 中。

展示数据

获取数据后，我们就可以使用它来动态更新 UI。例如，我们可以映射 articles 数组并在 HTML 中渲染它们：

{articles.map((article) => (
  <li key={article.id}>
    <a href={article.url}>{article.title}</a>
  </li>
))}

示例：从 Hacker News API 中获取热门文章

以下是一个完整的示例，展示如何使用 state 和 effect Hooks 从 Hacker News API 中获取热门文章：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    const fetchArticles = async () => {
      const response = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json');
      const articleIds = await response.json();
      const articles = await Promise.all(articleIds.slice(0, 10).map(async (id) => {
        const articleResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);
        return await articleResponse.json();
      }));
      setArticles(articles);
    };
    fetchArticles();
  }, []);

  return (
    <div>
      <ul>
        {articles.map((article) => (
          <li key={article.id}>
            <a href={article.url}>{article.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;