react snippets

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)

使用方法

1. 在 .jsx、.tsx 或 React Native 相关文件中输入上述缩写
2. 当出现代码提示时，按 Tab 键 或 Enter 键 即可触发代码片段展开
3. 部分片段生成后会自动选中可修改的部分（如组件名、state 变量名），直接输入即可替换

通过这些快捷缩写，能大幅减少重复代码编写，尤其适合快速搭建组件结构、调用 Hooks 或编写 Redux 相关逻辑。