面试题：为什么在 React 中使用 className 而不是 class？

在 React 中使用 className 而不是 class 来指定 HTML 元素的 CSS 类，主要原因如下：

1. JavaScript 语言保留字冲突

这是最核心的原因。

• class 是 JavaScript (ES6) 中的一个保留关键字，用于定义类（class）。
• 如果 React 使用 class 作为 JSX 属性名，就会与 JavaScript 的语法产生直接冲突。例如，以下代码在 JavaScript 引擎中是非法的：
  // ❌ 这是无效的 JavaScript 语法！ const element = <div class="my-class">Hello</div>;
  因为 class 在这里会被解析为关键字，而不是一个普通的属性名。

为了规避这个语法冲突，React 选择使用 className 作为替代属性名。className 是一个普通的、合法的 JavaScript 标识符，不会引起解析错误：

// ✅ 这是有效的 JavaScript 语法
const element = <div className="my-class">Hello</div>;

2. 与 DOM API 保持一致

虽然 JSX 看起来像 HTML，但它最终会被编译成对 React.createElement() 的调用，而 React.createElement() 创建的是 JavaScript 对象，这些对象最终会映射到浏览器的 DOM 元素上。

在原生 JavaScript 的 DOM API 中，操作元素类名的属性和方法也是 className 和 classList，而不是 class。

// 原生 JavaScript DOM 操作
const div = document.createElement('div');
div.className = 'my-class'; // 使用 className
div.classList.add('another-class');

React 的 className 属性直接对应于 DOM 元素的 className 属性，这种设计保持了与底层 Web API 的一致性。

3. JSX 的设计原则

JSX 本质上是 React.createElement() 函数调用的语法糖。它需要遵循 JavaScript 的语法规则。React 团队在设计 JSX 时，必须确保 JSX 能够被 JavaScript 引擎正确解析。

使用 className 而不是 class 是一个明智的妥协，它既解决了语法冲突，又保持了与 DOM 的映射关系。

其他类似属性

React 中还有其他类似的属性，它们也因为是 JavaScript 保留字或与 DOM API 一致而使用了不同的名称：

• htmlFor 代替 for (因为 for 是 JavaScript 的保留字，如 for 循环)。
• tabIndex 代替 tabindex (遵循驼峰命名法)。
• onClick, onChange 等事件处理属性也使用驼峰命名，而不是 HTML 中的 onclick, onchange。

总结

简而言之，React 使用 className 而不是 class，主要是因为 class 是 JavaScript 的保留关键字，直接使用会导致语法错误。className 是一个安全且符合 JavaScript 语法规则的替代名称，同时它也与浏览器 DOM API 保持一致。这是一个为了兼容性和正确性而做出的设计选择。