当前位置: 首页 > news >正文

TanStack——为现代前端开发提供高性能和灵活的工具

TanStack 是一个由社区主导的开源项目集合,专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库,主要用于处理表格、查询、虚拟化、状态管理等功能。

文章目录

      • 1、TanStack Query:
          • 1.1 useQuery:用于获取和缓存异步数据。自动处理数据的加载状态、错误状态和刷新。
          • 1.2 useMutation:用于处理数据的创建、更新或删除操作。它不会缓存结果,而是主要用于触发变化。
          • 1.3 useQueryClient:提供对全局 `QueryClient` 实例的访问,常用于手动操作缓存(如刷新、预取或更新数据)。
          • 1.4 QueryClient:TanStack Query 的核心实例,用于管理全局缓存和配置。应在应用入口处创建一次,并通过 `QueryClientProvider` 提供给应用。
          • 1.5 QueryClientProvider:提供 `QueryClient` 实例给 React 应用,使得所有子组件可以使用 TanStack Query 的功能。
      • 2、TanStack Virtual
      • 3、 TanStack Table:
      • 4、TanStack Router是一个强大的路由库,提供灵活、声明式的路由配置。
      • 5、TanStack Form

https://tanstack.com/query/latest

1、TanStack Query:

(以前叫 React Query)是一个用于数据获取、缓存、同步和更新的库,专注于处理异步数据流。

1.1 useQuery:用于获取和缓存异步数据。自动处理数据的加载状态、错误状态和刷新。
  • 特性:缓存数据、自动刷新、分页和懒加载、错误处理
import { useQuery } from '@tanstack/react-query';function fetchData() {return fetch('https://jsonplaceholder.typicode.com/posts').then((res) => res.json());
}function Posts() {const { data, isLoading, error } = useQuery(['posts'], fetchData);if (isLoading) return <div>Loading...</div>;if (error) return <div>Error: {error.message}</div>;return (<ul>{data.map((post) => (<li key={post.id}>{post.title}</li>))}</ul>);
}
1.2 useMutation:用于处理数据的创建、更新或删除操作。它不会缓存结果,而是主要用于触发变化。
  • 特性:触发式操作、内置状态管理、与缓存结合
import { useMutation, useQueryClient } from '@tanstack/react-query';function App() {const queryClient = useQueryClient();const mutation = useMutation((newPost) => fetch('/api/posts', {method: 'POST',body: JSON.stringify(newPost),}),{onSuccess: () => {// 在成功后刷新缓存queryClient.invalidateQueries(['posts']);},});const handleAddPost = () => {mutation.mutate({ title: 'New Post' });};return (<button onClick={handleAddPost}>{mutation.isLoading ? 'Adding...' : 'Add Post'}</button>);
}
1.3 useQueryClient:提供对全局 QueryClient 实例的访问,常用于手动操作缓存(如刷新、预取或更新数据)。
  • 手动缓存控制
1.4 QueryClient:TanStack Query 的核心实例,用于管理全局缓存和配置。应在应用入口处创建一次,并通过 QueryClientProvider 提供给应用。
1.5 QueryClientProvider:提供 QueryClient 实例给 React 应用,使得所有子组件可以使用 TanStack Query 的功能。

2、TanStack Virtual

是一个虚拟化解决方案,适用于处理大型数据集的渲染优化,比如长列表或滚动视

import { useVirtualizer } from '@tanstack/react-virtual';function VirtualizedList({ items }) {const parentRef = React.useRef();const rowVirtualizer = useVirtualizer({count: items.length,getScrollElement: () => parentRef.current,estimateSize: () => 35,});return (<div ref={parentRef} style={{ height: 300, overflow: 'auto' }}><divstyle={{height: `${rowVirtualizer.getTotalSize()}px`,position: 'relative',}}>{rowVirtualizer.getVirtualItems().map((virtualRow) => (<divkey={virtualRow.index}style={{position: 'absolute',top: 0,left: 0,transform: `translateY(${virtualRow.start}px)`,}}>{items[virtualRow.index]}</div>))}</div></div>);
}

3、 TanStack Table:

一个表格管理库,用于构建动态、高性能、可扩展的表格 UI。

import { useTable } from '@tanstack/react-table';const data = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },
];const columns = [{header: 'Name',accessorKey: 'name',},{header: 'Age',accessorKey: 'age',},
];function App() {const table = useTable({ data, columns });return (<table><thead>{table.getHeaderGroups().map((headerGroup) => (<tr key={headerGroup.id}>{headerGroup.headers.map((header) => (<th key={header.id}>{header.renderHeader()}</th>))}</tr>))}</thead><tbody>{table.getRowModel().rows.map((row) => (<tr key={row.id}>{row.getVisibleCells().map((cell) => (<td key={cell.id}>{cell.renderCell()}</td>))}</tr>))}</tbody></table>);
}

4、TanStack Router是一个强大的路由库,提供灵活、声明式的路由配置。

5、TanStack Form

相关文章:

TanStack——为现代前端开发提供高性能和灵活的工具

TanStack 是一个由社区主导的开源项目集合&#xff0c;专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库&#xff0c;主要用于处理表格、查询、虚拟化、状态管理等功能。 文章目录 1、TanStack Query&#xff1a;1.1 useQuery&#…...

Java爬虫️ 使用Jsoup库进行API请求有什么优势?

在Java的世界里&#xff0c;Jsoup库以其强大的HTML解析能力而闻名。它不仅仅是一个简单的解析器&#xff0c;更是一个功能齐全的工具箱&#xff0c;为开发者提供了从网页抓取到数据处理的一站式解决方案。本文将深入探讨使用Jsoup库进行API请求的优势&#xff0c;并提供代码示例…...

React源码02 - 基础知识 React API 一览

1. JSX到JavaScript的转换 <div id"div" key"key"><span>1</span><span>2</span> </div>React.createElement("div", // 大写开头会当做原生dom标签的字符串&#xff0c;而组件使用大写开头时&#xff0c;这…...

COMSOL with Matlab

文章目录 基本介绍COMSOL with MatlabCOMSOL主Matlab辅Matlab为主Comsol为辅 操作步骤常用指令mphopenmphgeommghmeshmphmeshstatsmphnavigatormphplot常用指令mphsavemphlaunchModelUtil.clear 实例教学自动另存新档**把语法套用到边界条件**把语法套用到另存新档 函数及其微分…...

【报表查询】.NET开源ORM框架 SqlSugar 系列

文章目录 前言实践一、按月统计没有为0实践二、 统计某月每天的数量实践三、对象和表随意JOIN实践四、 List<int>和表随意JOIN实践五、大数据处理实践六、每10分钟统计Count实践七、 每个ID都要对应时间总结 前言 在我们实际开发场景中&#xff0c;报表是最常见的功能&a…...

PostgreSQL数据库访问限制详解

pg_hba.conf 文件是 PostgreSQL 数据库系统中非常重要的一个配置文件&#xff0c;它用于定义哪些用户&#xff08;或客户端&#xff09;可以连接到 PostgreSQL 数据库服务器&#xff0c;以及他们可以使用哪些认证方法进行连接。 pg_hba.conf 的名称来源于 "Host-Based Aut…...

【test linux】创建一个ext4类型的文件系统

创建一个ext4类型的文件系统 dd 是一个非常强大的命令行工具&#xff0c;用于在Unix/Linux系统中进行低级别的数据复制和转换。这条命令的具体参数含义如下&#xff1a; if/dev/zero&#xff1a;指定输入文件&#xff08;input file&#xff09;为 /dev/zero&#xff0c;这是一…...

如何在繁忙的生活中找到自己的节奏?

目录 一、理解生活节奏的重要性 二、分析当前生活节奏 1. 时间分配 2. 心理状态 3. 身体状况 4. 生活习惯 1. 快慢适中 2. 张弛结合 3. 与目标相符 三、掌握调整生活节奏的策略 1. 设定优先级 2. 合理规划时间 3. 学会拒绝与取舍 4. 保持健康的生活方式 5. 留出…...

AI-PR曲线

PR曲线 人工智能里面的一个小概念。 2.3 性能度量&#xff08;查全率&#xff0c;查准率&#xff0c;F1&#xff0c;PR曲线与ROC曲线&#xff09; 预测出来的是一个概率&#xff0c;不能根据概率来说它是正类还是负类&#xff0c;要有一个阈值。 查准率&#xff08;Precision&…...

Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

入门示例 guava 最佳实践 学习指南 以下是使用Google Guava库中的工具方法来创建和操作List、Set、Map集合的一些示例&#xff1a; List相关操作 创建List 使用Lists.newArrayList()创建一个新的可变ArrayList实例。List<Integer> list Lists.newArrayList(1, 2, 3);/…...

深入解析 Elasticsearch 集群配置文件参数

在自建 Elasticsearch 集群时&#xff0c;我们需要通过 elasticsearch.yml 文件对节点角色、网络设置、集群发现和数据存储路径等进行灵活配置。配置项的合理设置对集群的稳定性、性能与扩展性影响深远。本文将以一个示例配置文件为蓝本&#xff0c;逐条解析各参数的含义与建议…...

WebMvcConfigurer和WebMvcConfigurationSupport(MVC配置)

一:基本介绍 WebMvcConfigurer是接口&#xff0c;用于配置全局的SpringMVC的相关属性&#xff0c;采用JAVABean的方式来代替传统的XML配置文件&#xff0c;提供了跨域设置、静态资源处理器、类型转化器、自定义拦截器、页面跳转等能力。 WebMvcConfigurationSupport是webmvc的…...

用 javascript 来回答宇宙外面是什么

宇宙外面是什么呢? 估计这个问题要困扰很多人, 让我们用一段 javascript 代码来回答一下. 一, 从一段代码说起 var 地球 {名字 : "地球",女友 : "月亮",外面 : {名字 : "太阳系",老大 : "太阳",老二 : {名字 : "木星",二…...

我的性能优化经验

专业方向&#xff1a;App cpu/memory/gpu/流畅度/响应时间的优化&#xff0c;Anr&#xff0c;Framework CarPowerManagementService模块的&#xff08;STR&#xff09;&#xff0c;从0~1完成性能监控体系搭建&#xff0c;完成3大版本迭代高质量性能交付 响应时间&#xff1a; …...

XSLT 编辑 XML

XSLT 编辑 XML 介绍 XSLT&#xff08;可扩展样式表语言转换&#xff09;是一种用于转换XML文档的语言。它允许开发人员将XML数据转换为其他格式&#xff0c;如HTML、PDF或纯文本。XSLT通过使用XPath查询来定位XML文档中的元素&#xff0c;并对这些元素应用转换规则。在本教程…...

数智读书笔记系列010 生命3.0:人工智能时代 人类的进化与重生

书名&#xff1a;生命3.0 生命3.0&#xff1a;人工智能时代,人类的进化与重生 著者&#xff1a;&#xff3b;美&#xff3d;迈克斯•泰格马克 迈克斯・泰格马克 教育背景与职业 教育背景&#xff1a;迈克斯・泰格马克毕业于麻省理工学院&#xff0c;获物理学博士学位。职业经…...

Transfomer的各层矩阵

一、输入 输入一句话&#xff1a;Hello CYZLAB the inspired world 每个单词为一个token 二、Embedding 这里的词向量维度为6&#xff0c;矩阵的行数为token数&#xff0c;列数是词向量的维度 这列是注释不算hello122694CYZLAB222372the222596inspired132440world431273 …...

代码随想录第51天

99.岛屿数量 深搜 import java.util.*;class Main{static int[][] directions {{0, 1}, {1, 0}, {0, -1}, {-1, 0}};static boolean[][] visited;public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int…...

基础库httpx的使用

urllib 库和 requests 库的使用&#xff0c;已经可以爬取绝大多数网站的数据&#xff0c;但对于某些网站依然无能为力。什么情况?这些网站强制使用HTTP/2.0协议访问&#xff0c;这时 urllib 和requests 是无法爬取数据的&#xff0c;因为它们只支持 HTTP/1.1&#xff0c;不支持…...

c++中如何保持结构体的线程安全?3D坐标的线程安全:从理论到最优解

使用mutex的困扰 struct Point3d {std::mutex mtx;double x, y, z;void set(double nx, double ny, double nz) {std::lock_guard<std::mutex> lock(mtx);x nx; y ny; z nz;} };这种方案虽然安全&#xff0c;但性能开销确实不小。每次访问都需要加锁解锁&#xff0c;…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...