React 自定义 Hooks

Hooks 是可重用的函数。

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

自定义 Hooks 以"use"开头。示例:useFetch.

建立一个 Hook

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

我们将使用 JSONPlaceholder 服务来获取虚假数据。此服务非常适合在没有现有数据时测试应用程序。

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

使用 JSONPlaceholder 服务获取虚假的"待办事项"并在页面上显示标题:

实例:

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 />);

运行实例 »