React 中，一个根据文本量自动放缩的组件，怎么减少动画闪烁？

Question

React 中，一个根据文本量自动放缩的组件，怎么减少动画闪烁？

import { useState, useEffect, useRef, FC } from 'react';

const AutoScalingText: FC<{ text: string }> = ({ text }) => {
  const [scale, setScale] = useState(1);
  const nodeRef = useRef<HTMLDivElement>(null);
  const parentNodeOffsetWidth = useRef<number>(0); //全局变量，免得每次都重新计算parentNodeOffsetWidth

  useEffect(() => {
    parentNodeOffsetWidth.current = (
      nodeRef.current!.parentNode as HTMLElement
    ).offsetWidth;
  }, []);

  useEffect(() => {
    const node = nodeRef.current;
    if (!node) return;

    // 每次text变化时，根据文本长度设定scale 范围
    const availableWidth = parentNodeOffsetWidth.current - 32;
    const actualWidth = node.offsetWidth;
    const actualScale = availableWidth / actualWidth;
    if (scale !== actualScale) {
      if (actualScale < 1) {
        setScale(actualScale);
      } else if (scale < 1) {
        setScale(1);
      }
    }
  }, [text]);

  return (
    <div
      className='auto-scaling-text'
      style={{ transform: `scale(${scale},${scale})` }}
      ref={nodeRef}
    >
      {text}
    </div>
  );
};

export default AutoScalingText;

求求了！
在线demo，可能在审核中：https://inscode.csdn.net/@weixin_41983540/React-TypeScript-Te...

Answer 1

useLayoutEffect(() => {
  const node = nodeRef.current;
  if (!node) return;

  // 每次text变化时，根据文本长度设定scale 范围
  const availableWidth = parentNodeOffsetWidth.current - 32;
  const actualWidth = node.offsetWidth;
  const actualScale = availableWidth / actualWidth;
  if (scale !== actualScale) {
    if (actualScale < 1) {
      setScale(actualScale);
    } else if (scale < 1) {
      setScale(1);
    }
  }
}, [text]);

将 useEffect 换成 useLayoutEffect 在渲染前计算完就行了。

Answer 2

加 transition 过渡效果。