Mengoptimumkan penalaan prestasi serentak pertanyaan pangkalan data dalam React Query

React Query ialah perpustakaan untuk pengurusan data dan pengurusan negeri, yang boleh membantu kami mengoptimumkan prestasi konkurensi pertanyaan pangkalan data dalam aplikasi React. Meningkatkan prestasi serentak adalah penting untuk meningkatkan kelajuan tindak balas aplikasi dan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan React Query untuk melakukan penalaan prestasi serentak pertanyaan pangkalan data dan menyediakan contoh kod.

Sebelum bermula, kita perlu memasang React Query terlebih dahulu. Ia boleh dipasang menggunakan npm atau yarn:

npm install react-query

atau

yarn add react-query

Seterusnya, kami akan mencipta contoh mudah untuk menunjukkan cara mengoptimumkan prestasi konkurensi pertanyaan pangkalan data.

Pertama, kita perlu mencipta komponen UserList untuk memaparkan senarai pengguna. Dalam komponen, kami akan menggunakan cangkuk useQuery untuk mendapatkan data pengguna. Cangkuk useQuery secara automatik mengendalikan caching dan pengemaskinian data, serta mengendalikan permintaan serentak. UserList 组件来展示用户列表。在组件中，我们将使用 useQuery 钩子来获取用户数据。useQuery 钩子会自动处理数据的缓存和更新，以及处理并发请求的问题。

import React from 'react';
import { useQuery } from 'react-query';

const UserList = () => {
  const { data, status } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'error') {
    return <div>Error fetching data</div>;
  }

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

在上面的代码中，我们使用 useQuery 钩子来获取用户数据。useQuery 接受两个参数：第一个参数是一个唯一的标识符，用于缓存数据；第二个参数是一个异步函数，用于请求数据。当我们需要获取用户数据时，React Query 会首先检查缓存中是否已存在数据，如果有，则直接返回缓存的数据；如果没有，则执行异步函数来获取数据，并将数据缓存起来。

接下来，我们需要创建一个用于获取用户数据的 API。在这个例子中，我们使用一个简单的 Express 服务器来模拟数据库查询：

// server.js
const express = require('express');
const app = express();

app.get('/api/users', (req, res) => {
  setTimeout(() => {
    const users = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' },
      { id: 3, name: 'Bob' },
      // ...
    ];
    res.json(users);
  }, 1000);
});

app.listen(5000, () => {
  console.log('Server listening on port 5000');
});

最后，我们需要创建一个包含 UserList 组件的父组件来渲染整个应用：

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import UserList from './UserList';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <h1>User List</h1>
        <UserList />
      </div>
    </QueryClientProvider>
  );
};

export default App;

在上面的代码中，我们使用 QueryClientProvider 来为整个应用提供一个 React Query 的实例。这样，我们就可以在任何组件中使用 useQueryrrreee

Dalam kod di atas, kami menggunakan cangkuk useQuery untuk mendapatkan data pengguna. useQuery menerima dua parameter: parameter pertama ialah pengecam unik yang digunakan untuk cache data, parameter kedua ialah fungsi tak segerak yang digunakan untuk meminta data. Apabila kita perlu mendapatkan data pengguna, React Query akan terlebih dahulu menyemak sama ada data telah wujud dalam cache. Jika ya, ia akan mengembalikan data yang dicache secara langsung, jika tidak, ia akan melaksanakan fungsi tak segerak untuk mendapatkan data dan cache data .

Seterusnya, kita perlu mencipta API untuk mendapatkan data pengguna. Dalam contoh ini, kami menggunakan pelayan Express yang mudah untuk mensimulasikan pertanyaan pangkalan data: 🎜rrreee🎜Akhir sekali, kami perlu mencipta komponen induk yang mengandungi komponen UserList untuk memaparkan keseluruhan aplikasi: 🎜rrreee🎜Dalam perkara di atas Dalam kod, kami menggunakan QueryClientProvider untuk menyediakan contoh React Query untuk keseluruhan aplikasi. Dengan cara ini, kita boleh menggunakan cangkuk useQuery dalam mana-mana komponen untuk mendapatkan data. 🎜🎜Melalui contoh kod di atas, kita dapat melihat cara React Query mengoptimumkan prestasi serentak pertanyaan pangkalan data. React Query secara automatik mengendalikan caching dan pengemaskinian data, serta mengendalikan permintaan serentak, yang sangat memudahkan kerja pembangunan kami. 🎜

Atas ialah kandungan terperinci Mengoptimumkan penalaan prestasi serentak pertanyaan pangkalan data dalam React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!