React 代码片段快捷方式完整指南
date
Oct 16, 2025
slug
react-code-snippets-quick
status
Published
tags
React
summary
React代码片段快捷方式完整指南
type
Post
分类 | 快捷指令 | 生成的代码模板/作用 | 记忆技巧 & 说明 |
📦 导入与模块 | imr | import React from 'react' | Import React |
ㅤ | imrs | import React, { useState } from 'react' | Import React + State |
ㅤ | imrse | import React, { useState, useEffect } from 'react' | Import React + State + Effect |
ㅤ | imp | import moduleName from 'module' | Import |
ㅤ | imd | import { destructuredModule } from 'module' | Import Destructured |
ㅤ | exp | export default moduleName | Export |
🧩 组件骨架 | rcc | 生成一个类组件（Class Component） | React Class Component |
ㅤ | rfc | 生成一个函数组件（Function Component） | React Function Component |
ㅤ | rafce | 生成一个使用箭头函数的函数组件并默认导出 | React Arrow Function Component with Export（现代写法，推荐👍） |
ㅤ | rmc | 生成一个用 React.memo 包裹的记忆化函数组件 | React Memo Component（性能优化） |
🎣 Hooks与状态 | usf | const [state, setState] = useState(initialState) | UseState Function（最核心的Hook） |
ㅤ | ue | 生成 useEffect 钩子及其依赖数组的结构 | UseEffect（处理副作用） |
ㅤ | uct | const value = useContext(MyContext) | UseContext（获取上下文） |
ㅤ | uref | const refContainer = useRef(initialValue) | UseRef（获取DOM引用或保存可变值） |
🔗 React Router | imbr | import { BrowserRouter as Router } from 'react-router-dom' | Import BrowserRouter |
ㅤ | imbrl | import { Link } from 'react-router-dom' | Import BrowserRouter Link |
ㅤ | imbrnl | import { NavLink } from 'react-router-dom' | Import BrowserRouter NavLink（支持高亮） |
📱 React Native | rnf | React Native函数组件 | React Native Function component |
ㅤ | rnfs | 带样式的RN函数组件 | React Native Function component with Styles |
🐛 调试助手 | clg | console.log(object) | Console.Log（最常用的调试语句） |