shadcn-ui-expansions项目中Creatable选择器性能优化实践

问题现象分析

在使用shadcn-ui-expansions项目的Creatable选择器组件时，开发者发现当输入较长字符串（约45个字符以上）时，浏览器标签页会出现明显的卡顿甚至完全冻结的情况。这个问题在Chromium和Firefox浏览器上都能复现，通过性能分析工具可以观察到存在递归调用导致的性能问题。

问题根源探究

经过深入排查，发现该性能问题与底层使用的cmdk组件有关。Creatable选择器在实现动态创建选项功能时，如果没有提供自定义的过滤函数，cmdk会使用其默认的过滤机制，这个机制在处理长字符串时效率低下，导致了浏览器渲染线程的阻塞。

解决方案实现

方案一：修改组件源码

在MultipleSelector组件的Command组件中添加自定义filter属性：

filter={(value, search) => {
  return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
}}

这种修改直接解决了性能问题，因为自定义的过滤函数比cmdk默认的实现更加高效。

方案二：通过props传递过滤函数

如果不方便修改源码，也可以通过组件的commandProps属性传递过滤函数：

commandProps={{
  filter: (value, search) => {
    return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
  },
}}

注意事项与边界情况

虽然上述解决方案有效解决了性能问题，但开发者需要注意一个边界情况：当输入字符串末尾包含空格时，Creatable选项可能会消失。这是因为cmdk内部对value值进行了trim()处理，导致包含空格的搜索条件无法匹配。

例如：

• 输入"Hello "（末尾有空格）会导致CreatableItem消失
• 输入"Hello my friend"（中间有空格）则工作正常

最佳实践建议

1. 性能优化：对于需要处理用户自由输入的Creatable组件，务必提供自定义的过滤函数以避免性能问题。

2. 用户体验：考虑在UI中添加提示，告知用户输入中末尾空格可能导致选项消失的问题，或者在前端逻辑中自动处理末尾空格。

3. 组件封装：如果项目中有多处使用Creatable选择器，建议创建一个高阶组件或自定义hook来统一处理这些边界情况和性能优化。

总结

通过分析shadcn-ui-expansions项目中Creatable选择器的性能问题，我们不仅找到了解决方案，还深入理解了cmdk组件的工作机制。这类问题的解决思路可以推广到其他基于cmdk的组件开发中，特别是在需要处理用户自由输入的场景下，自定义过滤逻辑往往是提升性能的关键。