Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: useScroller导致大量无效render #1621

Open
dislido opened this issue Feb 22, 2024 · 0 comments · May be fixed by #1622
Open

fix: useScroller导致大量无效render #1621

dislido opened this issue Feb 22, 2024 · 0 comments · May be fixed by #1622
Labels
bug Something isn't working

Comments

@dislido
Copy link

dislido commented Feb 22, 2024

描述Bug
页面中很多组件会在mousemove时进行render，但实际没有任何意义，影响性能

重现步骤
重现行为的步骤：

  1. 前往“...”
  2. 点击“...”
  3. 滚动到“...”
  4. 看到错误

期望行为
清晰简洁地描述您期望发生的情况。

屏幕截图
如果适用，添加屏幕截图以帮助说明您的问题。

电脑版（请填写以下信息）：

  • 版本号：[例如 v0.22]
  • 操作系统：[例如 iOS]
  • 浏览器：[例如 Chrome，Safari]

智能手机（请填写以下信息）：

  • 版本号：[例如 v0.22]
  • 设备：[例如 iPhone6]
  • 操作系统：[例如 iOS8.1]
  • 浏览器：[例如内置浏览器，Safari]

其他上下文

apitable/packages/datasheet/src/pc/components/gantt_view/hooks/use_scroller.ts

Lines 38 to 47 in 4392bce

export const useScroller = (props: IUseScrollerProps) => {
const {
containerRef,
gridHorizontalBarRef,
ganttHorizontalBarRef = { current: null },
verticalBarRef,
isCellScrolling,
cellVerticalBarRef,
pointAreaType = AreaType.Grid,
} = props;

useScroller为ganttHorizontalBarRef指定了默认值{ current: null }, 这样在没有传入ganttHorizontalBarRef时，每一次调用useScroller都是会是一个新的ganttHorizontalBarRef

apitable/packages/datasheet/src/pc/components/gantt_view/hooks/use_scroller.ts

Lines 69 to 82 in 4392bce

const scrollTo = useCallback(
({ scrollTop, scrollLeft }: IScrollCoordsProps, areaType: AreaType = AreaType.Grid) => {
if (verticalBarRef.current && scrollTop != null) {
verticalBarRef.current.scrollTop = scrollTop;
}
if (areaType === AreaType.Gantt && ganttHorizontalBarRef.current && scrollLeft != null) {
ganttHorizontalBarRef.current.scrollLeft = scrollLeft;
}
if (areaType === AreaType.Grid && gridHorizontalBarRef.current && scrollLeft != null) {
gridHorizontalBarRef.current.scrollLeft = scrollLeft;
}
},
[ganttHorizontalBarRef, gridHorizontalBarRef, verticalBarRef],
);

scrollTo依赖了ganttHorizontalBarRef,即每次scrollTo也是一个新的值

apitable/packages/datasheet/src/pc/components/gantt_view/hooks/use_scroller.ts

Lines 108 to 110 in 4392bce

return useMemo(() => {
return { scrollTo };
}, [scrollTo]);

返回的scrollTo每次也是新的，导致依赖此函数的整棵组件树会产生大量无用的更新
@dislido dislido added the bug Something isn't working label Feb 22, 2024
@dislido dislido linked a pull request Feb 22, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: useScroller performance dislido/apitable
1 participant
@dislido