🐛: useVirtualList flicker

[kaitoukid-1412]

screen-capture.webm

[luo3house]

#2040
#2033
#1940

[crazylxr]

v3.7.5 已修复

[xiangdongbu]

v3.7.5 已修复

使用 3.7.8 的版本 依然会有滑动过程中闪烁的问题

[liuyib]

使用 3.7.8 的版本 依然会有滑动过程中闪烁的问题

是必现的吗？麻烦来个可复现的在线 demo，感谢 @xiangdongbu

[xiangdongbu]

使用 3.7.8 的版本 依然会有滑动过程中闪烁的问题

是必现的吗？麻烦来个可复现的在线 demo，感谢 @xiangdongbu

是必现的，比如list里的每一条都可以点击展开 默认是全部收起的，但是我点击了某一条后，这一条会展开 这一条的总高度也会变高，这时候再去滑动 ，会影响后面。

[liuyib]

比如list里的每一条都可以点击展开 默认是全部收起的

是像 antd Collapse 组件这样折叠展开吗？可否来个在线 demo？

[xiangdongbu]

比如list里的每一条都可以点击展开 默认是全部收起的

是像 antd Collapse 组件这样折叠展开吗？可否来个在线 demo？

是的 跟antd Collapse 组件 一样

[xiangdongbu]

比如list里的每一条都可以点击展开 默认是全部收起的

是像 antd Collapse 组件这样折叠展开吗？可否来个在线 demo？

demo
有两个问题：

1. 展开以后，往下滑动的时候，会出现跳动；
2. 展开以后，展开状态会丢失，比如第一个展开 往下滑动，等再次划回来的时候，已经是收起的状态。

[luo3house]

钩子会把窗口+缓存范围以外的 Item 卸载。由于 demo 给出 itemHeight 是固定的，钩子不会知道 Item 改变了高度，Item 卸载时就会跳

尝试基于 index 计算动态高度：

hooks/packages/hooks/src/useVirtualList/demo/demo2.tsx

Lines 20 to 25 in 6579130

	const [list, scrollTo] = useVirtualList(originalList, {
	containerTarget: containerRef,
	wrapperTarget: wrapperRef,
	itemHeight: (i) => (i % 2 === 0 ? 42 + 8 : 84 + 8),
	overscan: 10,
	});

[liuyib]

demo 有两个问题：

1. 展开以后，往下滑动的时候，会出现跳动；
2. 展开以后，展开状态会丢失，比如第一个展开 往下滑动，等再次划回来的时候，已经是收起的状态。

useVirtualList 并不会真的渲染所有 N 个项，而是复用 DOM。前面展开的项，其 DOM 会被后面的项复用，复用其实就是重新计算为新的项，旧的展开状态自然就没了，所以没法做到第二点。

第一点，我这里看你给的在线 demo，没复现。

@luo3house 的思路应该可以解决第一点，试试呢 @xiangdongbu

钩子会把窗口+缓存范围以外的 Item 卸载。由于 demo 给出 itemHeight 是固定的，钩子不会知道 Item 改变了高度，Item 卸载时就会跳

尝试基于 index 计算动态高度：

hooks/packages/hooks/src/useVirtualList/demo/demo2.tsx

Lines 20 to 25 in 6579130

	const [list, scrollTo] = useVirtualList(originalList, {
	containerTarget: containerRef,
	wrapperTarget: wrapperRef,
	itemHeight: (i) => (i % 2 === 0 ? 42 + 8 : 84 + 8),
	overscan: 10,
	});

[liuyib]

2. 展开以后，展开状态会丢失，比如第一个展开 往下滑动，等再次划回来的时候，已经是收起的状态。

@xiangdongbu 我写了个 demo，自己缓存状态，可以解决第二点状态被重置的问题：
https://codesandbox.io/s/ahooks-issue-2049-d6w6cz?file=/App.tsx

1. 展开以后，往下滑动的时候，会出现跳动；

第一点我怎么都复现不了，来个复现的录屏看下呢 @xiangdongbu

[xiangdongbu]

2. 展开以后，展开状态会丢失，比如第一个展开 往下滑动，等再次划回来的时候，已经是收起的状态。

@xiangdongbu 我写了个 demo，自己缓存状态，可以解决第二点状态被重置的问题： https://codesandbox.io/s/ahooks-issue-2049-d6w6cz?file=/App.tsx

1. 展开以后，往下滑动的时候，会出现跳动；

第一点我怎么都复现不了，来个复现的录屏看下呢 @xiangdongbu

好的 👌🏻