Gunakan React Query dan pangkalan data untuk mencapai penyegerakan data tambahan

Tajuk: Melaksanakan penyegerakan data tambahan menggunakan React Query dan pangkalan data

Pengenalan:
Apabila aplikasi berkembang, pengurusan data menjadi semakin penting. Dalam aplikasi tradisional, pengundian atau tinjauan panjang biasanya digunakan untuk mencapai penyegerakan data. Walau bagaimanapun, kaedah ini bukan sahaja tidak cekap, tetapi juga menyebabkan pembaziran sumber pelayan. Untuk menyelesaikan masalah ini, kami boleh menggunakan React Query dan pangkalan data untuk mencapai penyegerakan data tambahan untuk meningkatkan prestasi aplikasi dan pengalaman pengguna.

Artikel ini akan memperkenalkan cara menggunakan React Query dan pangkalan data untuk mencapai penyegerakan data tambahan dan memberikan contoh kod khusus. Mula-mula, kami akan menerangkan konsep asas dan penggunaan React Query, dan kemudian memperkenalkan cara melaksanakan penyegerakan data tambahan dalam React Query. Akhir sekali, kami akan menunjukkan cara berinteraksi dengan pangkalan data untuk menambah, memadam, mengubah suai dan membuat pertanyaan data.

1. Konsep asas dan penggunaan React Query
React Query ialah perpustakaan pengurusan negeri moden yang memfokuskan pada memproses permintaan dan respons dengan pelayan. Ia menyediakan API yang ringkas dan berkuasa yang boleh membantu kami mengurus pemerolehan data, penyegerakan dan caching. Berikut ialah konsep asas dan penggunaan React Query:

1. Query: Operasi yang digunakan untuk mendapatkan data. Ia mengandungi pengecam pertanyaan, fungsi permintaan dan maklumat konfigurasi lain. Dengan memanggil fungsi cangkuk useQuery, kita boleh menentukan Pertanyaan dalam komponen.
2. Mutasi: Operasi yang digunakan untuk mengubah suai data. Sama seperti Pertanyaan, ia mengandungi pengecam, fungsi permintaan dan maklumat konfigurasi lain untuk mengubah suai data. Dengan memanggil fungsi cangkuk useMutation, kita boleh menentukan mutasi dalam komponen.
3. QueryCache: Operasi untuk caching data. Ia secara automatik menguruskan caching dan penolakan data untuk meningkatkan prestasi aplikasi dan responsif.
4. QueryClient: digunakan untuk mengurus kejadian Pertanyaan dan Mutasi. Ia boleh diperolehi melalui fungsi cangkuk useQueryClient.

2. Pelaksanaan penyegerakan data tambahan
Sekarang kami akan memperkenalkan cara melaksanakan penyegerakan tambahan data dalam React Query. Pertama, kita perlu menentukan Pertanyaan dan Mutasi untuk mendapatkan dan mengubah suai data. Berikut ialah contoh khusus:

import { useQuery, useMutation } from 'react-query';

function fetchData() {
  // 发起网络请求，获取数据
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => data);
}

function updateData(data) {
  // 发起网络请求，修改数据
  return fetch('/api/data', {
    method: 'PUT',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then(response => response.json())
    .then(updatedData => updatedData);
}

function App() {
  const { data } = useQuery('data', fetchData);
  const mutation = useMutation(updateData);

  const handleUpdate = newData => {
    // 调用 mutation.mutate 函数，更新数据
    mutation.mutate(newData);
  };

  return (
    <div>
      <button onClick={() => handleUpdate({})}>更新数据</button>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); }

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan fungsi cangkuk useQuery untuk mentakrifkan Pertanyaan bernama 'data' untuk mendapatkan data dengan memanggil fungsi fetchData. Kemudian, kami menggunakan fungsi cangkuk useMutation untuk mentakrifkan Mutasi dan mengubah suai data dengan memanggil fungsi updateData. Dalam komponen, kami mencetuskan kemas kini data dengan memanggil fungsi mutation.mutate.

3. Berinteraksi dengan pangkalan data
Fungsi fetchData dan updateData dalam contoh kod di atas hanyalah contoh permintaan rangkaian yang mudah, biasanya kita perlu berinteraksi dengan pangkalan data. Berikut ialah contoh operasi CRUD dengan pangkalan data:

import { useQuery, useMutation, queryCache, useQueryClient } from 'react-query';

function fetchTodos() {
  return axios.get('/api/todos')
    .then(response => response.data);
}

function addTodo(newTodo) {
  return axios.post('/api/todos', newTodo)
    .then(response => response.data);
}

function updateTodo(id, updatedTodo) {
  return axios.put(`/api/todos/${id}`, updatedTodo)
    .then(response => response.data);
}

function deleteTodo(id) {
  return axios.delete(`/api/todos/${id}`)
    .then(response => response.data);
}

function TodoList() {
  const { data: todos } = useQuery('todos', fetchTodos);
  const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    }
  });

  const handleAddTodo = newTodo => {
    mutation.mutate(newTodo);
  };

  const handleUpdateTodo = (id, updatedTodo) => {
    updateTodo(id, updatedTodo)
      .then(() => queryClient.invalidateQueries('todos'));
  };

  const handleDeleteTodo = id => {
    deleteTodo(id)
      .then(() => queryClient.invalidateQueries('todos'));
  };

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault();
        handleAddTodo({
          text: e.target.elements.text.value
        });
        e.target.reset();
      }}>
        <input type="text" name="text" placeholder="输入待办事项" />
        <button type="submit">添加</button>
      </form>
      {todos && todos.map(todo => (
        <div key={todo.id}>
          <span>{todo.text}</span>
          <button onClick={() => handleUpdateTodo(todo.id, { completed: !todo.completed })}>
            {todo.completed ? '标为未完成' : '标为完成'}
          </button>
          <button onClick={() => handleDeleteTodo(todo.id)}>
            删除
          </button>
        </div>
      ))}
    </div>
  );
}

Dalam contoh kod di atas, kami menggunakan perpustakaan axios untuk menghantar permintaan rangkaian untuk berinteraksi dengan pangkalan data. Seperti yang anda lihat, kami mentakrifkan Mutasi bernama addTodo melalui fungsi cangkuk useMutation, yang digunakan untuk menambah item tugasan Selepas penambahan berjaya, queryClient.invalidateQueries('todos') dipanggil untuk mengemas kini data. Begitu juga, kami juga mentakrifkan Mutasi updateTodo dan deleteTodo untuk mengemas kini dan memadam item tugasan.

Ringkasan:
Artikel ini memperkenalkan cara menggunakan React Query dan pangkalan data untuk mencapai penyegerakan data tambahan. Dengan menggunakan Pertanyaan dan Mutasi React Query, kami boleh mendapatkan, mengubah suai, menambah dan memadam data dengan mudah. Pada masa yang sama, kami juga menunjukkan cara berinteraksi dengan pangkalan data dan memanipulasi data melalui permintaan rangkaian. Saya harap artikel ini akan membantu anda memahami penyegerakan data tambahan dan menjadikan aplikasi anda lebih cekap dan mudah.

Atas ialah kandungan terperinci Gunakan React Query dan pangkalan data untuk mencapai penyegerakan data tambahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!