1.Framer Motion 中 motion/react 和 motion/react-client 的用法和区别

背景知识：服务器端渲染 (SSR) 和客户端渲染 (CSR)

在最新的 Motion for React（原 Framer Motion）12.x 及更高版本中，官方提供了两个入口模块：motion/react 和 motion/react-client。二者对外 API 完全一致，但针对的运行环境不同，分别适合“客户端组件”（Client Components）和“服务器组件”（Server Components）场景。选择时，只需根据组件类型（是否带 "use client"）导入对应模块：在需要在浏览器端执行动画的组件中使用 motion/react；在 React Server Components 中使用 motion/react-client，以避免在服务端构建时引入浏览器特有的代码。

🎯 React 渲染模式回顾

1. 客户端渲染（CSR）

客户端渲染（CSR）指浏览器先加载一个基础 HTML，再由 React 在客户端运行 JavaScript 并动态挂载组件 UI

2. 服务器端渲染（SSR）

服务器端渲染（SSR）先在服务端将组件渲染为 HTML 字符串发送给浏览器，随后通过 React 的“hydrate”过程接管页面，以实现交互能力。

3. React Server Components（RSC）

React 19 引入的 Server Components 允许组件完全在服务器上运行并输出标记，客户端仅接收静态内容，无需再发送对应的 JavaScript 进行“hydrate”。

1. motion/react

• 用途: 这是 Motion 库的主要模块，用于在 React 客户端组件 中创建动画。

• 功能: 提供完整的 Motion 动画功能，包括 <motion> 组件、动画属性（如 animate、whileHover、whileInView 等）、手势支持、变体（variants）、退出动画（通过 AnimatePresence）等。此模式支持完整的动画和交互功能（如手势、动态属性变化等），适用于需要客户端交互的组件‌

• 使用场景: 适用于传统的 React 客户端渲染场景，组件运行在浏览器端，依赖 React 的客户端生命周期和交互性。

• 导入方式:

  import