React Hooks和React Query (useQuery)：仅在单击按钮时调用API调用/查询

基础概念

React Hooks 是 React 16.8 版本引入的一个新特性，它允许你在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 提供了一种在函数组件中使用 state 和生命周期方法的方式。

React Query (useQuery) 是一个用于数据获取和管理的库，它与 React Hooks 结合使用，可以轻松地从 API 获取数据并在组件中使用。useQuery 是 React Query 提供的一个 Hook，用于在组件中执行查询。

相关优势

1. React Hooks：
   • 简洁性：函数组件更加简洁，易于理解和维护。
   • 复用性：Hooks 可以在多个组件之间共享逻辑。
   • 性能优化：Hooks 可以更好地控制组件的渲染和更新。

• React Query (useQuery)：
  • 自动管理数据获取：自动处理数据获取、缓存和更新。
  • 错误处理：内置错误处理机制。
  • 查询取消：支持在组件卸载时取消查询，避免不必要的网络请求。
  • 缓存机制：自动缓存查询结果，提高性能。

类型

• React Hooks：
  • useState：用于管理组件的 state。
  • useEffect：用于处理副作用，如数据获取和订阅。
  • useContext：用于访问 React 的 Context API。
• React Query (useQuery)：
  • useQuery：用于执行查询并获取数据。
  • useMutation：用于执行数据修改操作，如 POST、PUT、DELETE 等。

应用场景

• React Hooks：
  • 在任何需要管理 state 或副作用的函数组件中使用。
  • 用于实现自定义 Hooks，以便在多个组件之间共享逻辑。
• React Query (useQuery)：
  • 在需要从 API 获取数据并在组件中使用的场景中使用。
  • 适用于需要管理复杂数据获取逻辑的应用，如分页、无限滚动、实时数据更新等。

示例代码

以下是一个使用 useQuery 在单击按钮时调用 API 的示例：

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

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const MyComponent = () => {
  const { data, isLoading, error } = useQuery('myData', fetchData, {
    enabled: false, // 默认不执行查询
  });

  const handleClick = () => {
    // 在单击按钮时启用查询
    queryClient.setQueryData('myData', null);
  };

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

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
};

export default MyComponent;

遇到的问题及解决方法

问题：为什么在单击按钮时没有调用 API？

原因：

1. useQuery 的 enabled 选项默认设置为 false，因此查询不会自动执行。
2. 需要在单击按钮时手动启用查询。

解决方法：

1. 在 useQuery 中设置 enabled: false，以便默认不执行查询。
2. 在单击按钮时，使用 queryClient.setQueryData('myData', null) 手动启用查询。

参考链接

• React Hooks 官方文档
• React Query 官方文档

希望这些信息对你有所帮助！