# React Vscode 插件
TIP
插件名:Simple React Snippets
| 缩写 | 作用 |
|---|---|
| imr | Import React |
| imrc | Import React / Component |
| impt | Import PropTypes |
| impc | Import React / PureComponent |
| cc | Class Component |
| ccc | Class Component With Constructor |
| sfc | Stateless Function Component |
| cdm | componentDidMount |
| cwm | componentWillMount |
| cwrp | componentWillReceiveProps |
| gds | getDerivedStateFromProps |
| scu | shouldComponentUpdate |
| cwu | componentWillUpdate |
| cdu | componentDidUpdate |
| cwu | componentWillUpdate |
| cdc | componentDidCatch |
| gsbu | getSnapshotBeforeUpdate |
| ss | setState |
| ssf | Functional setState |
| ren | render |
| rprop | Render Prop |
| hoc | Higher Order Component |
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} />;
}
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
好的工具是利器!