美文网首页
React、Redux 插件生成代码片段快捷键

React、Redux 插件生成代码片段快捷键

作者: 北疆小兵 | 来源:发表于2020-02-10 21:20 被阅读0次

Basic Method

  • imp
 import moduleName from 'module'
  • imd
import {  } from 'module'

  • ime
 import * as alias from 'module'
  • ima
import { originalName as alias } from 'module'
  • met
methodName = (params) => {
  
}
  • enf
 export const functionName = (params) => {
   
 }
  • fre
array.forEach(currentItem => {
  
})
  • fof
for(let item of object) {
  
}

  • prom
return new Promise((resolve, reject) => {
  
})
  • cp
const {  } = this.props
  • cs
const {  } = this.state
  • met
methodName = (params) => {
   
 }

React

  • imrc
import React, { Component } from 'react';
  • imrcp
import React, { PureComponent } from 'react';
  • redux
 import { connect } from 'react-redux'
  • rconst
 constructor(props) {
        super(props)
    
        this.state = {
             
        }
    }
  • est
 this.state = {}
  • sst
     this.setState({})
  • cwm
    DEPRECTED
 componentWillMount() {
 }

  • cdm
 componentDidMount() {
        
    }

  • cwr
 componentWillReceiveProps(nextProps) {
        
    }
  • scu
 shouldComponentUpdate(nextProps, nextState) {
       
   }
  • cwup
componentWillUpdate(nextProps, nextState) {
        
 }
  • cdup
 componentDidUpdate(prevProps, prevState) {
        
    }

  • cwun
componentWillUnmount() {
        
    }
  • gdsfp
static getDerivedStateFromProps(props, state) {
        
    }

  • gsbu
getSnapshotBeforeUpdate = (prevProps, prevState) => {
       
   }
  • ren
render(){return ()}

React Native Component

  • rnc
import React, { Component } from 'react'
import { Text, View } from 'react-native'

export default class FileName extends Component {
    render() {
        return (
            <View>
                <Text> textInComponent </Text>
            </View>
        )
    }
}

*rnstyle

const styles = StyleSheet.create({
    style
})

  • rnf

import React from 'react'
import { View, Text } from 'react-native'

const $1 = () => {
    return (
        <View>
            <Text>$2</Text>
        </View>
    )
}

export default $1
  • rncs
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'

export default class FileName extends Component {
    render() {
        return (
            <View>
                <Text> textInComponent </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({})


  • rnce
import React, { Component } from 'react'
import { Text, View } from 'react-native'

export class FileName extends Component {
    render() {
        return (
            <View>
                <Text> textInComponent </Text>
            </View>
        )
    }
}

  • rncredux

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export class FileName extends Component {
    static propTypes = {
        prop: PropTypes
    }

    render() {
        return (
            <View>
                <Text> prop </Text>
            </View>
        )
    }
}

const mapStateToProps = (state) => ({
    
})

const mapDispatchToProps = {
    
}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

React Native

  • irmrn
 import { moduleName } from 'react-native'
  • restyle
 import { moduleName } from 'react-native'

Redux

  • rcredwx





import React, { Component } from 'react'
import { connect } from 'react-redux'

export class FileName extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    
})

const mapDispatchToProps = {
    
}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

  • rcreduxp

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export class FileName extends Component {
    static propTypes = {
        prop: PropTypes
    }

    render() {
        return (
            <div>
                
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    
})

const mapDispatchToProps = {
    
}

export default connect(mapStateToProps, mapDispatchToProps)(FileName)


  • reduxmap
const mapStateToProps = (state) => ({
    
})

const mapDispatchToProps = {
    
}

  • reaction
export const actionName = (payload) => ({
  type: type,
  payload
})
  • rxconst
export const $1 = '$1'
  • rxreducer

redux reducer template

const initialState = {

}

export default (state = initialState, { type, payload }) => {
  switch (type) {

  case typeName:
    return { ...state, ...payload }

  default:
    return state
  }
}
  • reselect
import { createSelector } from 'reselect'

export const selectorName = state => state.selector

React Component

  • rcc
import React, { Component } from 'react'

export default class test extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

  • rce
import React, { Component } from 'react'

export class test extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default test


  • rcep
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class test extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default test
  • rpc
import React, { PureComponent } from 'react'

export default class test extends PureComponent {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

  • rpcp

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class test extends PureComponent {
    static propTypes = {

    }

    render() {
        return (
            <div>
                
            </div>
        )
    }
}

  • rafc
import React from 'react'

export const test = () => {
    return (
        <div>
            
        </div>
    )
}

相关文章

网友评论

      本文标题:React、Redux 插件生成代码片段快捷键

      本文链接:https://www.haomeiwen.com/subject/hsezxhtx.html