191 lines
2.9 KiB
Plaintext
191 lines
2.9 KiB
Plaintext
# Import
|
|
snippet ir import React
|
|
import React from 'react';
|
|
|
|
snippet irc import React and Component
|
|
import React, { Component } from 'react';
|
|
|
|
snippet irh import React hooks
|
|
import { use$1 } from 'react';
|
|
|
|
snippet ird import ReactDOM
|
|
import ReactDOM from 'react-dom';
|
|
|
|
snippet irp import PropTypes
|
|
import PropTypes from 'prop-types';
|
|
|
|
# Lifecycle Methods
|
|
snippet cdm componentDidMount
|
|
componentDidMount() {
|
|
${1}
|
|
};
|
|
|
|
snippet cdup componentDidUpdate
|
|
componentDidUpdate(prevProps, prevState) {
|
|
${1}
|
|
};
|
|
|
|
snippet cwm componentWillMount
|
|
componentWillMount() {
|
|
${1}
|
|
};
|
|
|
|
snippet cwr componentWillReceiveProps
|
|
componentWillReceiveProps(nextProps) {
|
|
${1}
|
|
};
|
|
|
|
snippet cwun componentWillUnmount
|
|
componentWillUnmount() {
|
|
${1}
|
|
};
|
|
|
|
snippet cwu componentWillUpdate
|
|
componentWillUpdate(nextProps, nextState) {
|
|
${1}
|
|
};
|
|
|
|
snippet scu shouldComponentUpdate
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
${1}
|
|
}
|
|
|
|
# Props
|
|
snippet spt static propTypes
|
|
static propTypes = {
|
|
${1}: PropTypes.${2}
|
|
};
|
|
|
|
snippet pt propTypes
|
|
${1}.propTypes = {
|
|
${2}: PropTypes.${2}
|
|
};
|
|
|
|
snippet sdp static defaultProps
|
|
static defaultProps = {
|
|
${1}: ${2}
|
|
};
|
|
|
|
snippet dp defaultProps
|
|
${1}.defaultProps = {
|
|
${2}: ${3}
|
|
};
|
|
|
|
snippet pp props
|
|
props.${1};
|
|
|
|
snippet tp this props
|
|
this.props.${1};
|
|
|
|
# State
|
|
snippet st
|
|
state = {
|
|
${1}: ${2},
|
|
};
|
|
|
|
snippet sst
|
|
this.setState({
|
|
${1}: ${2}
|
|
});
|
|
|
|
snippet tst
|
|
this.state.${1};
|
|
|
|
# Component
|
|
snippet raf
|
|
const ${1:ComponentName} = (${2:props}) => {
|
|
${3:state}
|
|
|
|
return (
|
|
<>
|
|
${4}
|
|
</>
|
|
);
|
|
};
|
|
|
|
snippet rcla
|
|
class ${1:ClassName} extends Component {
|
|
render() {
|
|
return (
|
|
<>
|
|
${2}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
snippet ercla
|
|
export default class ${1:ClassName} extends Component {
|
|
render() {
|
|
return (
|
|
<>
|
|
${2}
|
|
</>
|
|
);
|
|
};
|
|
};
|
|
|
|
snippet ctor
|
|
constructor() {
|
|
super();
|
|
|
|
${1:state}
|
|
}
|
|
|
|
snippet ren
|
|
render() {
|
|
return (
|
|
<>
|
|
${2}
|
|
</>
|
|
);
|
|
}
|
|
|
|
snippet fup
|
|
forceUpdate(${1:callback});
|
|
|
|
# Hooks
|
|
snippet uses useState
|
|
const [${1:state}, set${2}] = useState(${3:initialState});
|
|
|
|
snippet usee useEffect
|
|
useEffect(() => {
|
|
${1}
|
|
});
|
|
|
|
snippet userd useReducer
|
|
const [${1:state}, ${2:dispatch}] = useReducer(${3:reducer});
|
|
|
|
snippet userf useRef
|
|
const ${1:refContainer} = useRef(${2:initialValue});
|
|
|
|
snippet usect useContext
|
|
const ${1:value} = useContext(${2:MyContext});
|
|
|
|
snippet usecb useCallback
|
|
const ${1:memoizedCallback} = useCallback(
|
|
() => {
|
|
${2}(${3})
|
|
},
|
|
[$3]
|
|
);
|
|
|
|
snippet usem useMemo
|
|
const ${1:memoizedCallback} = useMemo(() => ${2}(${3}), [$3]);
|
|
|
|
snippet usei useImperativeHandle
|
|
useImperativeHandle(${1:ref}, ${2:createHandle});
|
|
|
|
snippet used useDebugValue
|
|
useDebugValue(${1:value});
|
|
|
|
# ReactDOM methods
|
|
snippet rdr ReactDOM.render
|
|
ReactDOM.render(${1}, ${2});
|
|
|
|
snippet rdh ReactDOM.hydrate
|
|
ReactDOM.hydrate(${1:element}, ${2:container}[, ${3:callback}]);
|
|
|
|
snippet rdcp ReactDOM.createPortal
|
|
ReactDOM.createPortal(${1:child}, ${2:container});
|