“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 的智能感知也会弹出建议列表,这有助于你发现和记住更多的前缀。

相关推荐
没有鸡汤吃不下饭1 小时前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
用户7678797737321 小时前
后端转全栈之Next.js后端及配置
react.js·next.js
码流之上1 小时前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
Asort4 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer4 小时前
什么是 React 中的远程组件?
前端·react.js
真夜4 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
艾小码4 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了14 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码4 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰4 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm