common
| shortcut |
description |
todo |
// TODO: ==== modify - delete ==== |
fixme |
// FIXME: ==== 待修复 ==== |
log |
console.log('log:------$1：$lineNumber------: ', $0); |
divide-line、line-divide |
// ======================分隔线====================== |
///、、、、 |
/** */ |
、、 |
// |
dgb、debugger |
debugger; // FIXME: ======== 需要删除 debugger ======== |
React
| shortcut |
description |
dp |
const { value } = props |
dpc |
const { value } = this.props |
dsc |
const { value } = this.state |
do |
const { value } = objectName |
da |
const [ value ] = arrayName |
className | clm |
className={styles.} |
cls |
import styles from './index.module.less' |
func (component for javascript)
const Index = () => {
return (
<div>
</div>
);
};
export default Index;
func8 (function-component-typescript-react18)
import { FC } from 'react';
interface IProps {}
const Index: FC<IProps> = ({
}) => {
return (
<div>
</div>
);
};
export default Index;
reactComponent (component for class)
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Index extends Component {
static propTypes = {};
constructor(props) {
super(props);
this.state = {
};
}
static getDerivedStateFromProps(props, state) {}
componentDidMount() {
// do something
}
shouldComponentUpdate(nextProps, nextState) {}
getSnapshotBeforeUpdate(prevProps, prevState) {}
componentDidUpdate(prevProps, prevState, snapshot) {}
componentWillUnmount() {
// do something
}
render() {
return (
<div>这里是组件</div>
);
}
}
Hooks
useEffect
useEffect(() => {
}, []);
useCallback
useCallback(() => {
}, []);
useMemo
useMemo(() => {}, []);
useState
const [, set] = useState();
useRef
const $1Ref = useRef($0);
useImperativeHandle
useImperativeHandle(ref, () => ({
}), []);
