ES7+ React/Redux/React-Native snippets 插件提供了大量快捷缩写（snippets），通过输入简短字符触发完整代码块，以下是常用的快捷方式分类汇总：
一、React 组件基础
| 缩写 | 含义 | 生成代码示例 |
|---|
rfc | React 函数组件 | 基础函数组件结构（含 export default） |
rfce | 带导出的函数组件 | 函数组件定义后直接导出（export default () => {}） |
rcc | React 类组件 | 继承 Component 的类组件（含 render 方法） |
rccc | 带构造函数的类组件 | 类组件 + constructor 方法（初始化 state 和绑定 this） |
rpfc | React Pure 函数组件 | 纯函数组件（React.memo 包裹的函数组件） |
二、Hooks 相关
| 缩写 | 含义 | 生成代码示例 |
|---|
us | useState Hook | const [state, setState] = useState(initialState); |
ue | useEffect Hook | 含清理函数的 useEffect 结构 |
uc | useContext Hook | const value = useContext(Context); |
um | useMemo Hook | const memoizedValue = useMemo(() => computeValue(a, b), [a, b]); |
ucref | useRef Hook | const refContainer = useRef(initialValue); |
ur | useReducer Hook | const [state, dispatch] = useReducer(reducer, initialArg, init); |
三、Redux 相关
| 缩写 | 含义 | 生成代码示例 |
|---|
rrd | Redux Reducer | Redux reducer 基础结构（含 switch 语句） |
rac | Redux Action Creator | 生成 Redux Action 创建函数 |
rconst | Redux 常量定义 | export const ACTION_NAME = 'ACTION_NAME'; |
四、React Native 相关
| 缩写 | 含义 | 生成代码示例 |
|---|
rnf | React Native 函数组件 | React Native 基础函数组件（含 View 和 Text） |
rncs | React Native 类组件 | React Native 类组件结构 |
rnstyle | React Native StyleSheet | const styles = StyleSheet.create({}); |
五、其他常用片段
| 缩写 | 含义 | 生成代码示例 |
|---|
imp | 导入模块 | import moduleName from 'module'; |
imd | 导入默认模块 | import { module } from 'module'; |
prop | PropTypes 定义 | 组件 propTypes 类型校验（如 Component.propTypes = {}） |
cdm | 类组件的 componentDidMount | 类组件生命周期方法 componentDidMount() |
cdu | 类组件的 componentDidUpdate | 类组件生命周期方法 componentDidUpdate(prevProps, prevState) |
使用方法
- 在
.jsx、.tsx 或 React Native 相关文件中输入上述缩写 - 当出现代码提示时，按 Tab 键 或 Enter 键 即可触发代码片段展开
- 部分片段生成后会自动选中可修改的部分（如组件名、state 变量名），直接输入即可替换
通过这些快捷缩写，能大幅减少重复代码编写，尤其适合快速搭建组件结构、调用 Hooks 或编写 Redux 相关逻辑。
5
0
已为社区贡献2条内容
所有评论(0)