❌

阅读视图

发现新文章，点击刷新页面。

React生态蓝图梳理：前端、全栈与跨平台全景指南

✇掘金 前端
石小石Orz

Hi，我是石小石！

很久没和大家聊 React 了，今天心血来潮，想带大家一起梳理一下 2025 最新的 React 生态蓝图，帮你在做技术选型和架构设计时少走弯路。
发展到今天，React 早已不只是一个前端 UI 库，而是形成了一个覆盖 前端开发、全栈架构、跨平台应用、性能优化、AI 驱动开发 的完整生态圈。
接下来，我会从 核心语言 → 脚手架与框架 → 状态管理 → UI 组件 → 性能优化 → 移动端 → 测试 → AI 开发辅助 → 全栈与部署 这条完整链路，梳理 2025 年最新的 React 技术栈，并为每个环节提供 官方链接、技术特点、适用场景、优缺点分析，让你能一篇掌握全貌。

React 核心与基础演进

React 19（2024 年 12 月发布）带来了不少实用更新。新增了 Actions API，让异步状态更新更简单，同时支持阻塞和非阻塞渲染，提升了渲染控制能力。静态站点生成和 React Server Components 也更成熟了。

Hooks 方面，除了 useDeferredValue 和 useTransition 继续优化渲染优先级，新增的 useFormStatus、useOptimistic、useActionState等 Hooks 让交互体验更顺畅。

渲染机制依然基于成熟的 Fiber 架构，支持可中断和增量更新，结合实验性的 Concurrent Mode，响应速度和用户体验有明显提升。React 的核心理念没变，声明式 UI、虚拟 DOM、组件化和单向数据流，依然是写出高质量代码的基础。

附官网文档：react.nodejs.cn/learn

脚手架、构建与运行时

  • Vite：启动快到飞起，热更新（HMR）响应迅速，非常适合轻量级 SPA 和快速迭代开发。
  • Bun：新晋的 JavaScript 运行时，集打包、SSR 和依赖管理于一身，能给 React 项目带来更快的构建和运行体验。
  • Next.js 15：完美支持 React 19，内置 React Server Components、Server Functions，还有基于 Rust 的 Turbopack，轻松搞定混合渲染（SSR、SSG、ISR）和 AI 优化代码，打造全栈和边缘部署应用效率满满。
  • Remix（现 React Router v7） ：2024 年 11 月正式更名，结合前端路由和全栈特性，支持 SSR，是 Next.js 的有力竞争者。
  • Astro：主打静态优先，JS 体积极小，只在必须交互的组件上做 hydration，非常适合内容驱动或性能敏感的项目。

状态管理与数据获取

  • TanStack Query（React Query） ：自动缓存数据、后台刷新，让服务端状态管理更智能，性能和体验双提升，数据请求处理更简单。
  • Zustand / Jotai / Recoil / MobX / XState：一系列轻量级状态管理方案，适合局部或全局状态，各有侧重，写法简洁直观，且易于扩展。
  • Redux Toolkit：Redux 的现代升级版，集成状态管理和数据获取，代码结构清晰，是复杂项目的稳定选择。
  • React Server Components / Functions：把数据处理和渲染逻辑放到服务器端，减轻客户端负担，性能和用户体验都能明显提升。

选取指南：

场景 推荐库
需要稳定且可预测的大型复杂应用 Redux + Redux Toolkit
快速开发，追求轻量和简洁 Zustand 发音： /ˈzuːstænd/
组件状态依赖复杂，异步多 Recoil / Jotai 发音： /ˈriːkɔɪl/ /ˈdʒoʊtaɪ/
需要响应式、自动追踪依赖 MobX 发音： /mɒb ɛks/
状态流程明确且复杂，流程化管理 XState
混合局部与全局状态管理 Zustand + Jotai 组合使用

路由与全栈结构

  • React Router v7：支持 SSR 和全栈开发，适合轻量级多页面应用，灵活度高。
  • Next.js 自带路由系统：基于文件系统的路由，简单直观，非常适合企业级项目和结构复杂的页面。
  • TanStack Router：新晋的 TypeScript 优选路由库，设计现代，未来计划与 React Server Components 深度集成，值得持续关注。

UI 组件与样式体系

  • Tailwind CSS + shadcn/ui：原子化 CSS 带来极高定制自由度，配合无样式且注重可访问性的组件库，开发效率和体验都非常棒。
  • Material UI / Chakra UI / DaisyUI / Ant Design：主流组件生态，提供丰富现成的样式和交互组件，适合快速迭代和企业级项目。
  • CSS Modules / Styled Components / Emotion：模块化样式方案中，CSS Modules 通过限定 CSS 作用域避免全局冲突，简单易用，适合渐进式迁移；Styled Components 支持在 JS 中编写动态样式，方便主题切换和复用，但有一定运行时开销；Emotion 则更轻量灵活，支持静态提取和 CSS-in-JS，兼顾性能和开发体验。

未完待续

写不动了，留个坑，明天继续整理

视差悬停特效：鼠标跟随的沉浸式交互体验

✇掘金 前端
石小石Orz

大家好，我是石小石，小册《油猴脚本实战指南》作者。

视差悬停效果

最近在 Trae 官网发现了一个有趣的交互效果：当鼠标悬停在图标上时，图标会根据鼠标的移动产生跟随位移，看起来很炫酷。

于是我用AI问了一下，才知道这种效果叫“视差悬停效果”，挺有意思。

视差悬停效果”（Parallax Hover Effect）是一种常见的前端视觉交互效果，模拟景深原理，让页面元素在鼠标移动时产生错位移动，营造出立体或空间感，增强用户交互体验。

用Trae实现一个类似效果

先让Trae帮忙实现一个类似效果：

生成的代码如下：

<template>
  <!-- 外层容器，负责监听鼠标移动和离开事件 -->
  <div class="logo-container" @mousemove="handleMouseMove" @mouseleave="resetEffect">
    <!-- 中心 Logo 容器，包含所有球体 -->
    <div class="logo" ref="logo">
      <!-- 循环生成球体 -->
      <div
        v-for="(sphere, index) in spheresConfig"
        :key="index"
        class="sphere"
        ref="spheres"
        :style="{
          width: sphere.size + 'px',       // 球体直径
          height: sphere.size + 'px',      // 球体直径
          top: sphere.top,                 // 定位：上边距
          left: sphere.left,               // 定位：左边距
          right: sphere.right,             // 定位：右边距
          bottom: sphere.bottom,           // 定位：下边距
          backgroundColor: sphere.color    // 球体颜色
        }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 中心 Logo 元素引用
const logo = ref(null)
// 所有球体元素的引用
const spheres = ref([])

// 球体配置数组
const spheresConfig = [
  { size: 60, top: '40px', left: '40px', color: '#3498db' },
  { size: 60, top: '40px', right: '40px', color: '#e74c3c' },
  { size: 60, bottom: '40px', left: '40px', color: '#2ecc71' },
  { size: 60, bottom: '40px', right: '40px', color: '#f39c12' },
  { size: 70, top: '120px', left: '120px', color: '#9b59b6' },
  { size: 50, top: '70px', left: '170px', color: '#1abc9c' },
  { size: 45, top: '180px', left: '70px', color: '#d35400' },
  { size: 40, top: '150px', right: '60px', color: '#27ae60' },
  { size: 35, top: '210px', right: '120px', color: '#8e44ad' },
  { size: 25, top: '30px', left: '150px', color: '#c0392b' }
]

// 鼠标移动事件
const handleMouseMove = (e) => {
  const container = e.currentTarget
  const rect = container.getBoundingClientRect()

  // 计算鼠标在容器中的相对位置（-1 ~ 1）
  const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2
  const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2

  // 中心 Logo 随鼠标旋转
  logo.value.style.transform = `rotateX(${-y * 20}deg) rotateY(${x * 20}deg)`

  // 每个球体根据鼠标位置做视差位移
  spheres.value.forEach((sphere, index) => {
    const sphereX = x * 35 * Math.cos(index * 0.8) // X 方向位移
    const sphereY = y * 35 * Math.sin(index * 0.8) // Y 方向位移
    const sphereZ = Math.abs(x * y) * 70 + index * 8 // Z 方向位移（层次感）

    sphere.style.transform = `translate3d(${sphereX}px, ${sphereY}px, ${sphereZ}px)`
  })
}

// 鼠标移出时恢复初始位置
const resetEffect = () => {
  logo.value.style.transform = 'rotateX(0) rotateY(0)'
  spheres.value.forEach(sphere => {
    sphere.style.transform = 'translate3d(0, 0, 0)'
  })
}
</script>

<style scoped>
/* 外层容器，定义大小和透视深度 */
.logo-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    perspective: 1200px;
}

/* 中心 Logo 容器 */
.logo {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* 球体公共样式 */
.sphere {
    position: absolute;
    border-radius: 50%;
    transition: transform 0.3s ease-out;
    box-shadow: inset -8px -8px 16px rgb(0 0 0 / 30%), 
        8px 16px rgb(255 255 255 / 30%);
}
</style>

效果还是很不错的：

这个demo的原理其实很简单，主要分为三步：

  1. 获取鼠标相对位置
  2. 模拟相机视角变化
  3. 实现分层错位运动

获取鼠标相对位置

const rect = container.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;

getBoundingClientRect() 是浏览器 DOM API 中非常常用的方法，用于获取元素相对于视口（viewport）的尺寸和位置。

  • x、y 都是范围 -1 到 1 的值，中心是 0，代表鼠标在容器里的相对位置。
  • 这个范围让后续计算方便做正负方向运动。

模拟相机视角变化

logo.value.style.transform = `rotateX(${-y * 20}deg) rotateY(${x * 20}deg)`;

这一步的主要目的是让整体结构跟着鼠标动，模拟相机视角变化。最简单的就是通过CSS的transform实现3D位置变化。

这里的 20 是旋转最大角度，让效果不会太夸张。

分层错位运动

要想让球体有空间感，就要实现球体视差位移，同样的可以使用transform属性。

spheres.value.forEach((sphere, index) => {
  const sphereX = x * 35 * Math.cos(index * 0.8);
  const sphereY = y * 35 * Math.sin(index * 0.8);
  const sphereZ = Math.abs(x * y) * 70 + index * 8;
  
  sphere.style.transform = `translate3d(${sphereX}px, ${sphereY}px, ${sphereZ}px)`;
});

“视差”的核心是让每个球体产生不同速度和运动方向：

  • 每个球体的 X 轴偏移sphereX = 鼠标横向偏移 * 35 * 一个和球序号有关的余弦函数。
    → 余弦函数让每个球的偏移方向和幅度有差异，避免动作统一死板。
  • Y 轴偏移sphereY 类似，用正弦函数产生错落。
  • Z 轴偏移sphereZ 通过鼠标位置和球的索引控制，让不同球体在“深度”上产生不同位移，制造层次感。
  • translate3d 是 CSS 3D 变换，直接告诉浏览器把球体往三个方向移动。

当然，在鼠标离开时，我们需要所有元素慢慢回到原点，避免停留在中间状态。

logo.value.style.transform = 'rotateX(0) rotateY(0)';
spheres.value.forEach(sphere => {
  sphere.style.transform = 'translate3d(0, 0, 0)';
});

开源库

市面上有一些专门做视差或3D交互的库，可以帮我们快速实现效果。

Parallax.js

  • 经典轻量级视差库，支持基于鼠标移动的多层元素视差效果。
  • 用法简单，适合基础悬停视差。
  • GitHub 地址

Vanilla-tilt.js

  • 类似 Tilt.js，功能更全面，支持触摸事件和更多配置。
  • 纯原生 JS，无依赖，性能好。
  • GitHub 地址

react-parallax-tilt (React 生态)

  • React 版本的Tilt效果库，适合 React 项目。
  • 支持自定义视差和旋转，易于集成。
  • GitHub 地址
❌