TanStack Router 与路由

共 82 题
#

1. TanStack Router 的 Code Splitting(lazy + route.preload)

A 两者完全相同
B lazy 按需加载路由代码,preload 提前预取该代码 ✓ 正确答案
C preload 只用于 CSS
D 两者都禁用缓存
#

2. Router 与 Zustand/Jotai 的协作在跨路由状态共享

A 全局 Zustand store
B URL search params ✓ 正确答案
C localStorage 仅
D 组件内部 state
#

3. TanStack Router 的 type-safe 路由 在团队规范与代码组织的取舍

A 降低运行时性能
B 减少代码体积
C 在编译期捕获路径/参数类型错误,提升重构安全性 ✓ 正确答案
D 替代 API 层
#

4. TanStack Router 的文件路由与代码生成的现代取舍

A 无法使用 loader
B 只能手动注册路由
C 不支持嵌套
D 目录结构即路由结构,并自动生成类型安全的 routeTree ✓ 正确答案
#

5. TanStack Form 在 typed form state + zod 校验的类型安全工程价值

A 只能用于无状态表单
B 仅运行时校验
C 无类型支持
D 表单状态强类型并与 zod schema 共同驱动校验 ✓ 正确答案
#

6. TanStack Table v8 getCoreRowModel / getSortedRowModel 在大型表格 headless 模式工程价值

A 只能用于简单表格
B 内置整套 UI 样式
C 逻辑与 UI 解耦,逻辑可自由组合 ✓ 正确答案
D 无类型支持
#

7. TanStack Start 的 server functions(createServerFn)与端到端类型安全 RPC 的设计

A 不能携带参数
B 仅生成 REST 接口
C 服务端函数与客户端调用共享类型,实现端到端类型安全 RPC ✓ 正确答案
D 只能用于 GET
#

8. TanStack Start 中间件(middleware)链路在鉴权、日志、参数校验中的设计

A 只能做日志
B 在 before 阶段做鉴权与校验,after 阶段做日志与错误处理 ✓ 正确答案
C 只能做鉴权
D 无法串联多个中间件
#

9. shadcn/ui CLI(npx shadcn add)

A 无法修改组件
B 安装一个 shadcn 运行时依赖
C 只添加 CSS 不添加组件
D 把组件源码直接写入项目并安装依赖,组件归项目所有 ✓ 正确答案
#

10. shadcn/ui 不注册为 npm 包、按需拷贝源码的分发哲学在组件库的工程价值

A 无法升级组件
B 作为 npm 依赖安装并锁定版本
C 只能使用官方样式
D 组件以源码形式拷贝进项目,归项目所有可自由定制 ✓ 正确答案
#

11. useMutation 的乐观更新 + Rollback 在点赞/关注的工程价值

A 先请求成功再改 UI
B 先改 UI 再请求,失败时回滚 ✓ 正确答案
C 永不回滚
D 禁止使用缓存
#

12. 与传统组件库(Ant Design、Material UI)

A 无法定制主题
B 提供更完整的开箱即用样式
C 是运行时依赖
D 组件以源码形式归项目所有,可深度定制 ✓ 正确答案
#

13. shadcn/ui "复制源码而非安装依赖"的模式与原理

A 升级自动完成
B 必须整体引入库
C 无法单组件引入
D 组件作为项目源码参与构建,无运行时依赖 ✓ 正确答案
#

14. Registry 协议与组件分发

A 用元数据描述组件,供 CLI 按需拉取源码并安装依赖 ✓ 正确答案
B 代替 npm 的依赖解析
C 只用于样式
D 无法支持私有 registry
#

15. shadcn/ui 与 Tailwind v4 协同的设计令牌(@theme)

A 编译 JS 配置
B 替代 CSS 变量
C 只用于动画
D 定义设计令牌并映射为 Tailwind 工具类 ✓ 正确答案
#

16. shadcn 在 monorepo 与跨项目的组件复用模式

A 依赖运行时库
B 每个应用复制一份即可忽略样式
C 只能单项目使用
D 让组件源码与 Tailwind/令牌配置一起被各应用共享 ✓ 正确答案
#

17. Tailwind v4 @theme + @plugin 的工程边界(与现代 CSS 变量设计系统的差异)

A @theme 会在编译期生成对应工具类,纯 CSS 变量只做运行时替换 ✓ 正确答案
B 两者完全相同
C @theme 不支持颜色
D 纯 CSS 变量能生成工具类
#

18. TanStack Router 的 path/search 解析与 React Router v7 的工程取舍

A TanStack Router 不支持 search
B 两者完全相同
C React Router 类型安全更强
D TanStack Router 类型安全与数据流更紧密,React Router v7 生态更成熟 ✓ 正确答案
#

19. TanStack Router 的 loader.beforeLoad + search 验证(zod)

A 无法校验 search
B 只用于样式
C 替代 loader
D 在进入 loader 前校验参数并鉴权,保证 loader 输入可信 ✓ 正确答案
#

20. TanStack Router 的 useParams/useSearch 类型推断在大型应用的工程价值

A 仅提升性能
B 编译期推导参数类型,减少运行时错误 ✓ 正确答案
C 无法和 schema 配合
D 需手动写类型断言
#

21. 类型安全路由的编译时类型推断与 loader 模式

A loader 返回类型直达组件消费点,全链路编译期校验 ✓ 正确答案
B 只在运行时校验
C loader 无类型
D 无法在组件读取 loader 数据
#

22. Router 的文件路由与 Route Tree 在大型项目的代码组织

A 不支持嵌套
B 需要手工维护路由树
C 目录即路由结构,Route Tree 自动生成类型,组织直观且不易遗漏 ✓ 正确答案
D 无法生成类型
#

23. Router 的 beforeLoad/loader 在鉴权与数据预取的协作

A 两者无关
B loader 先执行
C beforeLoad 先鉴权并注入上下文,loader 再取数 ✓ 正确答案
D beforeLoad 负责取数
#

24. SSR 与 streaming SSR 集成

A 只能在客户端渲染
B 服务端执行 loader 取数并渲染,客户端水合复用数据 ✓ 正确答案
C 不支持 streaming
D loader 只在客户端执行
#

25. 路由 preload、error boundary、route context

A 三者互不相关
B 全部负责取数
C 数据预取、错误容错、依赖注入 ✓ 正确答案
D 只负责渲染
#

26. select 转换函数与 useEffect 同步问题的工程取舍

A 一律用 select
B 一律用 useEffect
C 纯派生用 select,副作用才用 useEffect ✓ 正确答案
D 两者都会触发竞态
#

27. useQueries 动态并行查询与类型推导,数组长度变化时的类型安全与查询生命周期管理

A 不支持合并结果
B 只能固定数量
C 根据数组长度自动管理并行查询,可用 combine 聚合结果 ✓ 正确答案
D 查询不会自动清理
#

28. DevTools 与调试能力

A 替代 SSR
B 只能看样式
C 无法操作缓存
D 可视化并操作缓存状态,定位数据问题 ✓ 正确答案
#

29. TanStack Router 在类型安全路由(Type-safe Router)

A 仅靠运行时校验
B 通过代码生成路由类型 + schema 推导参数类型,编译期约束 ✓ 正确答案
C 无类型
D 靠约定文档
#

30. TanStack Router 的 createRoute 与文件路由(File-based Routing)的取舍

A 两者无法混用
B 文件路由更灵活
C 代码路由更直观
D 代码路由灵活显式,文件路由约定直观,按项目规模选择 ✓ 正确答案
#

31. TanStack Router 的 Route Tree 的自动生成(tsr generate)的现代应用

A 扫描文件路由自动生成路由树类型 ✓ 正确答案
B 手动注册路由
C 只生成 CSS
D 无法在 CI 使用
#

32. TanStack Router 的 notFoundMode(root/fuzzy)的工程应用

A 无法用于嵌套路由
B 只在根级渲染
C 与 root 完全相同
D 在最近的匹配父路由边界内渲染 404 ✓ 正确答案
#

33. TanStack Router 的 SSR 集成(React Router v7 vs TanStack Start)

A TanStack Start 全栈统一、React Router v7 成熟、裸 Router 需自建集成 ✓ 正确答案
B 三者完全相同
C React Router v7 不支持 SSR
D Start 不支持 streaming
#

34. TanStack Router 的 useBlocker 在路由切换拦截(未保存表单)的工程应用

A 校验 search
B 加速导航
C 预取数据
D 路由离开前拦截,提示未保存表单 ✓ 正确答案
#

35. TanStack Router 的 useRouter 与 useRouterState 在路由状态的现代应用

A 无法订阅状态
B 两者都只读
C 两者都只操作
D useRouter 操作路由,useRouterState 订阅路由状态 ✓ 正确答案
#

36. TanStack Router 的 routeContext 在跨层级数据共享的工程价值

A 替代数据请求
B 只存样式
C 无法被子路由继承
D 向所有路由 loader 注入共享依赖,跨层级共享 ✓ 正确答案
#

37. TanStack Router 的 Link 的 activeOptions 在激活态的现代实践

A 与高亮无关
B 控制预取
C 控制 loading
D 配置 Link 激活态的匹配规则,控制导航高亮 ✓ 正确答案
#

38. TanStack Router 的 Devtools 在路由调试的现代工程应用

A 无法查看数据
B 只能看样式
C 可视化路由匹配、loader 数据与状态,定位问题 ✓ 正确答案
D 替代单元测试
#

39. TanStack Pacer(防抖/节流/速率限制)的 React 集成

A 只用于动画
B 提供防抖/节流/限速,控制高频事件频率 ✓ 正确答案
C 无法与 React 集成
D 替代状态管理
#

40. TanStack Virtual 的虚拟滚动能力

A 只能用于固定高度
B 渲染全部子项
C 只渲染可视区内的子项并预留占位,减少 DOM 与渲染开销 ✓ 正确答案
D 无性能优化
#

41. TanStack Table v8/v9 headless 模式(状态置于响应式原语)

A 内置 UI
B 状态与 UI 解耦,逻辑跨框架复用、UI 自由定制 ✓ 正确答案
C 只能用于单一框架
D 状态不可定制
#

42. TanStack Store 的轻量级状态管理

A 无法订阅
B 重型依赖
C 只能用于 React
D 轻量、框架无关、细粒度订阅 ✓ 正确答案
#

43. TanStack Start 与 TanStack Router 文件路由、loader 数据预取的协作

A 只在客户端取数
B 服务端预取并 SSR 直出,客户端水合复用 ✓ 正确答案
C 无 SSR 数据
D 无法预取
#

44. TanStack Start 基于 Nitro/Vite 的多平台部署适配器(preset)的工程价值

A 只能部署到单一平台
B 一套代码通过 preset 适配多平台部署 ✓ 正确答案
C 无法切换平台
D 与部署无关
#

45. TanStack Start 与 Next.js/Remix 的选型对比(类型安全程度、框架耦合度、生态成熟度)

A Start 生态最成熟
B Next.js 类型安全最彻底
C Start 类型安全最彻底、Next.js 生态最成熟 ✓ 正确答案
D 三者耦合度相同
#

46. server functions 与 React Server Components 范式的能力边界与互操作

A RSC 管数据操作
B 两者完全相同
C server functions 管数据/操作,RSC 管服务端渲染 ✓ 正确答案
D server functions 管渲染
#

47. shadcn Registry 协议在企业私有组件库的工程价值

A 无法定制
B 只能分发样式
C 以元数据驱动源码分发企业组件,与设计系统统一 ✓ 正确答案
D 替代 npm 全部能力
#

48. ONNX Runtime Web 的 InferenceSession 在现代浏览器 AI 应用的工程价值

A 只做图像处理
B 只能服务端运行
C 无法加速
D 在浏览器加载并执行 ONNX 模型推理 ✓ 正确答案
#

49. Summarizer API 在 AI 编程工具链的协作

A 浏览器本地文本摘要,隐私低延迟 ✓ 正确答案
B 只能云端调用
C 无法用于文本
D 只做翻译
#

50. Rewriter API 与 Chrome Built-in AI 的现代协作

A 必须上传云端
B 本地模型文本改写,隐私低延迟 ✓ 正确答案
C 无法离线
D 只用于翻译
#

51. CSS-first 配置(@theme)与 shadcn/ui 的集成

A 用 @theme 把 CSS 变量映射为工具类,组件类名消费 ✓ 正确答案
B 用 JS 配置
C 无法映射
D 组件直接用裸变量
#

52. WebGPU ML 与 WebGPU Compute Pipeline 的现代取舍

A Compute 灵活但需自行实现,ML 库封装算子开发效率高 ✓ 正确答案
B 两者完全相同
C ML 库无法用 GPU
D Compute 无法加速
#

53. Tailwind v4 Dark Mode (@variant dark) 与 .dark 类与 prefers-color-scheme 的取舍

A 两者完全相同
B class 策略支持手动切换,系统策略自动跟随系统 ✓ 正确答案
C class 策略无法手动切换
D 系统策略可手动切换
#

54. Preflight base styles 与 CASCADE LAYERS 在 reset 的工程取舍

A Preflight 无法跨浏览器
B 两者都只重置
C Layers 不做优先级
D Preflight 重置默认样式,Layers 控制优先级层级 ✓ 正确答案
#

55. 多品牌主题与暗黑模式如何用 CSS 变量/设计令牌扩展,品牌切换的性能如何优化?

A 无法支持多品牌
B 每次切换都全量重排
C 必须用 JS 改所有样式
D 只改 CSS 变量,浏览器重绘颜色,通常不触发重排 ✓ 正确答案
#

56. 设计 Token 在 shadcn/ui 的应用

A 组件内硬编码颜色
B CSS 变量承载语义 token,暗黑模式通过作用域覆盖 ✓ 正确答案
C 无法定制主题
D 只用 JS 配色
#

57. Language Detector API 的语言识别 在现代浏览器 AI 应用的工程价值

A 无法离线
B 必须联网
C 本地识别文本语言,隐私低延迟 ✓ 正确答案
D 只做翻译
#

58. Tailwind CSS 4 的 CSS-first 配置(@theme)相较 JS 配置的工程价值

A 配置写在 CSS 中,无需 JS 配置文件,与原生 CSS 融合 ✓ 正确答案
B 必须用 JS 配置
C 无法定义令牌
D 兼容性更差
#

59. Tailwind 4.x 的 Lightning CSS 在构建速度的现代工程优势

A Rust 实现,加速 CSS 构建与压缩 ✓ 正确答案
B 比 PostCSS 更慢
C 无法压缩
D 只用于调试
#

60. Tailwind 4.x 的 @import "tailwindcss" 在 CSS 模块化与 Vite 的工程应用

A 必须 JS 配置
B 需要多个 @tailwind 指令
C 无法用于 Vite
D 一条语句引入全部,配合 Vite 插件零配置集成 ✓ 正确答案
#

61. Tailwind 4.x 的 @theme 自定义设计 Token 在设计系统的现代实践

A 集中定义 token 并自动生成工具类 ✓ 正确答案
B 只能 JS 定义
C 无法生成类
D 与设计稿无关
#

62. Tailwind 4.x 的容器查询(@container)原生支持的工程应用

A 与响应式无关
B 只能基于视口
C 无法用于组件
D 基于容器宽度而非视口做响应式,组件级自适应 ✓ 正确答案
#

63. shadcn/ui 在 Tailwind 4.x 下的复制粘贴(Copy-Paste)

A 无法复制
B 需要新引入运行时依赖
C 组件源码复制进项目,样式配置迁移到 CSS(@theme) ✓ 正确答案
D 配置仍只在 JS
#

64. shadcn/ui 的 components.json 在组件配置(路径、样式)的工程应用

A 配置组件路径、样式、别名,指导 CLI 安装 ✓ 正确答案
B 只存组件源码
C 无法定制
D 与 CLI 无关
#

65. TanStack Router 的 Nested Routes(嵌套路由)

A 父路由定义布局,Outlet 渲染子路由 ✓ 正确答案
B 无层级
C 子路由无法用父布局
D 不能共享 loader
#

66. TanStack Router 的 Route Masking(路由遮罩)

A 模态框打开时展示 URL 与真实路由分离 ✓ 正确答案
B 加速渲染
C 预取数据
D 校验参数
#

67. TanStack Router 的 RouteErrorBoundary 在错误处理的工程应用

A 无法重试
B 只能捕获网络错误
C 捕获路由 loader/渲染错误,就近展示错误 UI ✓ 正确答案
D 导致整页崩溃
#

68. TanStack Start(全栈框架 RC)的现状

A 生态最成熟
B 已完全稳定
C RC 阶段,功能现代但生态较新、稳定性待验证 ✓ 正确答案
D 不支持类型安全
#

69. TanStack Pacer(节流/防抖/批处理)在交互性能优化的工程价值

A 无法复用
B 只用于动画
C 用防抖/节流/批处理控制高频交互频率 ✓ 正确答案
D 替代渲染
#

70. TanStack Virtual 在大列表的工程价值与 List vs Grid virtualization 的取舍

A Grid 更简单
B 两者完全相同
C List 管一维、Grid 管二维,Grid 用两轴组合实现 ✓ 正确答案
D 无法支持 Grid
#

71. TanStack Virtual 与 URL 状态/路由器的协作

A 无法同步
B 库自动管理 URL
C 把滚动/分页状态同步到 URL,实现刷新与分享恢复 ✓ 正确答案
D 与 URL 无关
#

72. TanStack Start 生态成熟度现状与从纯 SPA 迁移的考量

A 迁移成本为零
B 生态较新但类型安全强,需评估学习成本与稳定性 ✓ 正确答案
C 生态最成熟
D 无需新概念
#

73. shadcn/ui 在 Tailwind 4.x 下的 CSS 变量主题系统的工程应用

A 只用 JS 变色
B 组件内硬编码
C 无法多主题
D CSS 变量承载语义色,@theme 映射工具类,作用域覆盖主题 ✓ 正确答案
#

74. shadcn/ui 在多框架支持(React、Vue、Svelte、Solid)

A 各框架实现相同
B 只能 React
C 无法共享样式
D headless 逻辑与 Tailwind 样式分离,各框架移植复用 ✓ 正确答案
#

75. shadcn/ui 的 cn() 工具(clsx + tailwind-merge)在类名合并的现代实践

A 只能合并字符串
B 合并条件类名并解决 Tailwind 类冲突 ✓ 正确答案
C 无法处理冲突
D 与组件无关
#

76. shadcn/ui 在 Monorepo 的组件共享(packages/ui)

A 只存样式
B 每个应用独立复制
C 无法共享样式
D 集中组件源码与样式配置,多应用通过 workspace 依赖共享 ✓ 正确答案
#

77. shadcn/ui 的 form 组件(RHF + Zod)在表单工程的现代价值

A 无法校验
B 只做样式
C RHF 高性能 + Zod 类型安全校验 + 封装简化样板 ✓ 正确答案
D 性能差
#

78. shadcn/ui 的 data-table 在 TanStack Table 集成的工程应用

A TanStack 管逻辑、shadcn 管样式,组合构建表格 ✓ 正确答案
B 与 TanStack 无关
C 无法排序
D 只做样式
#

79. shadcn/ui 的 chart(Recharts 包装)的现代工程实践

A 与设计系统无关
B 自研图表引擎
C 无法自定义
D 包装 Recharts 并统一主题与设计令牌 ✓ 正确答案
#

80. shadcn/ui 的 command(cmdk)在命令面板的工程价值

A 只能做普通列表
B 构建命令面板,支持模糊搜索与快捷键 ✓ 正确答案
C 无法搜索
D 无快捷键
#

81. shadcn/ui 的 sonner 在 Toast 通知的现代应用

A 无法自定义
B 只能做对话框
C 提供现代 toast 通知,支持主题与交互 ✓ 正确答案
D 无主题
#

82. shadcn/ui 的主题切换(next-themes)在暗色模式的工程实践

A 只改组件类名
B 每次刷新闪白光
C 无法持久化
D next-themes 管理主题状态,CSS 变量切换暗色 ✓ 正确答案