VSCode原生不支持类组件转函数组件，仅vscode-glean插件可全自动转换；需手动补全props类型、拆分useEffect、替换context用法，并验证ESLint、ref、useCallback依赖等。
VSCode 原生不支持类组件转函数组件
直接说结论：React 类组件转函数组件不是 VSCode 内置功能，也不在 ES7+ React snippets 或其他主流代码片段插件的能力范围内。你敲 rcc 能生成类组件，但没有 rcf 或类似命令来反向转换。原生重构菜单里也找不到 “Convert to Function Component” 选项——语言服务（LSP）本身不提供这类语义级转换。
真正能用的只有 vscode-glean 插件
目前实测稳定可用的方案，仅 vscode-glean 支持全自动类 → 函数转换，且逻辑覆盖较全：
- 把
this.setState({ x: v })转成const [x, setX] = useState(v) - 将
componentDidMount/componentWillUnmount合并进useEffect(() => { ... }, []) - 把
ref={this.inputRef}和this.inputRef = createRef()替换为const inputRef = useRef(null) - 类字段（如
someValue = 123）会转成useRef(123)，而非useState（这点很关键，别误以为全是 state）
注意：它对含 getSnapshotBeforeUpdate、shouldComponentUpdate 或高阶封装（如 withRouter）的类组件支持有限，转换后需人工补 useMemo 或 React.memo。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
转换后必须立刻检查的三处硬伤
即使 vscode-glean 输出了看似完整的函数组件，以下三点不手动核对，运行时大概率报错或行为异常：
-
props类型丢失：TS 中interface Props不会自动变成function MyComp(props: Props)，得手补类型签名；若原类有defaultProps，得改写成MyComp.defaultProps = {...}并加PropTypes或用props ??= {} - 生命周期合并错误：多个
useEffect若依赖数组相同，会被合并成一个，但原类中componentDidMount和componentDidUpdate的执行时机不同，得拆开并补上正确依赖项 -
context处理失效：类组件中static contextType = ThemeContext不会转成const theme = useContext(ThemeContext)，必须人工替换，否则上下文取不到值
别跳过 ESLint + 手动验证环节
自动转换只是起点，不是终点。真实项目里最稳妥的做法是：
- 转换前确保项目已启用
eslint-plugin-react-hooks和react/no-deprecated规则，让componentWillMount等直接报错，倒逼你只在必要处保留类组件 - 转换后立即跑
eslint --fix+prettier --write统一格式，再逐个打开新函数组件，检查useState初始值是否含副作用调用（如useState(fetchData())应改为useState(() => fetchData())） - 特别留意
ref和event handler：类组件中this.handleClick.bind(this)会变成useCallback(() => {...}, [])，但若 handler 里用了未声明依赖的 props，exhaustive-deps会报警，得补全
最易被忽略的是：转换后的函数组件若仍被 PureComponent 或 React.memo 包裹，而内部用了 useCallback 但没稳定依赖项，性能反而更差。
