使用Tailwind CSS时，React className换行的最低性能损耗方案探讨

问题 #

在使用Tailwind CSS时，如何在className属性中换行更为合适？以下示例中哪种方案的性能损耗最小？若采用示例B的数组结合join方法（无动态值），React会在每次渲染时调用join方法，还是TypeScript会将其转译为静态字符串？

示例A：字符串拼接换行 #

export function ExampleA() {
    return (
        <button className={
            'border border-solid border-[#00000026] ' +
            'px-5 py-3 rounded hover:bg-black/10 ' +
            'transition-colors duration-300 ease-out'
        }>
            Sample
        </button>
    );
}

示例B：数组join换行 #

export function ExampleB() {
    return (
        <button className={[
            'border border-solid border-[#00000026]',
            'px-5 py-3 rounded hover:bg-black/10',
            'transition-colors duration-300 ease-out'
        ].join(' ')}>
            Sample
        </button>
    );
}

示例C：使用clsx库换行 #

import clsx from 'clsx';

export function ExampleC() {
    return (
        <button className={clsx(
            'border border-solid border-[#00000026]',
            'px-5 py-3 rounded hover:bg-black/10',
            'transition-colors duration-300 ease-out',
        )}>
            Sample
        </button>
    );
}

一、className换行的合适方式 #

三种方案都能实现类名换行，从可读性和维护性角度的推荐优先级：

• 示例C：clsx是专门处理类名的工具库，不仅支持静态类名换行，后续添加动态类名（如根据状态切换类）时无需修改写法，是工程化项目的最优选择。
• 示例B：数组+join的方式无需手动添加空格，每行对应一组相关类名，结构清晰，维护成本低，适合不需要动态类名的简单场景。
• 示例A：字符串拼接需要手动在每行末尾加空格，容易因漏加导致类名合并错误，可读性和维护性最差，不推荐。

二、性能损耗对比 #

从运行时开销来看：

1. 示例A：静态字符串拼接在编译阶段会被直接合并为单一字符串，组件渲染时无任何额外执行步骤，性能最优。
2. 示例B：每次组件渲染时都会创建新数组并调用join方法，虽然这个开销极小（几乎可以忽略），但相比静态字符串仍有额外执行步骤。
3. 示例C：调用clsx函数会有函数调用的开销，但clsx内部针对静态类名做了优化，最终会直接拼接字符串，性能损耗几乎可以忽略，但略逊于前两者。

实际项目中，三者的性能差异不会对页面产生任何影响，选择时优先考虑可读性和可维护性即可。

三、关于示例B的编译疑问 #

TypeScript/JavaScript编译器不会将数组join的调用转译为静态字符串——即使数组元素都是静态值，这段代码在每次组件渲染时都会执行：创建新的数组实例，调用join方法生成最终字符串。

如果想让类名成为静态值，可以将数组join的结果提取到组件外部定义：

const buttonClass = [
    'border border-solid border-[#00000026]',
    'px-5 py-3 rounded hover:bg-black/10',
    'transition-colors duration-300 ease-out'
].join(' ');

export function ExampleB() {
    return (
        <button className={buttonClass}>
            Sample
        </button>
    );
}

这种情况下，buttonClass会在代码加载时就计算为静态字符串，组件渲染时直接复用，无额外开销。

内容的提问来源于stack exchange，提问作者Gabriel Martins