How to use the react.PureComponent function in react

/* Copyright (c) 2019, UW Medicine Research IT, University of Washington
 * Developed by Nic Dobbins and Cliff Spital, CRIO Sean Mooney
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */ 

import React from 'react';
import './Footer.css';

interface Props {}

export default class LeftFooter extends React.PureComponent {

    public render() {
        const c = 'footer';

        return (
            <div>
                <p>
                    <span>Developed with ❤️ in Seattle by </span> 
                    <a href="https://github.com/ndobb">Nic Dobbins</a>
                    <span> and </span>
                    <a href="https://github.com/cspital">Cliff Spital</a>
                    <span> of </span>
                    <a href="https://github.com/UW-Medicine-Research-IT">UW Medicine Research IT</a>
                </p>
            </div>
        );

fontWeight: 'bold',
    fontSize: 24,
  },
  published: {
    marginTop: 15,
    fontSize: 12,
    color: Colors.grey600,
  },
  buttonWrapper: {
    position: 'absolute',
    bottom: 0,
  },
});

/* eslint camelcase: 0 */
class Comic extends React.PureComponent {
  constructor() {
    super();

    this.state = {
      loading: true,
      pageWidth: width,
    };
  }

  getNewDimensions = (event) => {
    this.setState({
      pageWidth: event.nativeEvent.layout.width,
    });
  }

  /* eslint class-methods-use-this: 0 */

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { I18N_LOCALE_LABELS, I18N_LOCALES } from 'libs/i18n';
import { withI18n } from 'react-i18next';
import Select from 'ui/components/input/Select';
import i18next from 'libs/i18next';
import { setLocale } from 'actions/settings';

import Button from 'ui/components/Button';

/**
 * Interface locale selection component
 */
class LanguageSelect extends React.PureComponent {
    static propTypes = {
        /** @ignore */
        locale: PropTypes.string,
        /** @ignore */
        setLocale: PropTypes.func.isRequired,
        /** @ignore */
        t: PropTypes.func.isRequired,
    };

    state = {
        selection: null,
    };

    changeLocale = (e) => {
        e.preventDefault();

/**
 * Container for buttons displayed at the bottom of a form.
 *
 * Example:
 *
 * 
 *   
 *     <button>Save</button>
 *   
 *   
 *     <button>Delete</button>
 *   
 * 
 */
export default class FormActions extends React.PureComponent {
  /**
   * Container for the primary actions (floated to the right).
   */
  static Primary = class Primary extends React.PureComponent {
    static propTypes = {
      children: PropTypes.node,
    };

    static defaultProps = {
      children: null,
    };

    render() {
      const { children } = this.props;
      return <div>{children}</div>;
    }

private onAnchorClick: React.MouseEventHandler = e => {
        if (this.props.onSelect) {
            this.props.onSelect()
        }
    }

    private onAnchorKeyPress: React.KeyboardEventHandler = e => {
        if (isSelectKeyPress(e)) {
            if (this.props.onSelect) {
                this.props.onSelect()
            }
        }
    }
}

export class ContributedActionItem extends React.PureComponent {
    public state: State = { actionOrError: null }

    private commandExecutions = new Subject()
    private subscriptions = new Subscription()

    public componentDidMount(): void {
        this.subscriptions.add(
            this.commandExecutions
                .pipe(
                    mergeMap(params =>
                        from(this.props.cxpController.registries.commands.executeCommand(params)).pipe(
                            mapTo(null),
                            catchError(error => [asError(error)]),
                            map(c => ({ actionOrError: c })),
                            startWith>({ actionOrError: LOADING })
                        )

import Link from "umi/link";
import { Icon } from "antd";
import GlobalFooter from "@/components/globalFooter";
import styles from "./userLayout.less";
import logo from "@/assets/images/loginLogo.png";

const links = [
];

const copyright = (
    
        Copyright  FaShop 商城系统 - Power By FaShop ( www.fashop.cn )
    
);

class UserLayout extends React.PureComponent {

    render() {
        const { children } = this.props;
        return (
            <div>
                <div>
                    <div>
                        <div>
                            
                                <img src="{logo}" alt="logo">
                            
                        </div>
                    </div>
                    {children}
                </div>
                </div>

import { Errors } from './errors.component';
import { SideEffectHint, TreeShakeHint } from './hints/hints.component';
import { BasePanel } from './panels/base-panel.component';
import { BooleanPanel } from './panels/boolean-panel.component';
import { CounterPanel } from './panels/counter-panel.component';
import { Placeholder } from './placeholder.component';
import { IndefiniteProgressBar } from './progress-bar.component';
import { color } from './util';

interface IProps {
  name: string;
  stats: Retrieval;
  retrieve(name: string): void;
}

class BundlephobiaStatsComponent extends React.PureComponent {
  public componentDidMount() {
    if (shouldAttempt(this.props.stats)) {
      this.props.retrieve(this.props.name);
    }
  }
  public componentDidUpdate(prevProps: IProps) {
    if (this.props.name !== prevProps.name && shouldAttempt(this.props.stats)) {
      this.props.retrieve(this.props.name);
    }
  }

  public render() {
    const stats = this.props.stats;

    switch (stats.state) {
      case RetrievalState.Errored:

import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
import { getDelivery } from '../../../api/webhooks';
import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
import DeliveryItem from './DeliveryItem';

interface Props {
  delivery: T.WebhookDelivery;
}

interface State {
  loading: boolean;
  open: boolean;
  payload?: string;
}

export default class DeliveryAccordion extends React.PureComponent {
  mounted = false;
  state: State = { loading: false, open: false };

  componentDidMount() {
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  fetchPayload = ({ delivery } = this.props) => {
    this.setState({ loading: true });
    return getDelivery({ deliveryId: delivery.id }).then(
      ({ delivery }) => {
        if (this.mounted) {

/*::
type Props = {
  analysis: Analysis,
  deleteAnalysis: (analysis: string) => Promise<*>,
  onClose: () => void;
};
*/

/*::
type State = {
  processing: boolean
};
*/

export default class RemoveAnalysisForm extends React.PureComponent {
  /*:: mounted: boolean; */
  /*:: props: Props; */
  state /*: State */ = {
    processing: false
  };

  componentDidMount() {
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  stopProcessing = () => {
    if (this.mounted) {

import { Button, Popover, Icon } from 'antd';
import { fromJS, List } from 'immutable';
import autobind from 'autobind-decorator';
import React from 'react';
import PropTypes from 'prop-types';

import ShieldIdenticon from 'console/components/common/ShieldIdenticon';

@autobind
class IdenticonField extends React.PureComponent {
  static propTypes = {
    disabled: PropTypes.bool,
    onChange: PropTypes.func,
    value: PropTypes.any,
  };

  static defaultProps = {
    disabled: false,
  };

  static generateSeed() {
    return `v1:${Math.random()
      .toString(36)
      .substr(2)}`;
  }