Maison > interface Web > js tutoriel > le corps du texte

Les bases de React

DDD
Libérer: 2024-09-19 06:19:37
original
1022 Les gens l'ont consulté

Voici une explication de la terminologie clé de React avec des exemples :

1. Composant

Un composant est la pierre angulaire d'une application React. Il s'agit d'une fonction ou d'une classe JavaScript qui renvoie une partie de l'interface utilisateur (interface utilisateur).

Composant fonctionnel (commun dans React moderne) :

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
Copier après la connexion

Composant de classe (ancien style) :

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
Copier après la connexion

2. JSX (JavaScript XML)

JSX vous permet d'écrire une syntaxe de type HTML dans JavaScript. C'est du sucre syntaxique pour React.createElement().

Exemple :

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

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');
Copier après la connexion

3. Accessoires (Propriétés)

Les accessoires sont la manière dont les données sont transmises d'un composant à un autre. Ils sont en lecture seule et permettent aux composants d'être dynamiques.

Exemple :

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Alice" />
Copier après la connexion

4. État

State est un objet JavaScript qui contient des données dynamiques et affecte la sortie rendue d'un composant. Il peut être mis à jour avec setState (composants de classe) ou le hook useState (composants fonctionnels).

Exemple avec useState dans les composants fonctionnels :

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
Copier après la connexion

5. Crochets

Les hooks sont des fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React dans les composants fonctionnels.

useState : gère l'état des composants fonctionnels.
useEffect : exécute des effets secondaires dans les composants fonctionnels.

Exemple d'utilisationEffet :

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}
Copier après la connexion

6. DOM Virtuel

Le Virtual DOM est une copie légère du vrai DOM. React l'utilise pour suivre les modifications et mettre à jour efficacement l'interface utilisateur en restituant uniquement les parties du DOM qui ont changé, plutôt que la page entière.

7. Gestion des événements

React utilise camelCase pour les gestionnaires d'événements au lieu des minuscules, et vous transmettez des fonctions en tant que gestionnaire d'événements au lieu de chaînes.

Example:

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}
Copier après la connexion

8. Rendu

Le rendu est le processus par lequel React envoie les éléments DOM au navigateur. Les composants restituent l'interface utilisateur en fonction des accessoires, de l'état et d'autres données.

Exemple :

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

Copier après la connexion

9. Rendu conditionnel

Vous pouvez restituer différents composants ou éléments en fonction des conditions.

Exemple :

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}
Copier après la connexion

10. Listes et clés

Dans React, vous pouvez restituer des listes de données à l'aide de la méthode map(), et chaque élément de liste doit avoir une clé unique.

Exemple :

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

Copier après la connexion

11. Relever l'État

Parfois, plusieurs composants doivent partager le même état. Vous « élevez l'État » jusqu'à leur ancêtre commun le plus proche afin qu'il puisse être transmis comme accessoire.

Exemple :

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

Copier après la connexion

Ce sont les concepts de base qui constituent la base du développement de React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!