从 useEffect 到 React Query：在 React 中实现数据管理现代化

从 useeffect 到 react query：在 react 中实现数据管理现代化

在现代 web 开发环境中，构建快速响应的应用程序来有效管理服务器端数据比以往任何时候都更加重要。在 react 中获取数据的传统方法，尤其是使用 useeffect，通常会导致复杂的状态管理、重复的代码和性能问题。借助 react query，开发人员可以利用自动缓存、后台获取和内置突变支持等功能，同时最大限度地减少样板代码。

在本文中，我们将探讨 react query 的核心概念，演示如何将其集成到我们的项目中，并重点介绍其可以显着改进您的开发工作流程的强大功能。准备好改变您在 react 应用程序中获取、缓存和同步数据的方式！

为什么我们应该停止使用 react effects 获取数据

虽然使用 react 的 useeffect 来获取数据是完全有效的，但有几个原因可以考虑放弃它，转而使用像 react query 这样的专用数据获取库（甚至 react 文档也建议使用 react query 来获取数据）。

使用 effects 获取数据的一些缺点：

性能问题：“网络瀑布”和不必要的重新获取是使用 react useeffect 时的一些常见问题，可能会导致非常糟糕的用户体验。
缺乏内置缓存：useeffect不提供开箱即用的缓存，这会导致重复的网络请求和复杂的管理解决方案。
状态管理的复杂性：使用 useeffect 手动管理加载、错误和数据状态可能会导致代码繁琐且容易出错，尤其是在应用程序扩展时。
效果不在服务器上运行：组件初始渲染时数据可能不可用。

react 查询如何工作

react query 是一个功能强大的库，旨在简化 react 应用程序中的数据获取和状态管理。以下是 react query 工作原理的详细说明：

1. 查询数据

usequery hook：react query 的核心是 usequery hook。这个钩子允许您从服务器获取数据并自动管理其状态（加载、错误、数据......）。
查询键：每个查询都由唯一的键（数组中的一个或多个字符串）标识。这个键有助于 react query 缓存并有效地管理数据。

2. 缓存

自动缓存：获取数据时，react query 会缓存它。如果再次进行相同的查询，它将从缓存中检索数据，而不是发出新的网络请求。
过时数据管理：您可以定义数据应被视为新鲜（而不是过时）的时间。过了这段时间，react query 将在后台重新获取数据。

3. 后台重新获取

react query 在多种场景下自动重新获取数据，以保持数据新鲜和同步。发生这种情况的主要情况如下：

组件的挂载：组件挂载时，如果数据被认为是陈旧的。
窗口焦点：每当窗口重新获得焦点时，例如当用户在选项卡或窗口之间切换并返回到包含您的应用程序的窗口时。
网络重连：如果网络连接丢失并稍后恢复。

4. 数据突变

usemutation hook：指在服务器上创建、更新或删除数据的过程。与检索数据的查询不同，usemutation 用于修改数据并管理与其相关的副作用。
乐观更新：当用户执行会改变数据的操作时，ui 会立即更新以反映该操作的预期结果，从而增强用户体验。

5. 查询失效

react query 允许您将缓存的查询标记为“过时”，以便下次访问时重新获取它。这对于确保 ui 在执行某些操作（例如突变或用户交互）后反映来自服务器的最新数据至关重要。

6.自动垃圾收集

当查询不再使用并且在一段时间内不活动时，react query 会自动从缓存中删除查询。此过程有助于防止内存泄漏并确保只有相关数据保留在缓存中。

7. 开发工具

react query devtools 是一个可选的、用户友好的 react query 工具，可以帮助我们开发人员调试和监视查询、突变和缓存状态。它提供了一个可视化界面来检查查询的详细信息并查看 react query 如何管理其生命周期。

8. 服务器端渲染（ssr）

react query 支持服务器端渲染（ssr），这有助于在将数据发送到客户端之前在服务器上预取数据。这使得初始页面加载速度更快，并且可以通过向搜索引擎提供完全渲染的页面来改进 seo。

如何实现 react 查询

这是有关如何使用 react query 来管理 react 应用程序中的服务器数据获取、缓存、更新和同步的分步指南。

第 1 步：安装 react 查询

首先，将 react query 添加到您的项目中：

npm install @tanstack/react-query

第 2 步：设置 queryclientprovider

要配置 react query，请将您的应用程序包装在 queryclientprovider 中。该提供程序使用 queryclient 实例，该实例管理缓存、后台获取和更新。

import { queryclient, queryclientprovider } from '@tanstack/react-query';

const queryclient = new queryclient();

function app() {
  return (
    <queryclientprovider client={queryclient}>
      <yourcomponent />
    </queryclientprovider>
  );
}

第 3 步：使用 usequery 获取数据

usequery 挂钩从 api 获取数据，自动缓存数据并处理加载和错误等状态。

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();
};

key (['todos'])：每个 usequery 都需要一个唯一的 key 来识别和缓存数据。
查询函数 (fetchtodos)：此异步函数从 api 获取您需要的数据。

第 4 步：使用 usemutation 处理数据突变

usemutation 钩子用于创建、更新或删除数据。突变成功后，您可以使用查询失效来重新获取相关数据并使应用程序的状态保持最新。

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();
};

突变函数 (addtodo)：此异步函数修改服务器状态。
onsuccess：突变后，此回调使 ['todos'] 查询无效，重新获取并更新数据以显示新添加的待办事项。

第 5 步：用于调试的可选开发工具

react query devtools 可以帮助您在开发过程中监控查询、缓存状态等：

npm install @tanstack/react-query-devtools

然后，将添加到您的应用程序中：

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

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

结论

使用 react query 替换 useeffect 来获取数据和产生副作用，这是构建现代 react 应用程序的一个很好的建议。

react query 改变了您在 react 应用程序中处理服务器端数据的方式，提供了一种更具声明性的方法来简化复杂的状态管理。通过利用其强大的功能（例如缓存、后台同步和查询失效），您可以创建高度响应和高性能的应用程序。最后但并非最不重要的一点是，集成 react query devtools 可以轻松监控和调试，确保应用程序的数据流顺畅且透明。

无论您是构建简单的单页应用程序还是复杂的数据密集型应用程序，react query 都可以让您轻松构建更快、更智能、更用户友好的应用程序。

以上就是从 useEffect 到 React Query：在 React 中实现数据管理现代化的详细内容，更多请关注硕下网其它相关文章！