10 Best React UI Libraries for 2026

Design Systems Libraries: These libraries come with pre-built Figma kits and code components.

Tailwind CSS Libraries: These libraries offer accessible patterns while relying on Tailwind for visual design.

Unstyled Primitive Component Libraries: For maximum control, these components are fully unstyled at the primitive level.

两个开发库,类似于若依系统这种,可以大幅减少开发时间。

Rapid Development Libraries: For when speed is more crucial than customization.

前端常用术语

一、Web 应用形态 / 架构(SPA 就在这里 ⭐⭐⭐)

术语全称含义特点对比
SPASingle Page Application单页应用只有一个 HTML对比 MPA
MPAMulti Page Application多页应用页面跳转刷新传统 Web
PWAProgressive Web App渐进式 Web 应用类 App 体验离线
Micro Frontends微前端前端拆分多团队类微服务
Isomorphic App同构应用前后端共用代码SSR + CSRNext
BFFBackend For Frontend前端专属后端API 聚合后端架构

二、SPA 相关核心概念(面试必问

术语含义说明
Client-side Routing客户端路由JS 控制路由
History API历史 APIpushState
Hash RoutingHash 路由#/home
Browser RoutingHistory 路由干净 URL
Soft Navigation软跳转不刷新
Hard Reload硬刷新浏览器重载

三、浏览器核心机制(⭐⭐⭐)

术语含义作用
Event Loop事件循环异步模型
Call Stack调用栈同步执行
Task Queue任务队列宏任务
Microtask微任务Promise
Rendering Pipeline渲染流水线UI 更新
Reflow回流布局计算
Repaint重绘样式变化
Compositing合成GPU 加速

四、前端网络 / 协议

术语含义说明
HTTP超文本协议请求响应
HTTPS安全 HTTPTLS
TCP传输层协议可靠
DNS域名解析IP
CDN内容分发网络静态资源
Preload预加载提前请求
Prefetch预取空闲加载

五、模块化 / 构建体系(⭐⭐⭐)

术语含义说明
ESMES Modules标准模块
CJSCommonJSNode
UMD通用模块兼容
Bundling打包合并文件
Tree Shaking摇树删除无用
Code Splitting代码拆分懒加载
HMR热更新开发体验

六、前端性能术语(Web Vitals)

术语含义指标
FCP首次内容绘制加载
LCP最大内容绘制首屏
TTI可交互时间交互
CLS累积布局偏移稳定
TBT阻塞时间卡顿

七、浏览器存储

术语含义使用场景
Cookie小数据会话
LocalStorage本地存储token
SessionStorage会话级临时
IndexedDB本地数据库大数据
Cache API缓存PWA

八、CSS / UI 相关

术语含义说明
BEM命名规范可维护
CSS-in-JS样式方案JS 控制
Utility-first工具类Tailwind
Responsive响应式多设备
Media Query媒体查询断点

九、工程质量 / 架构意识

术语含义说明
Separation of Concerns关注点分离架构
DRY不重复复用
KISS简单原则可维护
Technical Debt技术债重构
Monorepo单仓多包Turborepo

react常用术语

一、渲染模型相关术语(CSR / SSR 等 ⭐⭐⭐必考)

这一组是 SPA / React / Next / SEO / 性能 的交叉核心

术语全称含义特点面试要点
CSRClient Side Rendering客户端渲染JS 在浏览器生成 UIReact 默认
SSRServer Side Rendering服务端渲染服务端生成 HTML首屏快
SSGStatic Site Generation静态生成构建时生成 HTML性能最好
ISRIncremental Static Regeneration增量静态生成静态 + 更新Next 专属
Hydration注水绑定事件HTML → 可交互SSR 必问
Streaming SSR流式 SSR分块返回 HTML更快首屏React 18

CSR vs SSR 核心对比(面试标准表)

维度CSRSSR
HTML 生成浏览器服务端
首屏性能较慢较快
SEO较差
服务器压力
实现复杂度

📌 一句话

CSR 是“浏览器算”,SSR 是“服务器先算一半”

二、React 架构 / 运行机制术语(⭐⭐⭐)

术语含义说明
Virtual DOM虚拟 DOMJS 中的 UI 描述
Reconciliation协调diff 新旧树
FiberFiber 架构可中断渲染
Render Phase渲染阶段计算 UI
Commit Phase提交阶段更新 DOM
Batching批处理合并 state 更新
Concurrent Rendering并发渲染可打断

三、React 组件 / 状态相关术语

术语含义使用场景
Function Component函数组件主流
HooksHook复用逻辑
useState状态UI 变化
useEffect副作用请求 / 订阅
useLayoutEffect同步副作用DOM 读写
useRef引用不触发渲染
useMemo记忆计算性能优化
useCallback记忆函数避免重渲染

四、React 更新 / 重渲染相关(面试高频)

术语含义易错点
Re-render重渲染≠ DOM 更新
State Update状态更新异步
Props Change属性变化触发更新
Referential Equality引用相等对象/函数
Memoization记忆化性能
React.memo组件缓存浅比较

五、Concurrent React / React 18 术语(⭐⭐⭐)

术语含义作用
Concurrent Mode并发模式更流畅
startTransition标记低优先级输入不卡
useTransition过渡状态loading
Suspense挂起异步 UI
Streaming流式渲染SSR 加速

📌 一句话

Concurrent 的核心:“重要的先渲染,不重要的等等”

六、React 路由 / SPA 专属术语

术语含义说明
Client-side Routing客户端路由SPA 核心
History API浏览器历史pushState
Hash RouterHash 路由#/home
Browser RouterHistory 路由干净 URL
Route Guard路由守卫鉴权

七、React 工程化 / 项目结构

术语含义场景
Controlled Component受控组件表单
Uncontrolled Component非受控简单表单
Lifting State Up状态提升组件通信
Composition组合代替继承
Container / Presentational容器/展示架构模式
Colocation就近放置现代推荐

八、SSR + React 常见组合术语

术语含义备注
Isomorphic同构同一套代码
Universal App通用应用CSR + SSR
Server Components服务端组件React 新特性
Client Components客户端组件交互
Edge Rendering边缘渲染CDN

九、终极速记(面试版)

术语一句话
SPA一个 HTML 的应用
CSR浏览器渲染
SSR服务端先渲染
Hydration让 HTML 变可交互
Fiber可中断的渲染架构
Re-render函数重新执行
Concurrent不阻塞主线程

后端常用术语

一、认证 / 授权 / 安全(后端视角 ⭐⭐⭐)

术语中文核心含义后端中的体现易混点
Authentication身份认证验证用户身份校验账号密码 / token谁是谁
Authorization授权权限控制中间件、权限校验谁能干什么
RBAC基于角色的访问控制角色 → 权限admin / user粗粒度
ABAC基于属性的访问控制条件 + 属性用户/资源属性细粒度
OAuth 2.0授权协议第三方授权access token≠ 登录
Access Token访问令牌请求凭证API 鉴权短期有效
Refresh Token刷新令牌更新 access token延长登录态更敏感
CSRF Token防伪造令牌防 CSRF表单 / header只防 cookie

二、API / 架构风格

术语含义特点适用场景
REST架构风格资源 + HTTP 方法常规 Web
GraphQL查询语言客户端驱动复杂前端
RPC远程过程调用像调函数内部服务
gRPC高性能 RPCHTTP/2 + Protobuf微服务
WebSocket全双工通信实时聊天、推送
SSE服务器推送单向通知流

三、服务端架构 / 系统设计(⭐⭐⭐)

术语中文核心思想备注
Monolith单体架构一个应用易开发
Microservices微服务服务拆分运维复杂
SOA面向服务架构微服务前身企业系统
BFFBackend For Frontend前端专用后端前后端协作
API GatewayAPI 网关统一入口鉴权/限流
Service Mesh服务网格服务通信治理Istio

四、数据库 / 数据层(⭐⭐⭐)

术语含义特点备注
SQL关系型数据库强一致PostgreSQL
NoSQL非关系型高扩展Redis / Mongo
ACID事务特性原子/一致/隔离/持久强一致
CAP分布式理论C/A/P 不可兼得取舍
Index索引加速查询空间换时间
Transaction事务操作一致性rollback
Migration数据迁移结构变更版本化
Replication复制高可用主从
Sharding分片水平扩展复杂

五、缓存 / 性能

术语含义作用示例
Cache缓存提速Redis
Cache Aside缓存模式读写分离常用
TTL过期时间防脏数据seconds
Cache Penetration缓存穿透查不到空值缓存
Cache Breakdown缓存击穿热点失效
Cache Avalanche缓存雪崩大量失效随机 TTL

六、并发 / 稳定性

术语含义用途备注
Thread线程并发执行资源共享
Process进程资源隔离更安全
Lock同步死锁风险
Idempotency幂等性重试安全POST 去重
Rate Limiting限流防刷Token Bucket
Circuit Breaker熔断防雪崩Hystrix
Retry重试短暂失败指数退避

七、部署 / 运维 / 云原生

术语含义用途备注
Docker容器环境一致镜像
Kubernetes容器编排自动伸缩K8s
CI/CD持续集成部署自动化GitHub Actions
Blue-Green蓝绿部署无停机双环境
Canary金丝雀发布小流量风险低
Load Balancer负载均衡分流Nginx
Auto Scaling自动扩缩容高可用云服务

八、日志 / 监控 / 可观测性

术语含义用途示例
Logging日志问题排查ELK
Metrics指标性能Prometheus
Tracing链路追踪分布式Jaeger
APM应用监控综合New Relic
SLA / SLO服务等级可用性99.9%

九、面试速记(一句话版)

术语一句话
RBAC角色决定权限
BFF前端专用后端
CAP一致性取舍
幂等性多次请求结果一样
熔断防止故障扩散
金丝雀发布小流量试水