React16のクラスとclassName

Question 1

React 16では、属性をDOMに渡すことができます。つまり、classNameの代わりに「class」を使用できるということですよね？

以前のバージョンのReactとの下位互換性に加えて、クラスよりもclassNameを使用することに利点があるかどうか疑問に思っています。

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';

問題の1つは、他の問題が将来発生しないかどうかを誰も知ることができないということです。すべてのプログラミング言語はまだ進化しており、class実際にはいくつかの新しい競合する構文で使用できます。

にはそのような問題はありませんclassName。

Question 3

Reactチームは、今後のclass 代わりに 実際に切り替えるclassName予定です（ソース）：

className→ class（＃4331、下記の＃13525（コメント）も参照）。これは数え切れないほど提案されています。React 16ではすでにクラスをDOMノードに渡すことを許可しています。これが引き起こす混乱は、保護しようとしている構文制限の価値がありません。

なぜ切り替えて両方をサポートしないのですか？

警告なしに両方をサポートする場合、コミュニティはどちらを使用するかを分割します。クラスpropを受け入れるnpmの各コンポーネントは、両方を転送することを忘れないでください。中央に一つでも部品が一つだけ支柱に沿っや道具再生されない場合、クラスが失われる-またはあなたが終わるリスクclassとclassNameその競合を解決するように反応するためでは決してないと、お互いに「不同意」下部にあります。ですから、それは現状よりも悪いと思い、これを避けたいと思います。

ですから、ご期待ください。これがAPIが期待するものである限り、
私はまだ使用classNameします。

Question 4

すでに与えられた他の良い答えに加えて、もう少し光を当てるために：

Reactが従来のDOMクラスの代わりにclassNameを使用していることに気付くでしょう。ドキュメントによると、「JSXはJavaScriptであるため、classやforなどの識別子をXML属性名として使用することはお勧めしません。代わりに、React DOMコンポーネントは、それぞれclassNameやhtmlForなどのDOMプロパティ名を想定しています。」

http://buildwithreact.com/tutorial/jsx

また、zpao（Reactの寄稿者/ Facebookの従業員）を引用するには

DOMコンポーネントは（ほとんど）JS APIを使用するため、JSプロパティ（node.classではなくnode.className）を使用することを選択しました。

Question 5

Reactドキュメントは使用を推奨しています 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に変更するプロセスは停止されており、後で続行される可能性があります

これがfacebookdevによる投稿です理由を説明します

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

Question 7

reactJSのクラスとclassNameクラスは、関数がjavascriptにあるのと同じように、reactJSの予約語またはキーワードです。そのため、「className」という単語を使用してクラスを参照します。

Question 8

これに関するReactチームによる実際の説明はありませんが、ES2015 +での導入以来、Javascriptの予約済みキーワード「class」とは区別されていると推測されます。

要素の作成中に要素構成で「クラス」を使用しても、コンパイル/レンダリングエラーはスローされません。

Question 9

ReactJSでは、ご存知のようにHTMLではなくJSXを扱っています。JSXは、基礎となるjavascript DOM APIであるため、classNameを使用することを望んでいます。JSで予約キーワードであるclassは、classを使用せず、代わりにclassNameを使用する主な理由ではありません。そのDOMAPIを参照しているためです