tdesign-react
tdesign-react copied to clipboard
[Cascader] filter 添加 debounce 无效, Selector 和 Cascader 默认 filterable 大小写敏感策略不一致
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,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。
♥️ 有劳 @pengYYYYY 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @DevQiao 。
作为组件库来说,传入参数不应该去限制你传入的默认行为,不过如果确实有广泛的需求,或许回头可以考虑提供一个参数出来。
但是实际上在这一块来说,你应该正确的在 react 中进行 debounce,在你的示例中,你并没有正确的进行效率优化,你需要使用合适的与 react 结合的 hook 来对数据进行优化,你可以参考该 hook/use-debounced-value 来优化你的代码。