react hook: useLayoutEffect

useLayoutEffect 可能会影响性能。尽可能使用 useEffect。(由于 useLayoutEffect 它会在浏览器更新布局之前同步执行。 在执行时会阻塞浏览器更新,因此需要谨慎使用)
useLayoutEffect 是 useEffect 的一个版本,在浏览器重新绘制屏幕之前触发。

在浏览器重新绘制屏幕前计算布局

大多数组件不需要依靠它们在屏幕上的位置和大小来决定渲染什么。他们只返回一些 JSX,然后浏览器计算他们的 布局(位置和大小)并重新绘制屏幕。

有时候,这还不够。想象一下悬停时出现在某个元素旁边的 tooltip。如果有足够的空间,tooltip 应该出现在元素的上方,但是如果不合适,它应该出现在下面。为了让 tooltip 渲染在最终正确的位置,你需要知道它的高度(即它是否适合放在顶部)。

要做到这一点,你需要分两步渲染:

将 tooltip 渲染到任何地方(即使位置不对)。

测量它的高度并决定放置 tooltip 的位置。

把 tooltip 渲染放在正确的位置。

所有这些都需要在浏览器重新绘制屏幕之前完成。你不希望用户看到 tooltip 在移动。调用 useLayoutEffect 在浏览器重新绘制屏幕之前执行布局测量:

javascript 复制代码
function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0); // 你还不知道真正的高度

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height); // 现在重新渲染,你知道了真实的高度
  }, []);

  // ... 在下方的渲染逻辑中使用 tooltipHeight ...
}

如果你使用的是速度较慢的设备,你可能注意到有时 tooltip 会"闪烁",并且会在更正位置之前短暂地看到初始位置。

相关推荐
小白菜学前端4 分钟前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿5 分钟前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL6 分钟前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉6 分钟前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~9 分钟前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng11 分钟前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript
matlab的学徒14 分钟前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
路人与大师21 分钟前
【Mermaid.js】从入门到精通:完美处理节点中的空格、括号和特殊字符
开发语言·javascript·信息可视化
从零开始学习人工智能1 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
虫虫rankourin1 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js