为什么 React 使用 className 而不是 class 属性？

当我们在使用 React 开发应用程序时，经常会在 JSX 代码中看到 className 属性，而不是常规的 HTML 中使用的 class 属性。那么为什么 React 选择使用 className，而不是 class 呢？

因为 class 是 JavaScript 的保留关键字

在 JavaScript 中，class 是一个保留关键字，用于声明类。在 React 组件中使用 class 属性会导致语法错误。为了避免与 JavaScript 关键字冲突，React 选择使用 className。

// 错误示例，将 class 作为属性名称会导致语法错误
<div class="container">...</div>

// 正确示例，使用 className
<div className="container">...</div>

因为 JSX 是基于 XML 的

JSX 是一种用于描述 UI 组件的语法，它类似于 XML。在 XML 中，所有属性都必须使用应该使用 name=value 的形式。React 选择使用 className 属性，以保持一致性，使 JSX 代码更易于阅读和编写。

<!--XML 中-->
<div class="container" id="example">...</div>

//JSX 中
<div className="container" id="example">...</div>

因为样式使用的是 CSS

在 HTML 中，我们使用 class 属性来指定元素的样式。但是在 React 中，我们通常使用 CSS 来为组件添加样式。使用 className 属性，可以让我们在 JSX 中明确指定组件的类名，以便在 CSS 中使用。

// 使用 className 属性，可以用 CSS 来实现样式
import './styles.css'

function Button() {
  return (
    <button className="primary-button">
      Click me
    </button>
  )
}

综上所述，React 之所以使用 className 而不是 class 属性，是为了避免与 JavaScript 关键字冲突，保持与 XML 的一致性，并支持 CSS 样式。