Vscode开发工具中的Simple React Snippets插件，对React开发有哪些便捷

Vscode插件搜索Simple React Snippets，点击安装，即可使用，常用快捷键如下：

(二) 简单举例如下：

imr - Import React
import React from 'react';
imrc - Import React, Component
import React, { Component } from 'react';
impt - Import PropTypes
import PropTypes from 'prop-types';
impc - Import PureComponent
import React, { PureComponent } from 'react';
cc - Class Component
class | extends Component {
  state = { | },
  render() {
    return ( | );
  }
}

export default |;
ccc - Class Component With Constructor
class | extends Component {
  constructor(props) {
    super(props);
    this.state = { | };
  }
  render() {
    return ( | );
  }
}

export default |;
sfc - Stateless Function Component
const | = props => {
  return ( | );
};

export default |;
cdm - componentDidMount
componentDidMount() {
  |
}
cwm - componentWillMount
//WARNING! To be deprecated in React v17. Use componentDidMount instead.
componentWillMount() {
  |
}
cwrp - componentWillReceiveProps
//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
componentWillReceiveProps(nextProps) {
  |
}
gds - getDerivedStateFromProps
static getDerivedStateFromProps(nextProps, prevStat) {
  |
}
scu - shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
  |
}
cwu - componentWillUpdate
//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
componentWillUpdate(nextProps, nextState) {
  |
}
cdu - componentDidUpdate
componentDidUpdate(prevProps, prevState) {
  |
}
cwun - componentWillUnmount
componentWillUnmount() {
  |
}
cdc - componentDidCatch
componentDidCatch(error, info) {
  |
}
gsbu - getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState) {
  |
}
ss - setState
this.setState({ | : | });
ssf - Functional setState
this.setState(prevState => {
  return { | : prevState.| }
});
ren - render
render() {
  return (
    |
  );
}
rprop - Render Prop
class | extends Component {
  state = { | },
  render() {
    return this.props.render({
      |: this.state.|
    });
  }
}

export default |;
hoc - Higher Order Component
function | (|) {
  return class extends Component {
    constructor(props) {
      super(props);
    }

    render() {
      return < | {...this.props} />;
    }
  };
}