# 与 React 集成使用
URL: https://caijiao.org/animejs/6-integration/2-react
Source: docs/animejs/6-integration/2-react.md
Description: 本节介绍如何在 React 项目中使用 Anime.js，结合 useRef、useEffect 等钩子实现组件动画，让 React 元素具有更丰富的动态表现。
Anime.js 可以方便地与 React 配合，尤其适合：
- 在 `useEffect` 生命周期中启动动画；
- 使用 `useRef` 获取 DOM 元素；
- 配合事件响应（如 onClick）触发动画；
## 示例：点击按钮使元素移动
```jsx
const boxRef = useRef(null);
const handleClick = () => {
anime({
targets: boxRef.current,
translateX: 200,
duration: 1000,
easing: 'easeInOutQuad'
});
};
````
在 JSX 中绑定事件即可：
```jsx
```
## 小结
Anime.js 可以非常自然地集成到 React 中。推荐在组件内部管理动画逻辑，避免与 React 状态冲突。
## 示例代码
```html
React 集成 Anime.js
```
✅ 效果说明：
* 使用 React 18 + Babel 编译 JSX；
* 使用 `useRef` 获取 DOM 元素；
* 点击按钮，元素平移动画开始；
* 动画和 React 生命周期完全解耦，适合 SPA 动态组件。