WebStorm中快速生成React组件的快捷键是rcc（类组件）、rfc（函数组件）和cc（仅类声明），输入后按Tab即可自动生成对应模板，大幅提升开发效率。
React开发中，WebStorm 的快捷键不是“锦上添花”，而是直接决定你写一个组件、改一处 props、调试一次渲染的耗时——用对几个关键组合，10 秒能干完的事，不用鼠标点 30 秒还找不着入口。
快速生成 React 组件骨架（rcc / rfc / cc）
手敲 class Component extends React.Component 或函数组件模板太慢，且容易漏 render()、export default 或 React.memo 包裹。WebStorm 内置了语义化代码模板：
-
rcc：输入后按Tab，生成带constructor和render的类组件（含export default） -
rfc：生成无状态函数组件（ES6 箭头函数 +export default） -
cc：仅生成类声明（不带export），适合嵌套子组件或测试用例
注意：rfc 默认不加 PropTypes 或 defaultProps，如需自动补全，得提前在 Settings → Editor → Live Templates 中启用对应模板并勾选 React 上下文；另外，如果光标不在新行开头（比如卡在某个 JSX 标签中间），模板可能无法触发。
跳转到组件定义和 props 使用处（Ctrl + B / Alt + F7）
React 项目里组件层层嵌套，App → Header → Logo → Icon，靠滚动找定义效率极低。真正高效的是：
-
Ctrl + B（Windows/Linux）或Cmd + B（macOS）：光标停在组件名（如<Button>）上，一键跳转到其定义文件 —— 即使是来自node_modules的第三方组件也支持（前提是已索引） -
Alt + F7：反向操作，查这个组件在哪被用了；对高阶组件（如withRouter）或自定义 Hook（如useApi）尤其有用
容易踩的坑：Ctrl + B 在 JSX 中有时会跳到类型定义（TSX）而非实现，此时可按 Ctrl + Alt + B 强制跳实现；若跳转失败，先确认文件是否被 WebStorm 正确识别为 JavaScript/TypeScript（右下角状态栏看语言标识），否则索引不生效。
安全重命名组件/props/state（Shift + F6）
改一个 userList 变量名，结果只改了某一行，导致 undefined 报错？React 里变量作用域复杂（props、state、解构、JSX 属性名），手动替换极易遗漏。用 Shift + F6 才可靠：
- 光标放在变量/函数/组件名上，按
Shift + F6，WebStorm 自动分析作用域：局部变量只改当前函数内，组件名则同步更新所有import和 JSX 引用 - 对
props重命名（如把onItemClick改成onClick），它还会检查 JSX 中的属性使用，包括 spread 操作（{...props}）是否受影响 - 重命名前务必确认光标真正在符号上（不是空格或括号里），否则弹出的是“Rename Element”空白框
性能提示：大型项目首次重命名可能卡顿 1–2 秒——这是在构建引用图，后续就快了；若长期卡住，检查 Settings → Editor → General → Code Folding 是否误启用了“Fold on collapse”，它会拖慢解析。
调试时快速查看 hooks 状态和渲染值（Alt + F8 / Ctrl + Shift + I）
React DevTools 不好进断点上下文，而 WebStorm 调试器里悬停看 useState 返回值常延迟或显示不全。更稳的方式是：
-
Alt + F8：在断点暂停时，选中任意表达式（如data?.items、useMemo(() => ...)的返回值），直接求值并显示结果（支持链式调用和简单逻辑） -
Ctrl + Shift + I（Windows/Linux）或Cmd + Shift + I（macOS）：光标停在 Hook 调用（如useEffect）上，立刻显示其签名、参数说明和当前依赖数组内容
关键细节：Alt + F8 不支持异步表达式（如 await fetch(...)），会报错；也不要输太重的计算（如 largeArray.map(...).filter(...)），调试器会卡住。真正该查的，是当前帧的静态状态，不是运行时副作用。
最常被忽略的一点：所有这些快捷键依赖 WebStorm 正确识别 React 项目结构——确保 package.json 里有 "react" 和 "@types/react"（TS 项目），且 Settings → Languages & Frameworks → JavaScript → Libraries 中已加载 node_modules/react。否则 Ctrl + B 跳不到、Shift + F6 识别不了组件作用域，再熟的快捷键也白搭。
