[vscode插件]Simple React Snippets

React Snippets和命令的基本集合。

特征

只有你需要的，仅此而已。No Redux. No React Native.

简单，简单的React片段。

这些片段是我从自己的日常React使用中精心挑选出来的。不是React中的所有内容都包含在这里。这是一组手动选择的代码片段，它的工作方式正是您所期望的，而不仅仅是文档的副本。

代码片段Snippets

Snippet	Renders
`imr`	Import React
`imrc`	Import React / Component
`imrd`	Import ReactDOM
`imrs`	Import React / useState
`imrse`	Import React / useState useEffect
`impt`	Import PropTypes
`impc`	Import React / PureComponent
`cc`	Class Component
`ccc`	Class Component With Constructor
`cpc`	Class Pure Component
`fc`	Function Component
`cdm`	componentDidMount
`uef`	useEffect Hook
`cwm`	componentWillMount
`cwrp`	componentWillReceiveProps
`gds`	getDerivedStateFromProps
`scu`	shouldComponentUpdate
`cwu`	componentWillUpdate
`cdu`	componentDidUpdate
`cwu`	componentWillUpdate
`cdc`	componentDidCatch
`gsbu`	getSnapshotBeforeUpdate
`ss`	setState
`ssf`	Functional setState
`usf`	Declare a new state variable using State Hook
`ren`	render
`rprop`	Render Prop
`hoc`	Higher Order Component（高阶组件）

完整拓展名

imr – Import React

import * as React from 'react';

imrc – Import React, Component

import * as React from 'react';
import { Component } from 'react';

imrd – Import ReactDOM

import ReactDOM from 'react-dom';

imrs – Import React, useState

import * as React from 'react';
import { useState } from 'react';

imrse – Import React, useState, useEffect

import * as React from 'react';
import { useState, useEffect } from 'react';

impt – Import PropTypes

import PropTypes from 'prop-types';

impc – Import PureComponent

import * as React from 'react';
import { PureComponent } from 'react';

cc – Class Component

class | extends React.Component {
  render() {
    return <div>|</div>
  }
}

export default |;

ccc – Class Component With Constructor

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

export default |;

cpc – Class Pure Component

class | extends PureComponent {
  state = { | },
  render() {
    return ( | );
  }
}

export default |;

fc – Function Component

const | = props => {
  return ( | );
};

export default |;

cdm – componentDidMount

componentDidMount() {
  |
}

uef – useEffect Hook

useEffect(() => {
  |
}, []);

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, prevState) {
  |
}

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.| }
});

usf – Declare a new state variable using State Hook

const [|, set|] = useState();

Hit Tab to apply CamelCase to function. e.g. [count, setCount]

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} />;
    }
  };
}