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 类似，但在浏览器布局和绘制阶段之后同步执行。这确保缩放比例计算完成后再进行缩放，避免闪烁。
修改后的代码：
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 自动缩放组件动画闪烁的问题，确保动画平滑过渡。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
