React 自定义挂钩重新获取数据 - Javascript

React 自定义挂钩是一种非常方便的方式来管理组件状态。但是当我们使用挂钩时，有时需要重新获取数据并更新状态。在这篇文章中，我们将介绍如何使用自定义挂钩重新获取数据。

使用 useEffect()

使用 useEffect() 挂钩可以在组件挂载后和更新后执行代码。我们可以传递一个数组作为第二个参数，该数组包含要监视的状态。当监视的状态更改时， useEffect() 挂钩将被重新执行。

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

function fetchData(url, setData) {
  fetch(url)
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => console.log(err));
}

function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData(url, setData);
  }, [url]);

  return data;
}

function MyComponent() {
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  const data = useFetchData(url);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

export default MyComponent;

在上面的示例中，我们首先定义了一个 fetchData() 函数，该函数使用 fetch() 方法从指定的 url 获取数据，然后使用 setData() 函数更新组件状态。

接下来，我们定义了一个名为 useFetchData() 的自定义挂钩函数，该函数接收 url 作为参数，并返回从 url 获取数据的结果。在 useEffect() 挂钩中，我们使用 fetchData() 函数获取数据，并在更改 url 时重新执行。

最后，在我们的组件中，我们使用 useFetchData() 挂钩获取数据，并展示数据。如果 data 为空，我们将展示 "Loading..." 的消息。

使用 useCallback()

使用 useCallback() 挂钩可以缓存函数，并且只会在其依赖项更改时才会创建新函数。这对于性能优化非常有用。我们可以将 fetchData() 函数作为参数传递给 useCallback() 挂钩，并在需要重新获取数据时调用该函数。

import React, { useState, useEffect, useCallback } from "react";

function fetchData(url, setData) {
  fetch(url)
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => console.log(err));
}

function useFetchData(url) {
  const [data, setData] = useState(null);

  const fetch = useCallback(() => {
    fetchData(url, setData);
  }, [url]);

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

  return data;
}

function MyComponent() {
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  const data = useFetchData(url);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

export default MyComponent;

在上述示例中，我们通过将 fetchData() 函数传递给 useCallback() 挂钩，并在 useEffect() 中调用缓存的函数来重新获取数据。这将确保在 url 更改时只会创建一个新函数。

结论

使用自定义挂钩重新获取数据是一种非常方便的方式来管理组件状态。我们可以通过 useEffect() 挂钩在组件挂载后和更新后执行代码，并通过 useCallback() 挂钩缓存函数来进行性能优化。无论哪种方法，都可以让我们更好地处理数据并更新组件状态。