Pregunta de la entrevista-React (3): ¿Qué es JSX? ¿En qué se diferencia del JavaScript normal?

En el mundo de React, JSX es una tecnología convincente que permite a los desarrolladores anidar etiquetas similares a HTML dentro de JavaScript para describir la estructura de los componentes de la interfaz de usuario. Este blog explorará la sintaxis JSX en profundidad a través de ejemplos de código enriquecido y analizará su uso y ventajas en React.

1. Sintaxis básica de JSX

En los proyectos de React, a menudo verá bloques de código similares a HTML, que es JSX. A continuación se muestran algunos ejemplos de sintaxis JSX comunes:

1. elemento fundamental:

const element = <h1>Hello, JSX!</h1>;

2. Interpolación de expresiones:

const name = "Alice";
const element = <p>Hello, {name}!</p>;

3. Representación condicional:

const isLoggedIn = true;
const element = isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;

4. Representación de lista:

const items = ['Apple', 'Banana', 'Orange'];
const list = (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

5. Escritura de notas

{/* 这是注释 */}

6. normas de escritura

• La capa superior de JSX solo puede tener un elemento raíz, por lo que a menudo envolvemos un elemento div en la capa exterior, como por ejemplo:

const root = (
  <div>
    <h1>标题</h1>
    <div>内容</div>
  </div>
)

• Una etiqueta en JSX puede ser una etiqueta simple o una etiqueta doble, si es una etiqueta simple debe terminar en />;

const root = (
  <div>
    <h1>标题</h1>
    <br/>
    <div>内容</div>
  </div>
)

Dos, JSX inserta diferentes tipos de valores.

1. visualización de número/cadena/matriz directamente

const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]

const root = (
  <div>
    <p>{number}</p>
    <p>{str}</p>
    <p>{arr}</p>
  </div>
)

2. nulo/indefinido/booleano se mostrará como vacío

const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]
const nul= null,
const und= undefined,
const bool= true

const root = (
  <div>
    <p>{number}</p>
    <p>{str}</p>
    <p>{arr}</p>
    
    <p>{nul}</p>
    <p>{und}</p>
    <p>{bool}</p>

    <p>结尾</p>
  </div>
)

3. La diferencia entre JSX y JavaScript normal

1. Anidamiento de etiquetas:

JSX permite anidar etiquetas HTML en JavaScript, lo cual es más intuitivo que manipular el DOM en JavaScript normal.

2. Expresión de interpolación:

{}Las expresiones JavaScript se insertan en JSX usando llaves , lo que hace que la representación dinámica sea muy conveniente.

3. Nombre de clase y denominación de atributos:

En JSX, utilícelo en lugar de classNameHTML para evitar conflictos con las palabras clave de JavaScript.classhtmlForfor

4. ¿Por qué React usa JSX?

1. Legibilidad:

La sintaxis JSX es similar a HTML, lo que hace que el código sea más legible y comprensible y mejora la eficiencia de la colaboración del equipo de desarrollo.

2. Simplicidad:

JSX simplifica el proceso de creación de elementos de React, haciendo que React.createElementel código sea más claro y conciso que usarlo manualmente.

3. Verificación de tipo estático:

Con herramientas de verificación de tipos estáticos (como TypeScript, Flow), JSX puede ayudar a los desarrolladores a detectar errores de tipo al codificar.

4. Experiencia de desarrollo más natural:

JSX permite a los desarrolladores describir estructuras de interfaz de usuario de forma más natural en JavaScript, similar a escribir código en HTML.