react 18 不导致 css 样式残留，真正问题在于样式加载与卸载时机不匹配：css modules 仅哈希类名但不卸载样式标签，全局 css（如 animate.css）需手动引入且不可卸载，仅 css-in-js 库（如 styled-components）存在真实内存泄漏风险。
React 18 本身不会导致 CSS 样式残留——真正的问题出在样式加载方式和卸载时机不匹配。CSS Modules、全局 import 或第三方动画库引入的样式，一旦注入 就不会随组件卸载自动清除。
CSS Modules 的类名哈希化 ≠ 样式自动卸载
CSS Modules 只负责编译时重命名类名（如 .button → Button_button__Kx2f1），并不控制样式是否从 DOM 中移除。它生成的 <style></style> 标签是静态注入的，生命周期与组件无关。
- 你看到的“残留”，其实是 DevTools 里 class 属性还在，但对应样式规则早已存在
—— 这不是泄漏，是预期行为 - 如果多个组件共用同一个
.module.css文件（比如都 import'./shared.module.css'），那这个文件的样式只会注入一次，更不可能卸载 - Vite 或 Webpack 构建后，所有模块 CSS 都被打包进一个或几个
<style></style>标签，React 卸载组件时根本不会触碰它们
全局样式（如 Animate.css）必须手动确保已引入
像 animate__fadeIn 这类类名，属于全局 CSS 框架，依赖外部 <style></style> 或 CDN 注入。组件里只写 className="animate__fadeIn" 不会生效，除非：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
-
main.jsx中已执行import 'animate.css'（Vite/CRA 支持） - 或
public/index.html里通过 CDN 加了<link rel="stylesheet"> - 否则，即使组件卸载，也不会“残留”——而是压根没样式可残留
CSS-in-JS 库（styled-components / emotion）才真会内存泄漏
这类库在运行时动态创建 <style></style> 标签并插入 DOM，若未正确清理，才会出现真实泄漏：
-
styled.div`color: ${p => p.color}`每次渲染都可能生成新组件，重复注入样式标签 - 组件卸载时，若没调用库内部的 cleanup 钩子（如 emotion 的
cache.reset()或 styled-components 的 SSR 清理逻辑），旧<style></style>标签会堆积 - 验证方法：打开 DevTools → Elements →
，反复挂载/卸载组件，观察<style></style>节点是否持续增加
真正该担心的是服务端渲染（SSR）下的 class 名不一致
Next.js 或 RSC 环境中，styles.button 在服务端是空对象 {}，客户端 hydrate 时才拿到真实类名。这会导致：
- 首屏渲染无 class，样式闪动（FOUC）
- Hydrate 后 class 补上，但旧 DOM 节点没被替换，看起来像“残留”
- 这不是样式没卸载，是前后端 class 映射不同步——必须用
useEffect延迟到客户端再应用动态类名，或启用next/dynamic+ssr: false
最易被忽略的一点：你以为在“卸载样式”，其实只是没搞清样式注入的主体是谁。CSS Modules 不管卸载，全局 CSS 不可卸载，只有 CSS-in-JS 库才需要你主动干预——而干预点不在组件内，而在库的配置和缓存策略里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
