我不知道的 React Props className，htmlFor 和 tabIndex

生有涯而知无涯，今天开始一个全新的系列，【我不知道的】系列。我不知道的有很多，而且我不知道你是否知道，希望通过这个系列的文章，让你我都知道。

今天是 React 的一个 tips，来自面试官 Dan Abramov ：

Dan 总的灵魂发问：你知道为啥 React 的一些属性名（如 className 、tabIndex、htmlFor) 和 HTML 的标准属性不一样吗？

我：我好像知道又不知道，class 在 JavaScript 里是关键字，所以不能用，但是为啥叫 className 而不是 htmlClass 之类的呢。但是 Dan 总你自问自答了啊，这些是和 Web 标准里的 DOM 属性对应的。

来看看 ChatGPT 怎么答这道题：

Untitled 1.png

回答出了一部分，再给小 G 一次机会：

Untitled 2.png

回答的不错，来看看 Dan 总的满分回答：

Untitled 3.png

Dan 总提到，在 Web 平台，有两个截然不同的概念：

HTML 属性通常表示初始值，并不总是随时间更新，而 DOM 属性总是最新的。

这段怎么理解呢？举个例子：

其实最典型的案例就是 <input>，给 input 的 value 属性一个初始值，

后面无论如何输入，该 <input> HTML 的 value 属性都不变，而使用 DOM API 查看，是随着输入变化的；

但是其他如 Dan 提到的 class、for、tabindex 属性，如果使用 DOM API 改变其值，其 HTML 的属性值也随之变化，具体可以查看如下 Demo:

再次回到这个问题，除了不能与 JavaScript 关键字重名之外，React 采用与 DOM 属性一致的做法还有一个原因，那就是，React 与 HTML 不同，React 中标签的属性不仅仅代表初始值，而是全时段的值，这和 DOM 属性的概念更加匹配。

但是这样也会对用户造成一定困惑，尤其是在 JSX 里，明明看起来是 HTML，但是属性值确不是 HTML 标准属性值。Dan 说回想起来，尽可能使用 HTML 命名可以有效减少争议。确实如此，感觉好久没写原生 HTML 了，时间久了确实会混淆。

延伸阅读