antd 的展开收起计算太耗时导致渲染卡顿, 可能是兼容的东西更多
https://github.com/bricksjs/ui/commit/3bb3d2bffb7dc27bd17dbd7b84d55835ac90ecef

结合 useResizeRect

  1. import React, { Fragment, useCallback, useEffect, useMemo, useState, useRef } from 'react';
  2. import { isEqual, isObject, toNumber } from 'lodash';
  3. import { Tooltip } from 'antd';
  4. import type { TooltipProps } from 'antd/lib/tooltip';
  5. import CopyOutlined from '@ant-design/icons/CopyOutlined';
  6. import CheckOutlined from '@ant-design/icons/CheckOutlined';
  7. import copy from 'copy-to-clipboard';
  8. import useResizeRect from '../hooks/useResizeRect';
  9. import useSetState from '../hooks/useSetState';
  10. import usePrevious from '../hooks/usePrevious';
  11. import HighLightWord from '../HighLightWord';
  12. import type { HighlightProps } from '../HighLightWord';
  13. import { getPrefixCls } from '../utils';
  15. import './index.less';
  17. /** 展开配置 */
  18. export type ExpandableType = {
  19.   /** 展开时节点 */
  20.   openText?: React.ReactNode;
  21.   /** 收起时节点 */
  22.   closeText?: React.ReactNode;
  23. };
  25. /** 复制操作 */
  26. interface CopyConfig {
  27.   text?: string;
  28.   onCopy?: () => void;
  29.   // icon?: React.ReactNode;
  30.   // tooltips?: boolean | React.ReactNode;
  31. }
  33. /** 记录当前文本 & 操作: 文本 ｜ 展开操作 | 后缀 | 复制 */
  34. type MapStateTypes = 'data' | 'action' | 'suffix' | 'copyable';
  36. export interface ExpandIProps {
  37.   className?: string;
  38.   style?: React.CSSProperties;
  39.   /** 展示仅支持字符串模式 */
  40.   data: string;
  41.   /** 后缀 */
  42.   suffix?: string | false;
  43.   high?: Omit<HighlightProps, 'text'>;
  44.   /** 复制操作 */
  45.   copyable?: boolean | CopyConfig;
  46.   /** Tooltip */
  47.   tip?: boolean | TooltipProps;
  48.   /** 是否可展开 */
  49.   expandable?: boolean | ExpandableType | ((opened: boolean) => string); // React.ReactNode 暂仅支持字符串
  50.   prefix?: string;
  51.   /** 多行 */
  52.   lines?: number;
  53.   /** 超过长度隐藏 */
  54.   count?: number;
  55.   /** 默认设置的 React 节点 */
  56.   renderContent?: (dom: string | JSX.Element, texts: string) => JSX.Element;
  57. }
  59. const DEFAULT_ACTION_TEXTS: ExpandableType = {
  60.   openText: '展开',
  61.   closeText: '收起',
  62. };
  64. /** 展开收起文案 */
  65. const getActionContent = (expandable: ExpandIProps['expandable'], open: boolean) => {
  66.   if (typeof expandable === 'boolean' && expandable) {
  67.     return open ? DEFAULT_ACTION_TEXTS.closeText : DEFAULT_ACTION_TEXTS.openText;
  68.   }
  70.   /** 自定义函数渲染 */
  71.   if (typeof expandable === 'function') {
  72.     return expandable(open);
  73.   }
  75.   if (isObject(expandable)) {
  76.     const actionTexts = { ...DEFAULT_ACTION_TEXTS, ...expandable };
  77.     return open ? actionTexts.closeText : actionTexts.openText;
  78.   }
  80.   return null;
  81. };
  83. const Expand = React.memo<ExpandIProps>(
  84.   (props) => {
  85.     const {
  86.       tip,
  87.       style,
  88.       high,
  89.       className,
  90.       data = '',
  91.       copyable,
  92.       lines = 1,
  93.       expandable = true,
  94.       suffix = '...',
  95.       renderContent,
  96.       prefix: customizePrefixCls,
  97.     } = props;
  98.     const prefixCls = getPrefixCls('expand', customizePrefixCls);
  100.     /** 默认为收起状态 */
  101.     const [map, setMap] = useState(
  102.       new Map<MapStateTypes, any>([
  103.         ['data', data],
  104.         ['action', null],
  105.         ['suffix', '...'],
  106.         ['copyable', null],
  107.       ]),
  108.     );
  109.     /** 控制文本长度 */
  110.     const [sizes, setSizes] = useSetState({
  111.       /** 允许显示文本的长度 */
  112.       allow: 0,
  113.       /** 文本总长度 */
  114.       total: 0,
  115.     });
  117.     const [texts, setTexts] = useState('');
  119.     /** 复制操作 */
  120.     const [copies, setCopies] = useSetState({
  121.       copied: false,
  122.       title: '复制',
  123.     });
  125.     /** 定时关闭复制操作 */
  126.     const copyRef = useRef<number>();
  128.     /** 是否有操作及后缀: 允许长度大于总长度时 不展示后缀 和操作 */
  129.     const allowActionAndSuffix = useMemo(() => sizes.allow > sizes.total, [JSON.stringify(sizes)]);
  130.     const [open, setOpen] = useState(false);
  131.     /** 指定外层容器 */
  132.     const [containerRef, rect] = useResizeRect<HTMLDivElement>();
  134.     /** 计算内容文本 */
  135.     useEffect(() => {
  136.       if (containerRef.current) {
  137.         const textLen = data.length;
  138.         const fontSize = toNumber(
  139.           window.getComputedStyle(containerRef.current).fontSize?.replace('px', ''),
  140.         );
  141.         const containerWidth = rect.width || containerRef.current.getBoundingClientRect().width;
  143.         /** 计算可容纳的字符长度 */
  144.         const allowSize = containerWidth / fontSize;
  145.         const lineSize = allowSize * lines;
  147.         setSizes({
  148.           allow: lineSize,
  149.           total: textLen,
  150.         });
  152.         /** 大于总长度时 直接显示文本 */
  153.         if (allowSize > textLen) {
  154.           setTexts(data);
  155.           return;
  156.         }
  158.         if (allowSize <= textLen && !open) {
  159.           const sliceText = data.slice(0, lineSize - 6);
  160.           setTexts(sliceText);
  161.         }
  162.       }
  163.     }, [containerRef, rect, data, lines]);
  165.     /** 更新操作文案 */
  166.     useEffect(() => {
  167.       /** 如果 false */
  168.       if (!expandable || allowActionAndSuffix) {
  169.         map.set('action', null);
  170.       } else {
  171.         const actiondom = (
  172.           <a
  173.             className={`${prefixCls}-action`}
  174.             onClick={() => {
  175.               setOpen((prevOpen) => !prevOpen);
  176.             }}
  177.           >
  178.             {getActionContent(expandable, open)}
  179.           </a>
  180.         );
  181.         map.set('action', actiondom);
  182.       }
  184.       setMap(new Map(map));
  185.     }, [open, setOpen, expandable, allowActionAndSuffix]);
  187.     const onCopy = useCallback(
  188.       (evt: any) => {
  189.         evt.preventDefault();
  190.         clearTimeout(copyRef.current);
  191.         const copyConfig: CopyConfig = {
  192.           ...(typeof copyable === 'object' ? copyable : null),
  193.         };
  195.         if (copyConfig.text === undefined) {
  196.           copyConfig.text = data ?? '';
  197.         }
  199.         const copied = copy(copyConfig.text ?? '');
  200.         setCopies({ copied });
  201.         /** 复制返回值 */
  202.         if (copied) {
  203.           copyConfig?.onCopy?.();
  204.         } else {
  205.           console.error('复制错了');
  206.         }
  208.         copyRef.current = window.setTimeout(() => {
  209.           setCopies({ copied: false });
  210.         }, 2000);
  211.       },
  212.       [map, data, setCopies],
  213.     );
  215.     useEffect(() => {
  216.       if (copyable) {
  217.         const copyCls = copies.copied
  218.           ? `${prefixCls}-copy-success ${prefixCls}-copy`
  219.           : `${prefixCls}-copy`;
  221.         map.set(
  222.           'copyable',
  223.           <Tooltip title={copies.copied ? '复制成功' : '复制'}>
  224.             <span className={copyCls} onClick={onCopy}>
  225.               {!copies.copied ? <CopyOutlined /> : <CheckOutlined />}
  226.             </span>
  227.           </Tooltip>,
  228.         );
  229.       } else {
  230.         map.set('copyable', null);
  231.       }
  233.       setMap(new Map(map));
  234.     }, [copyable, copies, prefixCls]);
  236.     /** 更新后缀 */
  237.     useEffect(() => {
  238.       map.set(
  239.         'suffix',
  240.         open || allowActionAndSuffix ? null : (
  241.           <span className={`${prefixCls}-suffix`}>{suffix}</span>
  242.         ),
  243.       );
  244.       setMap(new Map(map));
  245.     }, [allowActionAndSuffix, suffix, prefixCls, open]);
  247.     const prevTexts = usePrevious(texts);
  248.     useEffect(() => {
  249.       const getDataDom = (str: string) => {
  250.         const baseDom = isObject(high) ? <HighLightWord {...high} text={str} /> : str;
  252.         if (tip && !open) {
  253.           const tipConfig = isObject(tip) ? tip : {};
  254.           return (
  255.             <Tooltip
  256.               getPopupContainer={() => containerRef.current}
  257.               placement="topLeft"
  258.               title={data}
  259.               {...tipConfig}
  260.             >
  261.               <span>{baseDom}</span>
  262.             </Tooltip>
  263.           );
  264.         }
  266.         return baseDom;
  267.       };
  268.       const fillStr = open ? data : texts;
  269.       let dom = getDataDom(fillStr);
  270.       if (typeof renderContent === 'function') {
  271.         /** @todo: 若返回操作后的字符比原来的长， 其他操作将失效 */
  272.         dom = renderContent(dom, fillStr);
  273.       }
  275.       map.set('data', dom);
  277.       setMap(new Map(map));
  278.     }, [texts, prevTexts, open, data, tip, high, renderContent]);
  280.     useEffect(() => {
  281.       return () => {
  282.         clearTimeout(copyRef.current);
  283.       };
  284.     }, []);
  286.     const cls = useMemo(
  287.       () => (prefixCls ? prefixCls : `${prefixCls} ${className}`),
  288.       [className, prefixCls],
  289.     );
  291.     return (
  292.       <div ref={containerRef} style={style} className={cls} title={tip ? null : data}>
  293.         {Array.from(map).map(([key, value]) => {
  294.           return <Fragment key={key}>{value}</Fragment>;
  295.         })}
  296.       </div>
  297.     );
  298.   },
  299.   (prev, next) => isEqual(prev, next),
  300. );
  302. export default Expand;
@import '../style/themes/index.less';

@tsz-expand-prefix-cls: ~'@{tsz-prefix}-expand';
@tsz-expand-copy-prefix-cls: ~'@{tsz-expand-prefix-cls}-copy';

.@{tsz-expand-prefix-cls} {
  &-action {
    color: #1890ff;
    cursor: pointer;
  }

  .@{tsz-expand-copy-prefix-cls} {
    margin-left: 4px;
    color: #1890ff;
    cursor: pointer;
    &-success {
      color: #52c41a;
    }
  }
}

参考