memo作用

封装组件使用memo 包裹之后不会重复渲染

import React, { memo } from "react";
import PropTypes from "prop-types";
import styles from "./doubleButton.module.less";
const DoubleButton = memo((props) => {
 console.log(111); //这里只会渲染一次
  const { leftText, rightText } = props;
  const leftClick = () => {
    props.leftClick();
  };
  const rightClick = () => {
    props.rightClick();
  };
  return (
    <div className={styles.footerDoubleButton}>
      <button onClick={leftClick}>{leftText}</button>
      <button onClick={rightClick}>{rightText}</button>
    </div>
  );
});
export default DoubleButton;

DoubleButton.prototype = {
  leftText: PropTypes.string.isRequired,
  rightText: PropTypes.string.isRequired,
};
DoubleButton.defaultProps = {
  leftText: "左按钮",
  rightText: "右按钮",
};