无涯教程网

Reactjs 如何避免在 react useEffect 上滚动时出现小的延迟

发布于01月16日

我有一个组件，当overflow: scroll个父项的子项变大/缩小时，它会自动保持滚动位置.

保持滚动位置的代码运行良好.但是，因为我使用了useEffect来重新调整滚动位置.我注意到有一些延迟，导致滚动位置看起来像是故障(非常快速地向下滚动并返回到初始位置).

所以我认为这是因为Reaction将首先呈现组件，然后在useEffect中执行scllTop.

有什么办法可以避免这次延误吗？

或许这个问题可以简化为: 如何呈现具有初始滚动位置的Reaction组件？(不延迟或使用Effect？)

推荐答案

听起来您可能需要:useLayoutEffect，它在DOM更新后立即触发，但before the browser has had a chance to paint those changes:

UseLayoutEffect是useEffect的一个版本，在浏览器重新绘制屏幕.

另一方面，useEffect运行after the browser has painted，所以如果您在useEffect中有一些导致DOM更改的代码，您可能会注意到因此出现了一些闪烁.

Reactjs相关问答推荐

如何使用react-router-dom导航到网页中的其他路由？

父组件更新后不重新呈现子组件

CreateBrowserRouter将props 传递给父组件以验证权限

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件？

在动态React组件中删除事件侦听器

如何删除 bootstrap 手风琴上的边框

如何修复ReferenceError：在构建过程中未定义导航器

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

当`useSelector`回调中的属性值更新时，将会使用更新后的值吗？

如何在不重新加载页面的情况下加载新添加的数据？

如何避免在 react useEffect 上滚动时出现小的延迟？

React Native PermissionsAndroid 不包括 READ_MEDIA_IMAGES.如何解决这个问题？

useState 在生命周期中的位置

ReactJs 行和列

为什么我在此代码段中看不到 useEffect for count = 1？

如何根据react 中的 map 功能一次只打开一个弹出窗口？

找不到元素 - 这是参考问题吗？

单击当前子div时如何更改p标签的图像和样式？react

如何将本地视频文件上传到 Google Cloud

react-three-fiber 场景背景比原图更亮

实用课程推荐

相关教程推荐