React Custom Hooks

Móc là chức năng có thể tái sử dụng.

Khi bạn có logic thành phần cần được sử dụng bởi nhiều thành phần, chúng tôi có thể trích xuất logic đó vào một Hook tùy chỉnh.

Hooks tùy chỉnh bắt đầu bằng "sử dụng". useFetchVí dụ :.

Xây dựng một móc

Trong đoạn mã sau, chúng tôi đang tìm nạp dữ liệu trong Homethành phần của mình và hiển thị nó.

Chúng tôi sẽ sử dụng dịch vụ JSONPlaceholder để tìm nạp dữ liệu giả. Dịch vụ này rất tốt để thử nghiệm các ứng dụng khi không có dữ liệu hiện có.

Để tìm hiểu thêm, hãy xem phần API Tìm nạp JavaScript .

Sử dụng dịch vụ JSONPlaceholder để tìm nạp các mục "việc cần làm" giả và hiển thị các tiêu đề trên trang:

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

Logic tìm nạp cũng có thể cần thiết trong các thành phần khác, vì vậy chúng tôi sẽ trích xuất nó vào một Hook tùy chỉnh.

Di chuyển logic tìm nạp sang một tệp mới để được sử dụng làm Hook tùy chỉnh:

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;

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

Giải thích ví dụ

Chúng tôi đã tạo một tệp mới có tên useFetch.jschứa một hàm được gọi là useFetchchứa tất cả logic cần thiết để tìm nạp dữ liệu của chúng tôi.

Chúng tôi đã xóa URL được mã hóa cứng và thay thế nó bằng một urlbiến có thể được chuyển đến Hook tùy chỉnh.

Cuối cùng, chúng tôi đang trả lại dữ liệu từ Hook của chúng tôi.

Trong index.jsđó, chúng tôi đang nhập useFetchHook của mình và sử dụng nó như bất kỳ Hook nào khác. Đây là nơi chúng tôi chuyển URL để tìm nạp dữ liệu từ đó.

Bây giờ chúng ta có thể sử dụng lại Hook tùy chỉnh này trong bất kỳ thành phần nào để tìm nạp dữ liệu từ bất kỳ URL nào.