memo作用

最新推荐文章于 2025-09-05 10:43:37 发布

原创最新推荐文章于 2025-09-05 10:43:37 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #hooks

React 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用React的memo高阶组件来优化DoubleButton组件，确保在props不变时避免重复渲染，提高性能。通过实例展示了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: "右按钮",
};