React 自定义挂钩

钩子是可重用的函数。

当您有需要由多个组件使用的组件逻辑时，我们可以将该逻辑提取到自定义 Hook 中。

自定义 Hook 以 "use" 开头。例子：useFetch。

建立一个钩子

在下面的代码中，我们正在获取数据Home组件并显示它。

我们将使用JSON占位符获取虚假数据的服务。该服务非常适合在没有现有数据的情况下测试应用程序。

要了解更多信息，请查看JavaScript 获取 API部分。

使用 JSONPlaceholder 服务获取假的 "todo" 项并在页面上显示标题：

例子：

index.js:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

运行示例 »

其他组件中也可能需要获取逻辑，因此我们将其提取到自定义 Hook 中。

将获取逻辑移至新文件以用作自定义 Hook：

例子：

useFetch.js:

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

index.js:

import ReactDOM from "react-dom/client";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

运行示例 »

示例解释

我们创建了一个新文件，名为useFetch.js包含一个名为的函数useFetch其中包含获取数据所需的所有逻辑。

我们删除了硬编码的 URL 并将其替换为url可以传递给自定义 Hook 的变量。

最后，我们从 Hook 返回数据。

在index.js，我们正在导入我们的useFetch像任何其他 Hook 一样进行 Hook 和使用它。这是我们传入 URL 来从中获取数据的地方。

现在我们可以在任何组件中重用这个自定义 Hook 以从任何 URL 获取数据。