Hello! 欢迎来到小浪资源网!



React自动调整文本大小组件如何避免动画闪烁?


React自动调整文本大小组件如何避免动画闪烁?

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 之前计算文本缩放比例,从而消除了动画闪烁问题。

相关阅读