Simple React Snippets插件

react项目开发中，没开发一个页面，都需要重新写同样的代码，进行基础搭建，大部分情况下，选择直接复制，然后删改下。下面我要讲的一个插件就非常好，可以自动生成代码

Simple React Snippet
react 快速生成代码块插件

安装

打开VSCode的插件查单，然后在输入框中输入Simple React Snippets,然后点击进行安装就可以了。

使用

输入imrc生成如下代码:

import React, { Component } from 'react';

输入cc生成如下代码:

class Test extends Component {
  state = {  }
  render() { 
    return ( <div></div> );
  }
}
export default Test;

输入impt生成如下代码:

import PropTypes from 'prop-types';

输入ccc生成如下代码:

class  extends Component {
  constructor(props) {
    super(props);
    this.state = {  }
  }
  render() { 
    return (  );
  }
}
 
export default ;

输入sfc生成如下代码:

const  = () => {
  return (  );
}
 
export default ;

输入cdm生成如下代码:

componentDidMount() {
  
}

输入cwm生成如下代码:

//WARNING! To be deprecated in React v17. Use componentDidMount instead.
componentWillMount() {
  
}

输入cwrp生成如下代码:

//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
componentWillReceiveProps(nextProps) {
  
}

输入gds生成如下代码:

static getDerivedStateFromProps(nextProps, prevState) {
  
}

输入scu生成如下代码:

shouldComponentUpdate(nextProps, nextState) {
  
}

输入cwu生成如下代码:

//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
componentWillUpdate(nextProps, nextState) {
  
}

输入cdu生成如下代码:

componentDidUpdate(prevProps, prevState) {
  
}

输入cdc生成如下代码:

componentDidCatch(error, info) {
  
}

输入gsbu生成如下代码:

getSnapshotBeforeUpdate(prevProps, prevState) {}

输入ss生成如下代码:

this.setState({ :  });

输入ssf生成如下代码:

this.setState(prevState => {
  return { : prevState. };
});

输入ren生成如下代码:

render() {
  return (
     
  );
}

输入rprop生成如下代码:

class  extends Component {
  state = { :  }
  render() { 
    return this.props.render({
      : this.state.
    });
  }
}
export default ;

输入hoc生成如下代码:

function () {
  return class extends Component {
    constructor(props) {
      super(props);
    }
 
    render() {
      return < {...this.props} />
    }
  }
}