如果我放棄 React，那一定只有一個(gè)原因

2025-10-23 14:47:19

我研究了一下，看看能不能直接在 React 組件中直接使用 class，而不是 ??className??，這樣我的代碼演示不就對(duì)味兒了嗎？這一次，折騰了一會(huì)兒，我還真研究出來了！

React 有一個(gè)我忍了很久的痛點(diǎn)。如果有一天，我決定放棄 React 轉(zhuǎn)向其他的框架，那么一定是這個(gè)痛點(diǎn)我終于忍不了了。

這個(gè)痛點(diǎn)就是 className。

<div className='relative pt-16'></div>

特別是最近我正在寫一本關(guān)于 CSS 的專欄時(shí)，這個(gè)痛點(diǎn)已經(jīng)把我逼到了幾乎忍受不了的程度。

由于我的網(wǎng)站里，為了確保一致性、真實(shí)性、有效性，文章里的案例全部都是直接使用的內(nèi)嵌案例的真實(shí)代碼，但是網(wǎng)站是用 React 來寫的，因此能夠直接運(yùn)行的代碼也是 React 組件，展示出來的也就是 React 的代碼。

但是這本專欄是專門介紹 CSS 的，如果代碼中展示出來的是使用的 className，反正我不知道其他人是什么感受，我是越看越別扭，總感覺哪哪哪都不對(duì)勁。

所以我就想要研究一下，看看能不能直接在 React 組件中直接使用 class，而不是 className，這樣我的代碼演示不就對(duì)味兒了嗎？

這一次，折騰了一會(huì)兒，我還真研究出來了！

export default function Page() {
  return (
    <div class='relative pt-16'>
      <div class="fixed inset-0 -z-10">
        <div class="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px]"></div>
      </div>
      ...
    </div>
  )
}

我們先來了解一下 className 的歷史原因，以及使用 class 之后可能會(huì)存在的問題，最后再給大家介紹具體如何操作。

1.歷史原因

className 在 React 社區(qū)中爭(zhēng)議了很多年，但是在設(shè)計(jì)之初，據(jù)說是為了在 token 層面，與聲明類的關(guān)鍵字 class 區(qū)分開來，因此選擇了重命名為 className。

class MyComponent extends Component {
  // ...
}

不過除此之外，dan 在 github 中有提過另外一個(gè)理由。如下所示，在 JavaScript 中，給 DOM 設(shè)置屬性有兩種方式，一種是 property，另外一種 attribute。

node.value = 10; // setting a property
node.setAttribute('value', '10'); // setting an attribute

而 JSX 由于被約定為是 JS 語法的擴(kuò)展，因此，React 團(tuán)隊(duì)認(rèn)為使用 JS 默認(rèn)的 className 字段給 DOM 設(shè)置屬性比較合適。

node.className = ''  // 表現(xiàn)為 property，而非 attribute

2.爭(zhēng)議

盡管 dan 為此解釋了很多次，但許多 React 開發(fā)者并不為此買賬，在社區(qū)中強(qiáng)烈要求能夠在 JSX 中使用 class

并且在后續(xù)的更新中，提議將 className 修改為 class 的聲音越來越大。

React 團(tuán)隊(duì)為此不得不做出了妥協(xié)。

因此，在 React 17/18 的版本中，其實(shí)我們就可以直接在 JSX 中使用 class 了。但是他們又沒完全妥協(xié)，選擇的方式是，你可以用，代碼也能正常運(yùn)行，但是 React 會(huì)給你報(bào)錯(cuò) ～就很惡心

dan 的解釋是，

如果 React 團(tuán)隊(duì)毫無預(yù)警的同時(shí)支持 class 與 className，會(huì)在 React 生態(tài)中造成巨大的分歧。并不是所有的三方庫都會(huì)同時(shí)兼容這兩個(gè)方案，如果你使用的某一個(gè)三方庫不兼容 class，那么就會(huì)導(dǎo)致樣式的傳遞中斷，出現(xiàn)問題。

React 團(tuán)隊(duì)無法完全左右社區(qū)，對(duì)于這種沖突無能為力，因此，長(zhǎng)期以來，class 仍然以預(yù)警的方式存在。

但是，忍了 7 年了，我已經(jīng)忍不了了，我決定不管要付出什么樣的代價(jià)，必須要用 class，哪怕最后放棄使用 react。

那為了使用 class，我們要做什么額外的事兒呢？

3.弊端以及如何解決

在這之前，我們要明確，React 中，是支持直接使用 class 的。因此從功能的角度上而言，我們啥也不需要做，直接用就可以了。

但是當(dāng)你直接使用之后，你會(huì)遇到一堆麻煩事兒需要解決。

首先，如果你的項(xiàng)目中使用了 TypeScript，他會(huì)瘋狂報(bào)錯(cuò)，為了解決這個(gè)問題，我們要去修改 TypeScript 的類型聲明。

在 @types/react 這個(gè)庫中，我們?cè)?nbsp;HTMLAttributes 這個(gè)類型下面新增 class 字段。

interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
  ...
  className?: string | undefined;
  class?: string | undefined;
  ...
}

處理好之后就搞定了。不過手動(dòng)修改有一個(gè)比較麻煩的地方，就是每次你重新 install 之后，這段代碼就會(huì)被覆蓋，又還原成之前的樣子。那么這個(gè)時(shí)候你有兩個(gè)選擇，

第一，由于修改起來比較簡(jiǎn)單，而且 install 頻率也非常低，因此你可以每次都手動(dòng)修改一下。

第二，你在 install 時(shí)執(zhí)行一個(gè)本地腳本，用 node 代碼自動(dòng)去插入這段邏輯。

接下來的一個(gè)問題就是 eslint 等語法檢測(cè)規(guī)則可能會(huì)報(bào)錯(cuò)，我們可以修改 ESLint 配置文件以消除這個(gè)錯(cuò)誤。

"react/no-unknown-property": ["off"]

然后就是在開發(fā)環(huán)境中，console 面板里會(huì)報(bào)錯(cuò)，如下所示：

為了解決這個(gè)問題，我們需要在項(xiàng)目入口處，重寫 console.error 的報(bào)錯(cuò)規(guī)則，具體代碼我也已經(jīng)研究出來了，分享給大家。

const originalError = console.error;

console.error = function(...args) {
  const ignorePatterns = [
    'Invalid DOM property `%s`. Did you mean `%s`?',
    'class',
    'className'
  ];

  let shouldIgnore = true;

  ignorePatterns.forEach((pattern, index) => {
    if (typeof args[index] !== 'string' || !args[index].includes(pattern)) {
      shouldIgnore = false;
    }
  });

  if (!shouldIgnore) {
    originalError.apply(console, args);
  }
};

這段代碼僅會(huì)消除 class 的報(bào)錯(cuò)，而不影響其他。

到這里，基本上所有的報(bào)錯(cuò)都解決掉了。

當(dāng)我在群里和朋友圈分享這個(gè)的時(shí)候，有朋友問我是不是引入了什么三方工具或者插件，或者會(huì)不會(huì)影響編譯結(jié)果，現(xiàn)在大家知道了，我沒有用任何三方工具，只是修改了一些無關(guān)痛癢的報(bào)錯(cuò)提示。

并且，對(duì)于代碼執(zhí)行、編譯不會(huì)有任何影響。

最后一個(gè)問題，如果你正在開發(fā)底層組件庫，并且決定支持 className 的傳入時(shí)，這里還會(huì)遇到一個(gè)新的問題。一個(gè)就是你需要同時(shí)支持 class 的傳入，并且，當(dāng)你使用結(jié)構(gòu)時(shí)，必須對(duì) class 進(jìn)行重命名

const { class: cls } = props;

這個(gè)小的細(xì)節(jié)是 React 團(tuán)隊(duì)所擔(dān)心的，會(huì)引起社區(qū)分歧的核心原因。但是如果是個(gè)人項(xiàng)目，你可以完全把控你的代碼細(xì)節(jié)，那么這個(gè)分歧對(duì)于個(gè)人來說并不會(huì)有太大的影響。