perf(components): 优化 ScrollBar 组件性能

- 将 createMemo 改为 createEffect,减少不必要的计算
- 优化 thumbPos 计算逻辑,提高滚动性能
- 调整 setIsDragging 调用方式,确保正确更新状态
This commit is contained in:
Vixalie
2025-08-07 22:26:01 +08:00
parent b7f03197c7
commit d64a8758b4

View File

@@ -2,6 +2,7 @@ import cx from 'clsx';
import { clamp } from 'es-toolkit'; import { clamp } from 'es-toolkit';
import { import {
Component, Component,
createEffect,
createMemo, createMemo,
createSignal, createSignal,
JSX, JSX,
@@ -27,9 +28,9 @@ const ScrollBar: Component<ScrollBarProps> = (props) => {
const [thumbPos, setThumbPos] = createSignal(0); const [thumbPos, setThumbPos] = createSignal(0);
const [isDragging, setIsDragging] = createSignal(false); const [isDragging, setIsDragging] = createSignal(false);
const thumbPos = createMemo(() => { createEffect(() => {
if (props.scrollMax <= 0) { if (props.scrollMax <= 0) {
return 0; setThumbPos(0);
} }
const scrollPercent = props.scrollPos / props.scrollMax; const scrollPercent = props.scrollPos / props.scrollMax;
@@ -37,10 +38,11 @@ const ScrollBar: Component<ScrollBarProps> = (props) => {
const trackSize = props.axis === 'y' ? track.clientHeight : track.clientWidth; const trackSize = props.axis === 'y' ? track.clientHeight : track.clientWidth;
if (trackSize < thumbSize) { if (trackSize < thumbSize) {
return 0; setThumbPos(0);
} }
return scrollPercent * (trackSize - thumbSize); const pos = scrollPercent * (trackSize - thumbSize);
setThumbPos(pos);
}); });
const thumbStyle = createMemo(() => ({ const thumbStyle = createMemo(() => ({
[props.axis === 'y' ? 'top' : 'left']: `${thumbPos()}px`, [props.axis === 'y' ? 'top' : 'left']: `${thumbPos()}px`,