Question d'entretien-React (3) : Qu'est-ce que JSX ? En quoi est-il différent du JavaScript classique ?

Dans le monde de React, JSX est une technologie intéressante qui permet aux développeurs d'imbriquer des balises de type HTML dans JavaScript pour décrire la structure des composants de l'interface utilisateur. Ce blog explorera en profondeur la syntaxe JSX à travers des exemples de code riches et analysera son utilisation et ses avantages dans React.

1. Syntaxe de base de JSX

Dans les projets React, vous verrez souvent des blocs de code similaires au HTML, qui est JSX. Voici quelques exemples courants de syntaxe JSX :

1. élément fondamental :

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

2. Interpolation d'expressions :

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

3. Rendu conditionnel :

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

4. Rendu de liste :

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

5. Rédaction de notes

{/* 这是注释 */}

6. normes d'écriture

• La couche supérieure de JSX ne peut avoir qu'un seul élément racine, nous enveloppons donc souvent un élément div dans la couche externe, tel que :

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

• Une balise dans JSX peut être une balise simple ou une balise double. S'il s'agit d'une balise simple, elle doit se terminer par /> ;

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

Deuxièmement, JSX insère différents types de valeurs

1. affichage direct du nombre/chaîne/tableau

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. null/undefined/boolean sera affiché comme vide

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 différence entre JSX et JavaScript classique

1. Imbrication d'étiquettes :

JSX permet d'imbriquer des balises HTML dans JavaScript, ce qui est plus intuitif que de manipuler le DOM en JavaScript classique.

2. Expression d'interpolation :

{}Les expressions JavaScript sont insérées dans JSX à l'aide d'accolades , ce qui rend le rendu dynamique très pratique.

3. Nom de la classe et nom des attributs :

Dans JSX, utilisez à la place de classNameHTML , pour éviter les conflits avec les mots-clés JavaScript.classhtmlForfor

4. Pourquoi React utilise-t-il JSX ?

1. Lisibilité :

La syntaxe JSX est similaire à HTML, ce qui rend le code plus lisible et compréhensible et améliore l'efficacité de la collaboration de l'équipe de développement.

2. Simplicité :

JSX simplifie le processus de création d'éléments React, rendant React.createElementle code plus clair et plus concis que son utilisation manuelle.

3. Vérification de type statique :

Grâce aux outils de vérification de type statique (tels que TypeScript, Flow), JSX peut aider les développeurs à détecter les erreurs de type lors du codage.

4. Expérience de développement plus naturelle :

JSX permet aux développeurs de décrire les structures de l'interface utilisateur plus naturellement en JavaScript, de la même manière que l'écriture de code en HTML.