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 之前计算文本缩放比例，从而消除了动画闪烁问题。
以上就是React自动调整文本大小组件如何避免动画闪烁？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
594
收藏
