React 自动缩放组件动画闪烁：如何用useLayoutEffect解决？-js教程-PHP中文网

React 自动缩放组件动画闪烁：如何用useLayoutEffect解决？

聖光之護

发布： 2025-03-19 11:00:11

原创

565人浏览过

react 自动缩放组件动画闪烁：如何用uselayouteffect解决？

React 自动缩放组件动画闪烁问题及 useLayoutEffect 解决方法

在 React 开发中，动态调整组件大小以适应内容的情况很常见。本文将解决一个基于文本长度自动缩放的 React 组件动画闪烁问题。

原代码使用 useEffect hook 根据文本变化调整缩放比例。然而，useEffect 异步执行，导致缩放动画过程中，组件可能先渲染未缩放状态，再缩放，造成闪烁。

问题代码示例：

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);

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

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

    const availableWidth = parentNodeOffsetWidth.current - 32;
    const actualWidth = node.offsetWidth;
    const actualScale = availableWidth / actualWidth;
    if (scale !== actualScale) {
      // ...缩放逻辑...
    }
  }, [text]);

  return (
    <div ref={nodeRef} style={{ transform: `scale(${scale})` }}>
      {text}
    </div>
  );
};

export default AutoScalingText;

登录后复制

解决方案：使用 useLayoutEffect

useLayoutEffect 与 useEffect 类似，但在浏览器布局和绘制阶段之后同步执行。这确保缩放比例计算完成后再进行缩放，避免闪烁。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

修改后的代码：

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

  const availableWidth = parentNodeOffsetWidth.current - 32;
  const actualWidth = node.offsetWidth;
  const actualScale = availableWidth / actualWidth;
  if (scale !== actualScale) {
    // ...缩放逻辑...
  }
}, [text]);

登录后复制

通过将 useEffect 替换为 useLayoutEffect，可以有效消除或减少自动缩放组件的动画闪烁，使动画更流畅自然。注意，parentNodeOffsetWidth 的获取应在组件挂载后完成，避免获取错误值。

使用 useLayoutEffect 有效解决了 React 自动缩放组件动画闪烁的问题，确保动画平滑过渡。

以上就是React 自动缩放组件动画闪烁：如何用useLayoutEffect解决？的详细内容，更多请关注php中文网其它相关文章！