clase vs className en React 16

Vi que React 16 permite que los atributos se pasen al DOM. Entonces, eso significa que se puede usar 'clase' en lugar de className, ¿verdad?

Me pregunto si hay ventajas de seguir usando className sobre class, además de ser compatible con versiones anteriores de React.

classes una palabra clave en javascript y JSX es una extensión de javascript. Esa es la razón principal por la que React usa en classNamelugar de class.

Nada ha cambiado en ese sentido.

Para expandir esto un poco más. Una palabra clave significa que un token tiene un significado especial en la sintaxis de un idioma. Por ejemplo en:

class MyClass extends React.Class {

Token classdenota que el siguiente token es un identificador y lo que sigue es una declaración de clase. Consulte Palabras clave de Javascript + Palabras reservadas .

El hecho de que un token sea una palabra clave significa que no podemos usarlo en algunas expresiones, p. Ej.

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

Uno de los problemas es que nadie puede saber si no surgirá algún otro problema en el futuro. Todos los lenguajes de programación aún están evolucionando y classse pueden usar en alguna sintaxis nueva en conflicto.

No existen tales problemas con className.

El equipo de React realmente cambiará a en class lugar de className en el futuro próximo ( fuente ):

• className→ class( # 4331 , vea también # 13525 (comentario) a continuación). Esto se ha propuesto innumerables veces. Ya estamos permitiendo pasar la clase al nodo DOM en React 16. La confusión que esto está creando no vale las limitaciones de sintaxis contra las que está tratando de protegerse.

¿Por qué cambiar y no admitir ambos?

Si apoyamos ambos sin advertencias, entonces la comunidad se dividirá sobre cuál usar. Cada componente de npm que acepte un prop de clase tendrá que recordar reenviar ambos. Si incluso un componente en el medio no funciona e implementa solo un accesorio, la clase se pierde, o corre el riesgo de terminar classy classNameen la parte inferior "en desacuerdo" entre sí, sin que React resuelva ese conflicto. Por eso pensamos que sería peor que el statu quo y queremos evitarlo.

Así que deberías estar atento.
Todavía lo usaría classNamesiempre que esto sea lo que espera la API.

Solo para arrojar un poco más de luz, además de las otras buenas respuestas ya dadas:

Notarás que React usa className en lugar de la clase DOM tradicional. De los documentos, "Dado que JSX es JavaScript, los identificadores como class y for no se recomiendan como nombres de atributos XML. En su lugar, los componentes de React DOM esperan nombres de propiedades DOM como className y htmlFor, respectivamente".

http://buildwithreact.com/tutorial/jsx

Además, para citar a zpao (un colaborador de React / empleado de Facebook)

Nuestros componentes DOM usan (principalmente) la API JS, por lo que optamos por usar las propiedades JS (node.className, no node.class).

Los documentos de React recomiendan el uso de cannonical React attributenombres en lugar de los nombres convencionales de Javascript, por lo que incluso cuando React permite que los atributos se pasen a DOM, le dará una advertencia.

De los documentos:

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.

a partir de junio de 2019, el proceso de cambio de className a class se detuvo, podría continuar más tarde

aquí está la publicación de facebook dev explica por qué

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

Class versus className en reactJS La clase es una palabra reservada o palabra clave en reactJS tanto como función en el javascript. Es por eso que usamos la palabra "className" para referirnos a la clase.

No hay una explicación real por parte del equipo de React sobre esto, pero se podría suponer que se diferencia de la palabra clave reservada "clase" en Javascript desde su introducción en ES2015 +.

Incluso si usa "clase" en la configuración del elemento mientras crea el elemento, no arrojará ningún error de compilación / representación.

En ReactJS, estamos tratando con JSX y no con HTML como todos ustedes saben. ¡El JSX quiere que use className porque es una API DOM de JavaScript subyacente! class siendo una palabra clave reservada en JS no es la razón principal por la que no estamos usando class y, en su lugar, usamos className. Es porque nos referimos a esa API DOM