tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

[Cascader] filter 添加 debounce 无效, Selector 和 Cascader 默认 filterable 大小写敏感策略不一致

Open DevQiao opened this issue 1 year ago • 3 comments

tdesign-react 版本

1.4.3

重现链接

https://stackblitz.com/edit/react-2k2pce?file=src%2Fdemo.jsx,package.json

重现步骤

链接中: case 1 & case 2: selector 默认 filterable 大小写不敏感,cascader 默认 filterable 大小写敏感,未统一 case 3:自定义filter,得到了预期的筛选结果,但是没有高亮显示筛选结果项 case 4:试图优化性能,添加防抖函数,filter 结果失效

filter 回调函数中打 log,发现 filter 会针对每一条数据进行调用,如果有大量数据(如几千个),该回调函数会再每次输入变化时,都调用数次(几千次),感觉这里缺乏性能考量

期望结果

  • 统一 selector 和 cascader 的 filterable 的大小写敏感与否的行为
  • 优化 filter 调用策略,支持 debounce,可否再输入最后一次,针对现有数据调用一次 filter,而不是每输入一次都立马调用多次

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

对组件提供 options 时,做筛选时的性能考量

DevQiao avatar Jan 09 '24 10:01 DevQiao

👋 @DevQiao,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Jan 09 '24 10:01 github-actions[bot]

♥️ 有劳 @pengYYYYY 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @DevQiao 。

github-actions[bot] avatar Jan 09 '24 10:01 github-actions[bot]

作为组件库来说,传入参数不应该去限制你传入的默认行为,不过如果确实有广泛的需求,或许回头可以考虑提供一个参数出来。

但是实际上在这一块来说,你应该正确的在 react 中进行 debounce,在你的示例中,你并没有正确的进行效率优化,你需要使用合适的与 react 结合的 hook 来对数据进行优化,你可以参考该 hook/use-debounced-value 来优化你的代码。

NWYLZW avatar Jan 09 '24 11:01 NWYLZW