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