当前位置: 首页 > news >正文

“ES7+ React/Redux/React-Native snippets“常用快捷前缀

请注意,这是一个常用的列表,不是扩展提供的所有前缀。最完整和最新的列表请参考扩展的官方文档或在 VS Code 中查看扩展的详情页面。

React (通常用于 .js, .jsx, .ts, .tsx):

  • rfce: React Functional Component with Export Default
  • rafce: React Arrow Function Component with Export Default
  • rce: React Class Component with Export Default
  • rcc: React Class Component
  • rpc: React Pure Class Component
  • rconst: Adds constructor and super (in a class)
  • rprops: Adds defaultProps (in a class or functional component)
  • rpropst: Adds propTypes (in a class or functional component)
  • rstate: Adds state object (in a class)
  • rcontext: React Context boilerplate

React Hooks (通常用于 .js, .jsx, .ts, .tsx):

  • usf: useState hook template (e.g., const [name, setName] = useState(initialValue);)
  • useEffect: useEffect hook template
  • useRef: useRef hook template
  • useMemo: useMemo hook template
  • useCallback: useCallback hook template
  • useContext: useContext hook template
  • useReducer: useReducer hook template
  • useImperativeHandle: useImperativeHandle hook template
  • useLayoutEffect: useLayoutEffect hook template
  • useDebugValue: useDebugValue hook template

React Native (通常用于 .js, .jsx, .ts, .tsx):

  • rnfe: React Native Functional Component with Export Default
  • rnfce: React Native Functional Component with Export
  • rnsc: React Native Stylesheet Create (StyleSheet.create({}))
  • rnssc: React Native Stylesheet Create with styles constant (const styles = StyleSheet.create({}))
  • rncss: React Native Stylesheet Create shorthand (just styles)

Lifecycle Methods (Class Components):

  • cdm: componentDidMount
  • cdup: componentDidUpdate
  • cwunmount: componentWillUnmount
  • cdc: componentDidCatch
  • cgsb: getSnapshotBeforeUpdate
  • cserender: shouldComponentUpdate

Redux:

  • redux-reducer: Basic Redux reducer structure
  • redux-action: Basic Redux action creator structure

Other / Utilities:

  • imr: import React from 'react'
  • imrc: import React, { Component } from 'react'
  • imrpc: import React, { PureComponent } from 'react'
  • imrce: import React, { Component } from 'react' + Export Default (for class)
  • imp: Generic Import (import ... from ...)
  • impt: Generic Import Type (import type ... from ...)
  • impc: Generic Import CSS (import './style.css')
  • log: console.log()
  • clg: console.log() (similar to log)
  • clo: console.log(object)

再次提醒,这个列表涵盖了大多数你可能日常使用的片段。当你安装了扩展后,在编辑器中输入前缀时,VS Code 的智能感知也会弹出建议列表,这有助于你发现和记住更多的前缀。

http://www.dtcms.com/a/179854.html

相关文章:

  • 【K8S系列】Kubernetes常用 命令
  • CUDA编程 - CUDA编程中处理半精度浮点运算(FP16) - fp16ScalarProduct
  • 5.9-selcct_poll_epoll 和 reactor 的模拟实现
  • window 显示驱动开发-配置内存段类型
  • 官方SDK停更后的选择:开源维护的Bugly Unity SDK
  • 数据库系统概论(七)初识SQL与SQL基本概念
  • `timescale 1ns/1ps的意义
  • DeepResearch深度搜索实现方法调研
  • 【大模型ChatGPT+ArcGIS】数据处理、空间分析、可视化及多案例综合应用
  • 34.笔记1
  • 如何用Jmeter实现自动化测试?
  • wsl - install RabbiqMQ
  • 复杂网络鲁棒性理论基础
  • 使用Python 打造多格式文件预览工具 — 图、PDF、Word、Excel 一站式查看
  • 极客说|Unsloth 的全微调之路:从 Adapter 到 Full Fine-tuning
  • Git标签删除脚本解析与实践:轻松管理本地与远程标签
  • 大数据——Mac环境DataSpell集成Jupyter
  • 零基础学Java——第十一章:实战项目 - 控制台应用开发
  • 开目新一代MOM:AI赋能高端制造的破局之道
  • 【C++进阶】第2课—多态
  • 星光云720全景VR系统升级版,720全景,360全景,vr全景,720vr全景
  • Jsp技术入门指南【十一】SQL标签库
  • flask开启https服务支持
  • 嵌入式openharmony标准系统中GPIO口控制详解
  • 【教学类-34-12】20250509(通义万相)4*3蝴蝶拼图(圆形、三角、正方、半圆的凹凸小块+数字提示+参考图灰色)
  • 打造专属AI好友:小智AI聊天机器人详解
  • 解决Win11下MySQL服务无法开机自启动问题
  • 车载以太网转USB接口工具选型指南(2025版)
  • vison transformer vit 论文阅读
  • 计算机系统结构-第九章-互联网络 第十章