1.快速搭建react组件模板

2.相关搭建命令
2.1 导入导出
前缀 | 方法 |
---|---|
imp→ |
import moduleName from 'module' |
imn→ |
import 'module' |
imd→ |
import { destructuredModule } from 'module' |
ime→ |
import * as alias from 'module' |
ima→ |
import { originalName as aliasName} from 'module' |
exp→ |
export default moduleName |
exd→ |
export { destructuredModule } from 'module' |
exa→ |
export { originalName as aliasName} from 'module' |
2.2 函数相关
javascript
// anfn→ 箭头函数
(params) => { }
// nfn→ 命名函数
const functionName = (params) => { }
// dob→ 解构对象
const {propName} = objectToDescruct
// dar→ 解构数组
const [propName] = arrayToDescruct
2.3 react导入
javascript
// imr→ 导入 React
import React from 'react'
// imrd→ 导入 ReactDOM
import ReactDOM from 'react-dom'
// imrc→ 导入 React 和 Component
import React, { Component } from 'react'
// imrcp→ 导入 React、Component 和 PropTypes
import React, { Component } from 'react'
import PropTypes from 'prop-types'
2.4 生命周期
javascript
// cdm→ componentDidMount
componentDidMount = () => { }
// cdup→ componentDidUpdate
componentDidUpdate = (prevProps, prevState) => { }
// cwun→ componentWillUnmount
componentWillUnmount = () => { }
2.5 react类组件快速生成
javascript
// rcc→ 类组件
import React, { Component } from 'react'
export default class FileName extends Component {
render() {
return <div>$2</div>
}
}
// rce→ 类组件带导出
import React, { Component } from 'react'
export class FileName extends Component {
render() {
return <div>$2</div>
}
}
export default FileName
2.6 react函数组件快速生成
javascript
// rfce→ 函数组件带导出
import React from 'react'
function FileName() {
return <div>$0</div>
}
export default FileName
// rafc→ 箭头函数组件
import React from 'react'
const FileName = () => {
return <div>$0</div>
}
export default FileName
2.7 PropTypes-类型定义
javascript
// pta→ PropTypes.array
PropTypes.array
// ptar→ PropTypes.array.isRequired
PropTypes.array.isRequired
// ptb→ PropTypes.bool
PropTypes.bool
// ptbr→ PropTypes.bool.isRequired
PropTypes.bool.isRequired
// pts→ PropTypes.string
PropTypes.string
// ptsr→ PropTypes.string.isRequired
PropTypes.string.isRequired
2.8 Redux 相关
javascript
// rxaction→ Redux Action
export const actionName = (payload) => ({
type: 'ACTION_TYPE',
payload
})
// rxconst→ Redux Constant
export const ACTION_TYPE = 'ACTION_TYPE'
// rxreducer→ Redux Reducer
const initialState = {
}
export default (state = initialState, { type, payload }) => {
switch (type) {
case typeName:
return { ...state, ...payload }
default:
return state
}
}
2.9 React Native 相关
javascript
// rnc→ React Native 类���件
import React, { Component } from 'react'
import { View, Text } from 'react-native'
export default class FileName extends Component {
render() {
return (
<View>
<Text>$2</Text>
</View>
)
}
}
// rncs→ React Native 类组件带样式
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
export default class FileName extends Component {
render() {
return (
<View>
<Text>$2</Text>
</View>
)
}
}
const styles = StyleSheet.create({})
2.10 控制台相关
javascript
// clg→ console.log
console.log(object)
// clo→ console.log object with name
console.log('object', object)
// ctr→ console.trace
console.trace(object)
// cwa→ console.warn
console.warn(object)
// cin→ console.info
console.info(object)
3.总结
转载于此博主仅做学习记录
插件:ES7+ React/Redux/GraphQL/React-Native snippets 使用指南VS Cod - 掘金