React Query：提升 React 中的用户体验，让你先发制人，后发制于人

2023-09-18 12:18:01

简介

在现代 Web 开发中，提供流畅且响应迅速的用户体验至关重要。最终用户可能没有注意到的一个方面是应用程序如何处理正在发生变化的数据，即创建、更新和删除。这可能是由于此功能的双重性质：如果效果好，没人会注意到；如果效果不好，每个人都会注意到。

React Query 是一个轻量级的 React 库，旨在简化数据获取和处理，使您可以轻松构建响应迅速且可靠的 React 应用。它采用乐观更新策略，可让您在收到服务器响应之前就更新 UI，从而实现流畅的用户体验。

如何使用 React Query 提升用户体验

1. 实时更新

React Query 的一个主要优点是能够提供实时更新。这意味着当数据发生变化时，您的 UI 将自动更新，而无需您编写任何额外的代码。这对于构建具有实时功能的应用程序非常有用，例如聊天应用程序或股票交易应用程序。

2. 异步编程

React Query 还简化了异步编程。它为您提供了许多内置工具来处理异步请求，例如超时、重试和缓存。这使您可以轻松地构建健壮且可靠的应用程序，即使在网络连接不稳定或服务器响应缓慢的情况下也是如此。

3. 状态管理

React Query 还提供了一个内置的状态管理解决方案。这使您可以轻松地管理应用程序的状态，而无需使用 Redux 或其他第三方库。这可以帮助您构建更易于维护和测试的应用程序。

4. 性能优化

React Query 可以帮助您优化应用程序的性能。它通过缓存数据和使用乐观更新策略来减少对服务器的请求数量。这可以显着提高应用程序的性能，尤其是在处理大量数据时。

详细示例

为了更好地理解如何使用 React Query 提升用户体验，让我们来看一个详细的示例。假设您正在构建一个简单的待办事项应用程序。使用 React Query，您可以轻松地实现以下功能：

创建待办事项
更新待办事项
删除待办事项
实时显示待办事项列表
在服务器响应之前更新 UI

以下是一个使用 React Query 实现上述功能的示例代码：

import React, { useState } from "react";
import { useQuery, useMutation } from "react-query";

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const fetchTodos = async () => {
    const response = await fetch("/todos");
    return response.json();
  };

  const { data: todosData, isLoading, error } = useQuery("todos", fetchTodos);

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

  const { mutate: createTodoMutation } = useMutation(createTodo, {
    onSuccess: (data) => {
      setTodos([...todos, data]);
    },
  });

  const updateTodo = async (todo) => {
    const response = await fetch(`/todos/${todo.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(todo),
    });
    return response.json();
  };

  const { mutate: updateTodoMutation } = useMutation(updateTodo, {
    onSuccess: (data) => {
      setTodos(todos.map((todo) => (todo.id === data.id ? data : todo)));
    },
  });

  const deleteTodo = async (todo) => {
    await fetch(`/todos/${todo.id}`, {
      method: "DELETE",
    });
  };

  const { mutate: deleteTodoMutation } = useMutation(deleteTodo, {
    onSuccess: (data) => {
      setTodos(todos.filter((todo) => todo.id !== data.id));
    },
  });

  return (
    <div>
      <h1>Todo List</h1>
      {isLoading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {todosData && (
        <ul>
          {todosData.map((todo) => (
            <li key={todo.id}>
              {todo.title}
              <button onClick={() => updateTodoMutation(todo)}>Update</button>
              <button onClick={() => deleteTodoMutation(todo)}>Delete</button>
            </li>
          ))}
        </ul>
      )}
      <form onSubmit={(e) => {
        e.preventDefault();
        const newTodo = { title: e.target.todoTitle.value };
        createTodoMutation(newTodo);
      }}>
        <input type="text" name="todoTitle" placeholder="Enter new todo" />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
};

export default TodoList;