React 16中的class vs className

Question 1

我看到React 16允许将属性传递给DOM。因此，这意味着可以使用“类”代替className，对吗？

我只是想知道仍然可以使用className而不是class来实现优势，除了可以向后兼容以前的React版本。

Question 2

class是javascript中的关键字，而JSX是javascript的扩展。这就是React使用className而不是的主要原因class。

在这方面没有任何改变。

将其扩展更多。一个关键字意味着一个令牌有一个语言的语法具有特殊意义。例如：

class MyClass extends React.Class {

令牌class表示下一个令牌是标识符，其后是类声明。请参阅Javascript关键字+保留字。

令牌是关键字这一事实意味着我们不能在某些表达式中使用它，例如

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class = 'css';

// valid
var clazz = 'css';

// invalid!
props.class = 'css';

// valid
props['class'] = 'css';

问题之一是没人能知道将来是否还会出现其他问题。每种编程语言仍在发展，并且class可以在某些新的冲突语法中实际使用。

没有这样的问题className。

Question 3

React团队实际上将切换到class 而不是 className在即将到来的将来（来源）：

className→ class（＃4331，另请参阅下面的＃13525（评论））。已经提出了无数次了。我们已经允许在React 16中将类传递到DOM节点。由此造成的混乱不值得它试图避免的语法限制。

为什么要切换而不同时支持两者？

如果我们在没有警告的情况下支持这两种方法，那么社区将在使用哪一种方法上进行分配。npm上接受类道具的每个组件都必须记住同时转发两者。如果甚至中间的一个组件都没有发挥作用，并且仅实现了一个道具，那么该类就会迷失-否则您可能会面临最终class并最终className“不同意”彼此的风险，而React无法解决该冲突。因此，我们认为那会比现状更糟，并希望避免这种情况。

所以你应该保持关注。只要这是API所期望的，
我仍然会使用className。

Question 4

除了已经给出的其他良好答案之外，还需要进一步阐明：

您会注意到，React使用className而不是传统的DOM类。在文档中，“由于JSX是JavaScript，因此不鼓励将诸如class和for之类的标识符用作XML属性名称。相反，React DOM组件分别期望诸如className和htmlFor之类的DOM属性名称。”

http://buildwithreact.com/tutorial/jsx

另外，引用zpao（React贡献者/ facebook员工）

我们的DOM组件（大部分）使用JS API，因此我们选择使用JS属性（node.className，而不是node.class）。

Question 5

React docs建议使用cannonical React attribute名称而不是常规的Javascript命名，因此即使React允许将属性传递给DOM，它也会向您发出警告。

从文档：

Known attributes with a different canonical React name:

    <div tabindex="-1" />
    <div class="hi" />

React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.

Question 6

截至2019年6月，将className更改为class的过程已停止，以后可以继续进行

这是facebook dev的帖子解释了为什么

https://github.com/facebook/react/issues/13525

Question 7

与JavaScript中的函数一样，reactJS中的Class与className类是reactJS中的保留字或关键字。这就是为什么我们使用单词“ className”来引用该类的原因。

Question 8

React团队对此没有真正的解释，但是自从ES2015 +引入以来，人们就可以认为它与Javascript中的保留关键字“ class”是有区别的。

即使您在创建元素时在元素配置中使用“类”，它也不会引发任何编译/渲染错误。

Question 9

在ReactJS中，我们处理的是JSX，而不是众所周知的HTML。JSX希望您使用className，因为它是基础javascript DOM API！class是JS中的保留关键字不是我们不使用class而是使用className的主要原因。这是因为我们指的是DOM API