Contoh balas menggunakan useEffect dan React Query

Mari kita lihat contoh balas menggunakan useEffect dan React Query untuk mengambil dan memaparkan data dalam komponen React, memfokuskan pada cara setiap pendekatan mengendalikan pengambilan data dan kesan sampingan.

Kami akan menganggap kami mengambil kiraan semasa daripada API dan kiraan ini dikemas kini dalam masa nyata. Matlamatnya adalah untuk memaparkan kaunter dan memastikan ia dikemas kini dengan data baharu daripada API.

Senario 1: Menggunakan useEffect

Di sini, kami menggunakan useEffect untuk mengambil data kaunter dan mengendalikan keadaan secara manual.

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

fungsi Counter() {
const [count, setCount] = useState(null); // Nyatakan untuk menyimpan kaunter
const [loading, setLoading] = useState(true); // Keadaan untuk memuatkan
const [ralat, setError] = useState(null); // Nyatakan untuk pengendalian ralat

useEffect(() => {
const fetchCounter = tak segerak () => {
cuba {
setLoading(benar); // Mula memuatkan
respons const = tunggu fetch("/api/counter"); // Panggilan API untuk mendapatkan nilai kaunter
jika (!response.ok) {
buang Ralat baharu("Ralat mengambil kaunter");
}
data const = tunggu respons.json();
setCount(data.count); // Tetapkan nilai pembilang
} tangkap (err) {
setError(err.message); // Tetapkan keadaan ralat
} akhirnya {
setLoading(false); // Berhenti memuatkan
}
};

fetchCounter(); // Fetch the counter on mount

}, []); // Tatasusunan pergantungan kosong bermakna ia berjalan sekali pada pelekap

jika (memuatkan) kembali

kembali (

Kaunter: {count}

eksport Kaunter lalai;

Penjelasan:

Pengurusan Negeri: Kami mengurus tiga keadaan secara manual: kiraan, pemuatan dan ralat.

Pengambilan Data: Fungsi fetchCounter ditakrifkan dalam cangkuk useEffect, yang berjalan pada pelekap komponen (susunan kebergantungan kosong).

Pengendalian dan Pemuatan Ralat: Kedua-dua keadaan pemuatan dan ralat perlu dikendalikan dengan jelas.

Pengambilan semula: Jika kami perlu mengambil semula data (cth., apabila pengguna melawat semula halaman atau jika tetingkap kembali fokus), kami perlu melaksanakan logik itu secara manual.

Senario 2: Menggunakan React Query

Di sini, kami menggunakan React Query untuk memudahkan proses pengambilan data. React Query secara automatik mengendalikan caching, pemuatan, ralat dan pengambilan semula.

import React daripada "react";
import { useQuery } daripada "react-query";

fungsi Counter() {
const { data, ralat, isLoading } = useQuery("counter", async () => {
respons const = tunggu ambil("/api/counter");
jika (!response.ok) {
buang Ralat baharu("Ralat mengambil kaunter");
}
return response.json();
});

jika (isLoading) kembali

kembali (

Kaunter: {data.count}

eksport Kaunter lalai;

Penjelasan:

Pengurusan Negeri: React Query mengurus keadaan secara automatik (pemuatan, ralat, data). Tidak perlu menetapkan keadaan secara eksplisit untuk memuatkan atau ralat.

Pengambilan Data: Cangkuk useQuery memudahkan pengambilan. Ia secara automatik mengurus caching, kemas kini latar belakang dan cuba semula.

Ralat Pengendalian dan Pemuatan: React Query mengendalikan ini secara dalaman, dan cangkuk mengembalikan isLoading dan keadaan ralat yang boleh digunakan terus dalam UI.

Pengambilan semula: React Query mengambil semula data secara automatik apabila pengguna melawat semula halaman atau apabila tetingkap mendapat fokus. Ia juga boleh disediakan untuk mengambil semula pada selang masa atau berdasarkan syarat tersuai.

Perbandingan Dua Pendekatan:

Kesimpulan:

useEffect sangat bagus untuk mengendalikan kesan sampingan tersuai atau sekali, tetapi apabila melibatkan pengambilan data, ia memerlukan pengurusan keadaan manual dan lebih banyak kod boilerplate.

React Query memudahkan pengambilan data dengan ketara dengan mengabstrakkan tugas biasa seperti pemuatan, pengendalian ralat dan caching. Ia sesuai untuk senario di mana anda berurusan dengan data yang kerap berubah atau memerlukan ciri seperti pengambilan semula latar belakang dan caching.

Atas ialah kandungan terperinci Contoh balas menggunakan useEffect dan React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!