Concepts fondamentaux fondamentaux de React

Dans le monde en évolution rapide du développement Web, React reste la pierre angulaire pour créer des interfaces utilisateur dynamiques et performantes. Que vous soyez un développeur chevronné ou débutant, comprendre les concepts fondamentaux de React est essentiel pour exploiter tout son potentiel. Dans cet article, nous explorerons les principes fondamentaux de React, de son statut de bibliothèque à la puissance des hooks, et vous fournirons une base claire pour améliorer vos compétences React. Allons-y ! ?

1. React est-il un framework ou une bibliothèque ?

React est une bibliothèque JavaScript, pas un framework. Contrairement aux frameworks, qui fournissent un ensemble complet d'outils et appliquent une manière particulière de créer des applications, React se concentre sur un aspect spécifique : le rendu de l'interface utilisateur. Cela rend React très flexible et populaire, car il suit la philosophie Unix consistant à faire une chose et à bien la faire.

2. DOM virtuel

Le DOM signifie Document Object Model en termes simples représentant l'interface utilisateur d'une application. Chaque fois que nous modifions l'interface utilisateur, le DOM est mis à jour pour représenter ce changement. Le DOM est représenté sous la forme d’une structure de données arborescente. Lorsque nous modifions l'interface utilisateur, le DOM restitue et met à jour ses enfants. Le nouveau rendu de l'interface utilisateur ralentit l'application.

Pour cette solution nous utilisons le Virtual DOM. Le DOM virtuel n'est qu'une représentation virtuelle du DOM. Lorsque l'état de l'application change, le DOM virtuel est mis à jour à la place du DOM réel.

Le DOM virtuel crée à chaque fois un arbre et les éléments sont représentés sous forme de nœud. Si l'un des éléments change, une nouvelle arborescence DOM virtuelle est créée. Le nouvel arbre est ensuite comparé ou « diffé » avec l'arbre précédent.

Dans cette image, les cercles rouges représentent les nœuds qui ont changé. Ces nœuds représentent les éléments de l'interface utilisateur qui changent d'état. Ensuite, comparez l’arborescence précédente et l’arborescence actuelle modifiée. L'arborescence mise à jour est ensuite mise à jour par lots vers le vrai DOM. Cela fait de React une bibliothèque JavaScript hautes performances.

En résumé :

1. L'intégralité du DOM virtuel est mis à jour.
2. Le DOM virtuel est comparé à ce à quoi il ressemblait avant que vous ne le mettiez à jour. React détermine quels objets ont changé.
3. Les objets modifiés, et uniquement les objets modifiés, sont mis à jour sur le vrai DOM.
4. Les modifications sur le vrai DOM entraînent un changement d'écran.

3. JSX

JSX (JavaScript XML) vous permet d'écrire du code de type HTML dans React. Il convertit les balises HTML en éléments React à l'aide de la fonction React.createElement (component, props,…children).

Par exemple :
Code JSX :

<MyText color="red">
  Hello, Good Morning!
</MyText>

Cet exemple se compile en :

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

Remarque : Les composants définis par l'utilisateur doivent commencer par une lettre majuscule. Les balises minuscules sont traitées comme des éléments HTML.

4. Accessoires en JSX

Les accessoires peuvent être spécifiés de plusieurs manières dans JSX :

Expressions JavaScript comme accessoires :

<SumComponent sum={1 + 2 + 3} />

Ici, props.sum est évalué à 6.

Littéraux de chaîne :

<TextComponent text={‘Good Morning!’} />

<TextComponent text=”Good Morning!” />

Les deux exemples ci-dessus sont équivalents.

Props par défaut sur "True"
Si nous ne transmettons pas de valeur pour un accessoire, la valeur par défaut est true.

Par exemple,

<TextComponent prop/>

<TextComponent prop={true} />

Les deux exemples ci-dessus sont équivalents.

5. Composants de classe

Les composants de React peuvent être définis comme des classes ou des fonctions. Voici comment définir un composant de classe :

class Greetings extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

6. Le cycle de vie des composants

Les composants ont des méthodes de cycle de vie que vous pouvez remplacer pour exécuter du code à des étapes spécifiques :

Montage : Lorsqu'un composant est créé et inséré dans le DOM.

• constructeur()
• rendu()
• componentDidMount()

Mise à jour : Lorsque les accessoires ou l'état changent.

• rendu()
• componentDidUpdate()

Démontage : Lorsqu'un composant est supprimé du DOM.

• componentWillUnmount()

7. Propriétés de classe

defaultProps vous permet de définir des valeurs par défaut pour les accessoires :

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

Si props.color n'est pas fourni, la valeur par défaut est « gris ».

8. Types d'accessoires

Nous pouvons utiliser des types d'accessoires pour vérifier les types de propriétés transmises des composants. Cela donne des erreurs quand elles ne correspondent pas.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

Cela avertira de l'incompatibilité de type pour l'identifiant.

9. Optimisation des performances

React est conçu pour la performance, mais vous pouvez l'optimiser davantage :

Utilisation de Production Build :

npm run build

This creates a production build with optimizations.

Minimize Source Code: Be cautious with changes to React's source code.

Code Splitting: Bundle JavaScript code into chunks to load as needed.

10. React Hooks

Hooks are functions that let you use state and other React features in function components. The two most popular hooks are:

useState: Adds state to function components.

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect: Manages side effects in function components.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

React has continually evolved to meet the demands of modern web development, and mastering its core concepts is crucial for building efficient, scalable applications. From understanding how React differentiates itself as a library to harnessing the power of hooks for functional components, these fundamentals will set you on the path to React proficiency.

As you continue to explore and implement React in your projects, remember that staying updated with the latest practices and features will keep you ahead in the ever-changing tech landscape. If you found this article valuable, don’t forget to give it a like and share it with fellow developers eager to deepen their React knowledge!

Thank you for reading, and happy coding! ?

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!