React钩子：获取数据

2023-10-20 06:45:32

使用 React Hooks 获取数据

React Hooks 是一个强大且灵活的工具，它允许您在函数组件中使用状态和生命周期方法。在本文中，我们将使用两个最常用的 Hooks —— useState 和 useEffect —— 来演示如何获取数据。

首先，让我们从导入必要的包开始：

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

使用 `useState` 管理状态

首先，我们需要创建一个状态变量来存储我们的数据。我们将使用 useState Hook 来做到这一点：

const [data, setData] = useState([]);

useState Hook 返回一个数组，第一个元素是当前状态，第二个元素是更新状态的函数。在我们的例子中，data 是一个存储数据的数组，而 setData 是更新数组的函数。

使用 `useEffect` 发送网络请求

接下来，我们需要使用 useEffect Hook 来发送网络请求。useEffect Hook 允许您在组件渲染后执行某些操作。在本例中，我们将使用它来发送网络请求并更新状态：

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, []);

useEffect Hook 接受两个参数：一个回调函数和一个依赖数组。回调函数是我们想要在组件渲染后执行的操作。在本例中，回调函数是一个名为 fetchData 的异步函数。fetchData 函数发送一个网络请求并更新状态。

依赖数组告诉 useEffect Hook 在组件渲染后立即执行回调函数。如果我们不提供依赖数组，回调函数将在每次组件渲染时执行。

使用自定义 Hooks 进行复用

如果您想在应用程序的不同地方重用 fetchData 函数，您可以将其提取到一个自定义 Hook 中：

const useFetchData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      setData(data);
    };

    fetchData();
  }, []);

  return data;
};

然后，您可以在应用程序的不同地方使用 useFetchData Hook：

import useFetchData from './useFetchData';

const MyComponent = () => {
  const data = useFetchData();

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};