快速上手React Hooks技术：获取数据和入门指南

2023-11-15 05:16:12

React Hooks：在数据获取中发挥强大的作用

React Hooks 已成为 React 函数组件不可或缺的利器，赋予它们使用状态和生命周期方法的能力。本文将深入探讨如何在 React Hooks 中获取数据，并通过实践示例指导你构建自定义 Hook 以实现代码重用。

利用状态和效果 Hook 获取数据

首先，让我们创建用于获取数据的 React 组件。我们将使用 Hacker News API 提取热门技术文章，并逐步分解其实现：

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

const DataFetching = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    axios
      .get('https://hn.algolia.com/api/v1/search?query=react')
      .then(res => {
        setData(res.data.hits);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>{error}</p>}
      <ul>
        {data.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetching;

useState Hook： 用于管理组件的状态，包括数据、加载状态和错误消息。
useEffect Hook： 用于在组件挂载后执行副作用，如获取数据。
Hacker News API： 用于检索热门技术文章的数据。
条件渲染： 根据加载状态和错误消息显示相应的界面元素。

构建自定义 Hook 以实现代码重用

为了提高代码重用性，我们可以创建一个自定义 Hook，封装数据获取逻辑：

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

const useDataFetching = url => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    axios
      .get(url)
      .then(res => {
        setData(res.data.hits);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default useDataFetching;

参数化 Hook： useDataFetching Hook 接受一个 URL 参数，指定要获取数据的 API 端点。
返回对象： Hook 返回一个包含数据、加载状态和错误消息的对象。

将自定义 Hook 与数据获取组件集成

现在，我们可以将自定义 Hook 与数据获取组件集成：

import React from 'react';
import useDataFetching from './useDataFetching';

const DataFetching = () => {
  const { data, loading, error } = useDataFetching('https://hn.algolia.com/api/v1/search?query=react');

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>{error}</p>}
      <ul>
        {data.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetching;