前言
react 模版文件,每次写组件需要复制的模版内容
01.class类型的jsx
import React, { createElement, Component } from 'react';
import classNames from 'classnames';
// classNames({ name: true, name2: false }) ==> 'name'
import PropTypes from 'prop-types';
import config from './config';
import styles from './index.less';
/**
* 模版组件
* @description 模版组件
* @class Persion
* @extends {Component}
* @author:
*
*/
class Template extends Component {
constructor(props) {
super(props);
this.state = {};
}
/**
* @description: 它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()
* 初始化数据后，但是还未渲染DOM时。
*/
componentWillMount() {}
/**
* @description: 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，
* 返回数据setState后组件会重新渲染
*/
componentDidMount() {}
/**
* @description: 父组件改变后的props进行渲染
*/
componentWillReceiveProps(newProps) {}
/**
* @description: 主要用于性能优化(部分更新) return false可以阻止组件的更新
*/
shouldComponentUpdate(newProps, newState) {
return true;
}
/**
* @description: shouldComponentUpdate返回true 组件进入重新渲染的流程
*/
componentWillUpdate(newProps, newState) {}
/**
* @description: react只会在第一次初始化成功会进入componentDidmount,
* 之后每次重新渲染后都会进入这个生命周期
*/
componentDidUpdate(newProps, newState) {}
/**
* @description: 清除 setTimeout,setInterval 和一些监听事件 removeEventListener
*/
componentWillUnmount() {}
/**
* @description: 临时事件
* @param {string} name 姓名
* @return {undefined}
*/
handleTempEvent = (name = '') => {
console.log(name);
this.props.optionalFunc();
};
/**
* @description: 临时事件
* @param {string} name 姓名
* @return {undefined}
*/
onEvent = (name = '') => {
this.props.optionalFunc();
};
/**
* @description: 临时事件
* @param {string} name 姓名
* @return {undefined}
*/
getEvent = (name = '') => {
this.props.optionalFunc();
};
/**
* @description: 临时事件
* @param {string} name 姓名
* @return {undefined}
*/
renderEvent = (name = '') => {
this.props.optionalFunc();
};
render() {
return (
<div className={styles.parent}>
<span onClick={this.handleTempEvent}>Hello World</span>
</div>
);
}
}
// 组件外和内部同时设置propTypes defaultProps的时候以外部为准
Template.propTypes = {
/**
* optionalString
*/
optionalString: PropTypes.string,
/**
* optionalNumber
*/
optionalNumber: PropTypes.number,
/**
* optionalObject
*/
optionalObject: PropTypes.object,
/**
* optionalSymbol
*/
optionalSymbol: PropTypes.symbol,
/**
* optionalArray
*/
optionalArray: PropTypes.array,
/**
* optionalBool
*/
optionalBool: PropTypes.bool,
/**
* 事件回调
*/
optionalFunc: PropTypes.func,
/**
* optionalMulti
*/
optionalMulti: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* optionalMulti
*/
optionalNode: PropTypes.node,
};
Template.defaultProps = {
optionalString: '',
optionalNumber: 1,
optionalObject: {},
optionalSymbol: Symbol(1),
optionalArray: [],
optionalBool: false,
optionalFunc: () => {},
optionalMulti: 1,
optionalNode: 0,
};
export default Template;
02.function类型的jsx
import React, { useState, useEffect, useRef } from 'react';
import classNames from 'classnames';
// classNames({ name: true, name2: false }) ==> 'name'
import PropTypes from 'prop-types';
import config from './config';
import styles from './index.less';
/**
* @description: TemplateHook
* @param {object} props
* @return {TemplateHook}
* @author:
*/
function TemplateHook(props) {
/**
* @description: 创建ref对象
*/
const divRef = useRef(null);
/**
* @description: 创建这个变量,并可以重新设置
*/
const [count, setCount] = useState(0);
/**
* @description: 生命周期 componentDidMonut
*/
useEffect(() => {
console.log(`componentDidMonut---${count}`);
return () => {
// 相当于 componentWillUnmount
console.log(`componentWillUnmount---${count}`);
};
}, []);
/**
* @description: 生命周期 componentDidUpdate and componentDidMonut
*/
useEffect(() => {
console.log(`componentDidUpdate---${count}`);
console.log(divRef);
});
/**
* @description: 修改count变量
* @param {array} array test variable
* @return {undefined}
*/
const onChange = (array = []) => {
setCount(count + 1);
};
const { name = '' } = props;
return (
<div ref={divRef} className={styles.parent}>
<span
onClick={() => {
onChange();
}}
>
Hello World
{name}
</span>
</div>
);
}
// 组件外和内部同时设置propTypes defaultProps的时候以外部为准
TemplateHook.propTypes = {
/**
* name
*/
name: PropTypes.string,
};
TemplateHook.defaultProps = {
name: '',
};
export default TemplateHook;
03.class类型的tsx
import React, { createElement, Component } from 'react';
import classNames from 'classnames';
// classNames({ name: true, name2: false }) ==> 'name'
import config from './config';
import styles from './index.less';
/**
* 模版组件
* @description 模版组件
* @class Persion
* @extends {Component}
* @author:
*
*/
const defaultProps = {
name: "test",
};
interface IProps {
name: string;
}
interface IState {
color: string;
}
class Template extends React.Component<IProps, IState> {
static defaultProps = defaultProps
constructor(props: IProps){
super(props);
this.state = {
color: "red"
}
}
/**
* @description: 它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()
* 初始化数据后，但是还未渲染DOM时。
*/
componentWillMount() {
console.log('componentWillMount')
}
/**
* @description: 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，
* 返回数据setState后组件会重新渲染
*/
componentDidMount() {
console.log('componentDidMount')
}
/**
* @description: 父组件改变后的props进行渲染
*/
componentWillReceiveProps(newProps:IProps) {
console.log('componentWillReceiveProps'+newProps)
}
/**
* @description: 主要用于性能优化(部分更新) return false可以阻止组件的更新
*/
shouldComponentUpdate(newProps:IProps, newState:IState) {
console.log('shouldComponentUpdate')
return true;
}
/**
* @description: shouldComponentUpdate返回true 组件进入重新渲染的流程
*/
componentWillUpdate(newProps:IProps, newState:IState) {
console.log('componentWillUpdate')
}
/**
* @description: react只会在第一次初始化成功会进入componentDidmount,
* 之后每次重新渲染后都会进入这个生命周期
*/
componentDidUpdate(newProps:IProps, newState:IState) {
console.log('componentDidUpdate')
}
/**
* @description: 清除 setTimeout,setInterval 和一些监听事件 removeEventListener
*/
componentWillUnmount() {
console.log('componentWillUnmount')
}
public onClickColorPublic = (ev: React.MouseEvent<HTMLButtonElement>) => {
const { color } = this.state;
if (color === "red") {
this.setState({
color: "blueviolet"
});
}
if (color === "blueviolet") {
this.setState({
color: "red"
});
}
}
onClickColor = () => {
console.log('onClickColor')
}
public render(){
const { name } = this.props;
const { color } = this.state;
return (
<div>
HelloWord<span onClick={this.onClickColorPublic} className={styles.parent} style={{ color }}>{ name }</span>
</div>
);
}
}
export default Template;
04.function类型的tsx
import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';
import classNames from 'classnames';
// classNames({ name: true, name2: false }) ==> 'name'
import config from './config';
export type IProps = {
value?: string;
};
const TemplateHook: React.FC<IProps> = (props) => {
/**
* @description: 创建ref对象
*/
const divRef = useRef(null);
/**
* @description: 创建这个变量,并可以重新设置
*/
const [count, setCount] = useState(0);
/**
* @description: 生命周期 componentDidMonut
*/
useEffect(() => {
console.log(`componentDidMonut---${count}`);
return () => {
// 相当于 componentWillUnmount
console.log(`componentWillUnmount---${count}`);
};
}, []);
/**
* @description: 生命周期 componentDidUpdate and componentDidMonut
*/
useEffect(() => {
console.log(`componentDidUpdate---${count}`);
console.log(divRef);
});
/**
* @description: 修改count变量
* @param {array} array test variable
* @return {undefined}
*/
const onChange = (array = []) => {
setCount(count + 1);
};
const { name = '' } = props;
return (
<div ref={divRef} className={styles.parent}>
<span
onClick={() => {
onChange();
}}
>
Hello World
{name}
</span>
</div>
);
}
export default TemplateHook;
