前端整理一下遇到的工具包

2025-05-12 59 阅读2分钟

import FitScreen from "@fit-screen/react";

@fit-screen/react: 这个包通常用于实现屏幕自适应的功能。在需要将应用内容等比例缩放以适应不同屏幕尺寸或分辨率的场景下非常有用，常用于大屏展示或特定布局需求的页面。FitScreen 可能是这个库提供的一个 React 组件，用来包裹需要自适应的内容。

import { createTheme, Input, MantineProvider, Modal, Pagination, Table } from "@mantine/core"; ui.mantine.dev/

@mantine/core: Mantine 是一个功能齐全的 React 组件库，提供了大量预构建的、可定制的 UI 组件，帮助开发者快速构建美观且功能丰富的用户界面。

createTheme: 用于创建或自定义 Mantine 组件库的主题（例如颜色、字体、间距等）。

Input: 一个通用的输入框组件。

MantineProvider: 这是 Mantine 的核心组件，需要包裹在应用的根部，用于提供主题、样式等上下文给所有 Mantine 组件。

Modal: 模态框（对话框）组件，用于在当前页面之上显示临时内容。

Pagination: 分页组件，用于在数据量较大时进行分页展示。

Table: 表格组件，用于展示结构化数据。

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; tanstack.com/query/lates…

@tanstack/react-query (通常也称为 React Query): 这是一个强大的异步状态管理库，专门用于数据获取、缓存、同步和更新。它极大地简化了在 React 应用中处理服务器状态的复杂性。

QueryClient: 这是 React Query 的核心，负责管理查询缓存。你需要创建一个 QueryClient 的实例。

QueryClientProvider: 这是一个 React Context Provider 组件，你需要用它包裹你的应用（或需要使用 React Query 的部分），并将创建的 QueryClient 实例作为 client prop 传入。这样，应用内的组件才能访问和使用 React Query 的功能。

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

@tanstack/react-query-devtools: 这是 React Query 的开发者工具。它提供了一个可视化界面，让你在开发过程中可以方便地查看和调试 React Query 的内部状态，例如缓存的查询、查询状态（加载中、成功、错误）、数据等。通常只在开发环境下使用。

import { RouterProvider } from "@tanstack/react-router";

@tanstack/react-router: 这是 TanStack 生态中的一个类型安全、功能强大的路由库，用于在 React 应用中实现客户端路由（SPA - Single Page Application）。它提供了灵活的路由配置、嵌套路由、加载器、操作等功能。

RouterProvider: 这个组件用于向你的应用提供路由配置。你需要将通过 @tanstack/react-router 创建的路由实例传递给这个组件。