Front-end development toolkit.
My other user code snippet plugin: Big Lvan
React Keys
Prefix |
Method |
hus , useState |
const [state, setState] = useState(initialState) |
huc , useContext |
const context = useContext(initialContext) |
hur , useRef |
const refContainer = useRef(initialRef) |
hue , useEffect
useEffect(() => {
componentDidMount || componentDidUpdate;
return () => {
componentWillUnmount;
};
}, [input]);
hucb , useCallback
const memoizedCallback = useCallback(() => {
// doSomething(a, b);
}, [a, b]);
hum , useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
hurd , useReducer
const [state, dispatch] = useReducer(reducer, initialArg, init);
huih , useImperativeHandle
useImperativeHandle(ref, createHandle, [deps]);
ifc , internalFunctionComponent
const = ({
className = '',
// props,
}) => {
// TODO
return // TODO
}
fc , functionComponent
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import cs from 'classnames';
import styles from './.scss';
const = ({
className = '',
// props,
}) => {
// TODO
return // TODO
}
export default withStyles(styles)();
cc , classComponent
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import cs from 'classnames';
import styles from './.scss';
class extends Component {
static propTypes = {
// propName: PropTypes.string,
}
static defaultProps = {
// propName: "",
}
state = {
// stateName: "",
}
render() {
const { propName } = this.props;
const { stateName } = this.state;
return (
// TODO
)
}
}
export default withStyles(styles)();
ccsp
static propTypes = {
: PropTypes.string,
}
ccsd , defaultProps
static defaultProps = {
: PropTypes.string,
}
state
state = {};
cchf , classHandleFunction
handle = ({}) => {};
fchf , functionHandleFunction
const handle = () => {};
tp
const {} = this.props;
ts
const {} = this.state;
ir , imp , import
import React from "react";
imws , importwithStyles
import withStyles from "isomorphic-style-loader/lib/withStyles";
imcn , importclassnames
import cs from "classnames";
ed , exp , export
export default ;
ec , expc , exportc
export const = () => ;
cin , consoleinfo
console.info("msg: ", subst);
clo , consolelog
console.log("msg: ", subst);
cer , consoleerror
console.error("msg: ", subst);
cdi , consoledir
console.dir(obj);
cta , consoletable
console.table(data, columns);
cti , consoletime
console.time(label);
cte , consoletimeend
console.timeEnd(label);
ctl , consoletimeLog
console.timeLog(label);
cwa , consolewarn
console.warn("msg: ", subst);
ccl , consoleclear
console.clear();
cco , consolecount
console.count(label);
/**
* 用一句话介绍此函数是干嘛用的。
*
* @param {string} employee - 参数的介绍文字
* @return {string} 函数返回的数据
*
* @example
*
* const xx = foo('hello')
*/
Style keys
fl
font-size: 16px;
line-height: 24px;
wh
width: 1280px;
height: 344px;
te
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
tem
position: relative;
line-height: 24px;
height: 48px;
font-size: 16px;
overflow: hidden;
display: block;
width: 100%;
&:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 24px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffff 50%);
}
temw
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
hvc
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);