Composants React (basés sur les classes ou fonctionnels)

Les composants React sont les éléments constitutifs de toute application React. Ils vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables qui peuvent être gérés et rendus séparément. Les composants React sont de deux types principaux : les composants fonctionnels et les composants de classe.

Composants fonctionnels
Les composants fonctionnels sont plus simples et sont écrits sous forme de fonctions JavaScript. Ils prennent des accessoires (données d'entrée) comme argument et renvoient JSX, qui décrit à quoi devrait ressembler l'interface utilisateur. Depuis React 16.8, les composants fonctionnels peuvent également gérer l'état et les effets secondaires à l'aide de hooks comme useState et useEffect.

import React, { useState } from 'react';

const Welcome = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1 id="Hello-props-name">Hello, {props.name}!</h1>
      <p>You've clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Welcome;

Composants de classe
Les composants de classe étaient la manière originale d'écrire des composants dans React. Ils étendent la classe React.Component et doivent inclure une méthode render() qui renvoie JSX. Les composants de classe peuvent avoir leurs propres méthodes d'état et de cycle de vie comme composantDidMount, composantDidUpdate et composantWillUnmount.

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>
        <p>You've clicked {this.state.count} times</p>
        <button onclick="{this.handleClick}">Click me</button>
      </div>
    );
  }
}

export default Welcome;

Concepts clés :

• JSX : Une extension de syntaxe de JavaScript qui ressemble à HTML. Les composants React renvoient JSX pour décrire l'interface utilisateur.
• Props : Abréviation de « propriétés », les accessoires vous permettent de transmettre des données des composants parents aux composants enfants.
• State : Un objet intégré pour stocker des données dynamiques qui affectent ce qui est rendu dans le composant. Seuls les composants qui utilisent l'état (composants fonctionnels ou de classe) peuvent être restitués en fonction des modifications apportées à ces données.

Crochets (pour composants fonctionnels) :

• useState : Permet de gérer l'état dans un composant fonctionnel.
• useEffect : Vous permet d'effectuer des effets secondaires dans un composant fonctionnel (par exemple, récupérer des données, mettre à jour le DOM).

React encourage la création de petits composants réutilisables qui peuvent être combinés pour former des applications plus grandes, gardant ainsi la base de code modulaire et plus facile à maintenir.

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!