react 中自动放缩文本组件:减少动画闪烁
在 react 中,我们经常需要创建一个根据文本长度自动调整大小的组件。然而,在文本发生变化时,组件调整大小的动画有时会出现闪烁问题。
一个减少动画闪烁的有效方法是使用 uselayouteffect 代替 useeffect。uselayouteffect 允许我们在浏览器进行 dom 更新之前运行我们的计算。相比之下,useeffect 会在 dom 更新之后运行。
在给定的示例中,可以通过将 useeffect 替换为 uselayouteffect 来修复动画闪烁问题。修改后的代码如下:
import { useState, useLayoutEffect, 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); useLayoutEffect(() => { const node = nodeRef.current; if (!node) return; // 省略与 useEffect 相同的其他代码 }, [text]); // 省略其余代码 };
通过使用 uselayouteffect,我们能够在浏览器更新 dom 之前计算文本缩放比例,从而消除了动画闪烁问题。