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，用于在组件中执行查询。

类型

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;