preface

React template file, which needs to be copied each time the component is written

01. JSX of class type

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';
/** * template component *@description Template component *@class Persion
 * @extends {Component}
 * @author: * * /
class Template extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  / * * *@description: It is more used in server-side rendering. It represents the process after the component has undergone constructor() * initialization of data, but has not yet rendered the DOM. * /
  componentWillMount() {}

  / * * *@descriptionWhen the component is rendered for the first time and the DOM node has been generated, you can call the Ajax request from here and the component will be rendered again after the setState data is returned
  componentDidMount() {}

  / * * *@descriptionRender the props after the parent component changes
  componentWillReceiveProps(newProps) {}

  / * * *@description: mainly used for performance tuning (partial updates) return false Prevents component updates */
  shouldComponentUpdate(newProps, newState) {
    return true;
  }

  / * * *@descriptionShouldComponentUpdate returns true for the component to enter the re-rendering process */
  componentWillUpdate(newProps, newState) {}

  / * * *@descriptionReact will only enter componentDidmount after the first successful initialization, and will enter this life cycle after each subsequent re-rendering
  componentDidUpdate(newProps, newState) {}

  / * * *@descriptionRemoveEventListener */ clears setTimeout,setInterval, and some listener events
  componentWillUnmount() {}

  / * * *@description: temporary event *@param {string} The name name *@return {undefined}* /
  handleTempEvent = (name = ' ') = > {
    console.log(name);
    this.props.optionalFunc();
  };

  / * * *@description: temporary event *@param {string} The name name *@return {undefined}* /
  onEvent = (name = ' ') = > {
    this.props.optionalFunc();
  };

  / * * *@description: temporary event *@param {string} The name name *@return {undefined}* /
  getEvent = (name = ' ') = > {
    this.props.optionalFunc();
  };

  / * * *@description: temporary event *@param {string} The name name *@return {undefined}* /
  renderEvent = (name = ' ') = > {
    this.props.optionalFunc();
  };

  render() {
    return (
      <div className={styles.parent}>
        <span onClick={this.handleTempEvent}>Hello World</span>
      </div>); }}// When setting propTypes defaultProps both outside and inside the component, the external is used
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,
  /** * event callback */
  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;

Copy the code

02. Function type 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: Creates the ref object */
  const divRef = useRef(null);

  / * * *@description: Creates this variable and can be reset */
  const [count, setCount] = useState(0);

  / * * *@description: Life Cycle componentDidMonut */
  useEffect(() = > {
    console.log(`componentDidMonut---${count}`);
    return () = > {
      // equivalent to componentWillUnmount
      console.log(`componentWillUnmount---${count}`); }; } []);/ * * *@descriptionComponentDidUpdate and componentDidMonut */
  useEffect(() = > {
    console.log(`componentDidUpdate---${count}`);
    console.log(divRef);
  });

  / * * *@description: Modify the count variable *@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>
  );
}

// When setting propTypes defaultProps both outside and inside the component, the external is used
TemplateHook.propTypes = {
  /** * name */
  name: PropTypes.string,
};

TemplateHook.defaultProps = {
  name: ' '};export default TemplateHook;

Copy the code

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';
/** * template component *@description Template component *@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: It is more used in server-side rendering. It represents the process after the component has undergone constructor() * initialization of data, but has not yet rendered the DOM. * /
  componentWillMount() {
    console.log('componentWillMount')}/ * * *@descriptionWhen the component is rendered for the first time and the DOM node has been generated, you can call the Ajax request from here and the component will be rendered again after the setState data is returned
  componentDidMount() {
    console.log('componentDidMount')}/ * * *@descriptionRender the props after the parent component changes
  componentWillReceiveProps(newProps:IProps) {
    console.log('componentWillReceiveProps'+newProps)
  }

  / * * *@description: mainly used for performance tuning (partial updates) return false Prevents component updates */
  shouldComponentUpdate(newProps:IProps, newState:IState) {
    console.log('shouldComponentUpdate')
    return true;
  }

  / * * *@descriptionShouldComponentUpdate returns true for the component to enter the re-rendering process */
  componentWillUpdate(newProps:IProps, newState:IState) {
    console.log('componentWillUpdate')}/ * * *@descriptionReact will only enter componentDidmount after the first successful initialization, and will enter this life cycle after each subsequent re-rendering
  componentDidUpdate(newProps:IProps, newState:IState) {
    console.log('componentDidUpdate')}/ * * *@descriptionRemoveEventListener */ clears setTimeout,setInterval, and some listener events
  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;

Copy the code

04. Function type 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';
exporttype IProps = { value? : string; };const TemplateHook: React.FC<IProps> = (props) = > {
 / * * *@description: Creates the ref object */
  const divRef = useRef(null);

  / * * *@description: Creates this variable and can be reset */
  const [count, setCount] = useState(0);

  / * * *@description: Life Cycle componentDidMonut */
  useEffect(() = > {
    console.log(`componentDidMonut---${count}`);
    return () = > {
      // equivalent to componentWillUnmount
      console.log(`componentWillUnmount---${count}`); }; } []);/ * * *@descriptionComponentDidUpdate and componentDidMonut */
  useEffect(() = > {
    console.log(`componentDidUpdate---${count}`);
    console.log(divRef);
  });

  / * * *@description: Modify the count variable *@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;


Copy the code