React+TS前台项目实战-- 首页构建之基于react-query和性能hook实现全页面数据渲染

import React, { useState } from 'react';
import { useQuery } from 'react-query';
import { fetchTotalCount } from '../api/home';
 
const Home: React.FC = () => {
  const [totalCount, setTotalCount] = useState(0);
 
  const { isLoading, error, data, isFetching } = useQuery('totalCount', fetchTotalCount);
 
  if (error) {
    return <div>Error: {error.message}</div>;
  }
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>Total Count: {data}</h1>
      <button disabled={isFetching} onClick={() => setTotalCount(data || 0)}>
        更新总数
      </button>
    </div>
  );
};
 
export default Home;

这段代码使用了React Query来管理数据请求，并通过一个按钮允许用户手动更新数据，同时展示加载状态和错误信息。这是一个简化的例子，展示了如何在实际应用中使用React Query来提升开发效率。