Daripada useEffect kepada React Query: Memodenkan pengurusan data anda secara bertindak balas

Dalam landskap pembangunan web moden, membina aplikasi pantas dan responsif yang mengurus data sebelah pelayan dengan cekap adalah lebih penting berbanding sebelum ini. Kaedah tradisional untuk mengambil data dalam React, terutamanya menggunakan useEffect, selalunya boleh membawa kepada pengurusan keadaan yang kompleks, kod berulang dan isu prestasi. Dengan React Query, pembangun boleh memanfaatkan ciri seperti caching automatik, pengambilan latar belakang dan sokongan mutasi terbina dalam, semuanya sambil meminimumkan kod boilerplate.

Dalam artikel ini, kami akan meneroka konsep teras React Query, menunjukkan cara menyepadukannya ke dalam projek kami dan menyerlahkan ciri hebatnya yang boleh meningkatkan aliran kerja pembangunan anda dengan ketara. Bersedia untuk mengubah cara anda mengambil, menyimpan cache dan menyegerakkan data dalam aplikasi React anda!

Mengapa kita harus berhenti mengambil data menggunakan React Effects

Semasa menggunakan React's useEffect untuk pengambilan data adalah sah sepenuhnya, terdapat beberapa sebab untuk mempertimbangkan untuk beralih daripadanya dan memihak kepada pustaka pengambilan data khusus seperti React Query (malah dokumentasi React mencadangkan penggunaan React Query untuk pengambilan data).

Beberapa kelemahan menggunakan Effects untuk pengambilan data:

• Isu Prestasi: "air terjun rangkaian" dan pengambilan semula yang tidak perlu ialah beberapa isu biasa apabila menggunakan React useEffect dan boleh membawa kepada pengalaman pengguna yang sangat buruk.
• Kekurangan Caching Terbina dalam: useEffect tidak menyediakan caching di luar kotak, yang menyebabkan permintaan rangkaian berulang dan penyelesaian yang kompleks untuk mengurusnya.
• Kerumitan dalam Pengurusan Negeri: mengurus pemuatan, ralat dan keadaan data secara manual dengan useEffect boleh membawa kepada kod yang menyusahkan dan terdedah kepada ralat, terutamanya apabila aplikasi berskala.
• Kesan tidak dijalankan pada pelayan: data mungkin tidak akan tersedia apabila komponen mula-mula dipaparkan.

Cara React Query berfungsi

React Query ialah perpustakaan berkuasa yang direka untuk memudahkan pengambilan data dan pengurusan keadaan dalam aplikasi React. Berikut ialah pecahan cara React Query berfungsi:

1. Menyoal Data

• useQuery hook: Teras React Query ialah useQuery hook. Cangkuk ini membolehkan anda mengambil data daripada pelayan dan mengurus keadaannya secara automatik (pemuatan, ralat, data…).
• Kunci pertanyaan: Setiap pertanyaan dikenal pasti oleh kunci unik (satu atau lebih rentetan dalam tatasusunan). Kunci ini membantu cache React Query dan mengurus data dengan cekap.

2. Caching

• Caching automatik: Apabila data diambil, React Query menyimpannya dalam cache. Jika pertanyaan yang sama dibuat semula, ia mendapatkan semula data daripada cache dan bukannya membuat permintaan rangkaian baharu.
• Pengurusan data lapuk: Anda boleh menentukan berapa lama data harus dianggap segar (bukan basi). Selepas tempoh ini, React Query akan mengambil semula data di latar belakang.

3. Pengambilan Semula Latar Belakang

React Query mengambil semula data secara automatik dalam beberapa senario untuk memastikan data segar dan segerak. Berikut ialah situasi utama apabila ini berlaku:

• Pemasangan komponen: Apabila komponen dipasang, jika data dianggap lapuk.
• Fokus tetingkap: Pada bila-bila masa tetingkap mendapat semula fokus, seperti apabila pengguna bertukar antara tab atau tetingkap dan kembali ke tab yang mengandungi aplikasi anda.
• Sambungan semula rangkaian: Jika sambungan rangkaian terputus dan kemudian dipulihkan.

4. Mutasi Data

• useMutation Hook: ia merujuk kepada proses mencipta, mengemas kini atau memadam data pada pelayan. Tidak seperti pertanyaan, yang mendapatkan semula data, useMutation digunakan untuk mengubah suai data dan mengurus kesan sampingan yang berkaitan dengannya.
• Kemas kini optimistik: apabila pengguna melakukan tindakan yang akan mengubah data, UI dikemas kini serta-merta untuk mencerminkan hasil yang dijangkakan daripada tindakan itu, meningkatkan pengalaman pengguna.

5. Pembatalan Pertanyaan

• React Query membolehkan anda menandai pertanyaan cache sebagai "lapuk" supaya ia akan diambil semula pada kali berikutnya ia diakses. Ini penting untuk memastikan UI mencerminkan data paling terkini daripada pelayan selepas tindakan tertentu, seperti mutasi atau interaksi pengguna.

6. Kutipan Sampah Automatik

• React Query secara automatik mengalih keluar pertanyaan daripada cachenya apabila ia tidak lagi digunakan dan tidak aktif untuk tempoh tertentu. Proses ini membantu mengelakkan kebocoran memori dan memastikan hanya data yang berkaitan kekal dalam cache.

7. DevTools

• React Query DevTools ialah alat pilihan, mesra pengguna untuk React Query yang membantu kami, pembangun, nyahpepijat dan memantau pertanyaan, mutasi dan keadaan cache. Ia menyediakan antara muka visual untuk memeriksa butiran pertanyaan kami dan melihat cara React Query mengurus kitaran hayat mereka.

8. Rendering Sebelah Pelayan (SSR)

• React Query menyokong Server-Side Rendering (SSR), yang membantu dalam pra-mengambil data pada pelayan sebelum menghantarnya kepada pelanggan. Ini menjadikan halaman awal dimuatkan dengan lebih pantas dan boleh meningkatkan SEO dengan menyediakan halaman yang dipaparkan sepenuhnya kepada enjin carian.

Bagaimana untuk melaksanakan React Query

Berikut ialah panduan langkah demi langkah tentang cara menggunakan React Query untuk mengurus pengambilan data pelayan, caching, pengemaskinian dan penyegerakan dalam apl React.

Langkah 1: Pasang React Query

Pertama, tambahkan React Query pada projek anda:

npm install @tanstack/react-query

Langkah 2: Sediakan QueryClientProvider

Untuk mengkonfigurasi React Query, bungkus apl anda dalam QueryClientProvider. Pembekal ini menggunakan tika QueryClient, yang mengurus caching, pengambilan latar belakang dan kemas kini.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

Langkah 3: Ambil Data dengan useQuery

Kait useQuery mengambil data daripada API, menyimpannya secara automatik dan mengendalikan keadaan seperti pemuatan dan ralat.

npm install @tanstack/react-query

• Kunci (['todos']): Setiap useQuery memerlukan kunci unik untuk mengenal pasti dan cache data.
• Fungsi Pertanyaan (fetchTodos): Fungsi async ini mengambil data yang anda perlukan daripada API.

Langkah 4: Kendalikan Mutasi Data dengan useMutation

Kait useMutation digunakan untuk membuat, mengemas kini atau memadam data. Setelah mutasi berjaya, anda boleh menggunakan ketidaksahihan pertanyaan untuk mengambil semula data yang berkaitan dan memastikan keadaan apl anda dikemas kini.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

• Fungsi Mutasi (addTodo): Fungsi async ini mengubah suai keadaan pelayan.
• onSuccess: Selepas mutasi, panggil balik ini membatalkan pertanyaan ['todos'], mengambil semula dan mengemas kini data untuk menunjukkan todo yang baru ditambah.

Langkah 5: DevTools Pilihan untuk Penyahpepijatan

React Query DevTools boleh membantu anda memantau pertanyaan, status cache dan banyak lagi semasa pembangunan:

import { useQuery } from '@tanstack/react-query';

function YourComponent() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

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

// Sample fetch function
const fetchTodos = async () => {
  const response = await fetch('/api/todos');
  return response.json();
};

Kemudian, tambah ke apl anda:

import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoAdder() {
  const queryClient = useQueryClient();
  const addTodoMutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries(['todos']);
    },
  });

  return (
    <button onClick={() => addTodoMutation.mutate({ title: 'New Todo' })}>
      Add Todo
    </button>
  );
}

const addTodo = async (newTodo) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

Kesimpulan

Menggantikan useEffect dengan React Query untuk pengambilan data dan kesan sampingan ialah cadangan yang bagus untuk membina aplikasi React moden.

React Query mengubah cara anda mengendalikan data sisi pelayan dalam apl React, memberikan pendekatan yang lebih deklaratif yang memudahkan pengurusan keadaan yang kompleks. Dengan memanfaatkan ciri hebatnya seperti caching, penyegerakan latar belakang dan ketidaksahihan pertanyaan, anda boleh mencipta aplikasi yang sangat responsif dan berprestasi. Dan yang terakhir, tetapi tidak kurang pentingnya, penyepaduan React Query DevTools memudahkan untuk memantau dan nyahpepijat, memastikan aliran data apl anda lancar dan telus.

Sama ada anda sedang membina apl satu halaman mudah atau aplikasi berat data yang kompleks, React Query memperkasakan anda untuk membina apl yang lebih pantas, lebih pintar dan lebih mesra pengguna dengan sedikit usaha.

Atas ialah kandungan terperinci Daripada useEffect kepada React Query: Memodenkan pengurusan data anda secara bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!