React 自定义 Hooks（钩子）

Hooks 钩子是可重用的函数。

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

自定义钩子以 "use" 开头。比如：useFetch。

构建一个钩子

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

我们将使用 JSONPlaceholder 服务获取虚拟数据。这个服务非常适合在没有现有数据的情况下测试应用程序。

要了解更多信息，请查看 JavaScript 获取 API 部分。使用 JSONPlaceholder 服务获取虚拟 “todo” 项并在页面上显示标题:

实例:

index.js:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
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>;
        })}
    </>
  );
};
ReactDOM.render(<Home />, document.getElementById("root"));

运行一下

其他组件中也可能需要 fetch 逻辑，因此我们将把它提取到一个自定义钩子中。

将提取逻辑移动到一个新文件作为自定义钩子:

实例:

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";
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>;
        })}
    </>
  );
};
ReactDOM.render(<Home />, document.getElementById("root"));

运行一下

实例解释

我们创建了一个名为 useFetch.js 的新文件，其中包含一个名为 useFetch 的函数，该函数包含获取数据所需的所有逻辑。我们删除了硬编码的 URL，并将其替换为可以传递给自定义钩子的 URL 变量。

最后，我们从我们的钩子中返回数据。

在 index.js 中，我们导入 useFetch 钩子，并像其他钩子一样使用它。这就是我们传递 URL 以从中获取数据的地方。

现在我们可以在任何组件中重用此自定义钩子以从任何 URL 获取数据了。

React 自定义 Hooks（钩子）

构建一个钩子

实例:

实例:

实例解释

分类导航