Introduction à React

React est une bibliothèque JavaScript développée par Facebook (aujourd'hui Meta) et rendue open source en 2013, spécialement destinée à la création d'interfaces utilisateur, en particulier les applications monopages (SPA).

React permet aux développeurs de créer des composants d'interface utilisateur réutilisables de manière déclarative.

Le positionnement de React

• Pas un framework, mais une bibliothèque: React se concentre sur la couche vue (le V de MVC), contrairement à Angular qui fournit une solution de framework complète
• Pensée orientée composants: Décomposer l'interface utilisateur en composants indépendants et réutilisables
• Centré sur JavaScript: Tout est JavaScript, y compris la structure, le style et la logique

Fonctionnalités clés de React

1. Programmation déclarative

Programmation impérative traditionnelle: Dire à l'ordinateur comment le faire

// 原生 JavaScript（命令式）
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  const counter = document.getElementById('counter');
  const currentValue = parseInt(counter.textContent);
  counter.textContent = currentValue + 1;
});

Programmation déclarative avec React: Dire à l'ordinateur quel résultat vous voulez

// React（声明式）
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Avantages：

• Le code est plus concis et intuitif
• Plus facile à comprendre et à maintenir
• Réduit les erreurs liées à la manipulation manuelle du DOM
• L'état et l'interface utilisateur restent synchronisés

2. Basé sur les composants

Le cœur de React est la pensée par composants, en décomposant l'interface utilisateur en composants indépendants, réutilisables et composables, comme des blocs de construction. Chaque composant ne se soucie que de son propre état et de ses props, ce qui rend la logique claire et facile à maintenir.

Les applications React sont constituées de composants indépendants, dont chacun :

• Encapsule sa propre structure, son style et sa logique
• Peut recevoir des entrées (props)
• Peut maintenir un état interne
• Peut être réutilisé et composé

Avantages de l'architecture à base de composants：

• Réutilisabilité: Le même composant peut être utilisé à plusieurs endroits
• Maintenabilité: La modification d'un composant n'affecte pas les autres parties
• Testabilité: Les composants indépendants sont faciles à tester unitairement
• Collaboration: Les membres de l'équipe peuvent développer différents composants en parallèle

3. DOM virtuel

Qu'est-ce que le DOM virtuel ?

Le DOM virtuel est une représentation sous forme d'objet JavaScript du DOM réel, une structure de données légère en mémoire.

Fonctionnement :

1. 状态改变
   ↓
2. 生成新的虚拟 DOM 树
   ↓
3. 与旧虚拟 DOM 树进行对比（Diffing）
   ↓
4. 计算出最小差异（Reconciliation）
   ↓
5. 只更新真实 DOM 中变化的部分

Explication du diagramme :

• Le DOM virtuel est une représentation légère sous forme d'objet JavaScript du DOM du navigateur.
• Lorsque l'état change, le framework (comme React) calcule et compare d'abord dans le DOM virtuel (algorithme de diff).
• Ensuite, grâce au processus de patch, seules les mises à jour minimales nécessaires sont appliquées au DOM réel.

Pourquoi avons-nous besoin du DOM virtuel ?

Problèmes liés aux opérations sur le DOM réel :

• Les opérations sur le DOM sont très lentes (par rapport aux opérations JavaScript)
• Les opérations DOM fréquentes entraînent un reflow et un repaint de la page
• La manipulation directe du DOM est source d'erreurs

Avantages du DOM virtuel :

• Optimisation des performances: Mises à jour par lots, réduisant le nombre d'opérations sur le DOM réel
• Multiplateforme: Le DOM virtuel peut effectuer le rendu sur différentes plateformes (Web, mobile, bureau)
• Déclaratif: Les développeurs n'ont qu'à se soucier de l'état, sans manipuler manuellement le DOM

Exemple de comparaison :

// 假设要更新 1000 个列表项
const items = Array(1000).fill(0).map((_, i) => i);

// 传统方式：每次都操作真实 DOM（慢）
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li); // 1000 次 DOM 操作
});

// React 方式：通过虚拟 DOM 批量更新
function ItemList() {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}
// React 会智能地批量更新 DOM

4. Flux de données unidirectionnel

Les données React circulent de manière unidirectionnelle vers le bas, Parent → Enfant, et l'Enfant ne peut pas remonter vers le Parent :

React utilise une approche de flux de données descendante :

父组件
  ↓ (props)
子组件
  ↓ (props)
孙组件

Caractéristiques：

• Les données circulent des composants parents vers les composants enfants
• Les composants enfants communiquent avec les composants parents via des fonctions de rappel
• Le flux de données est clair, ce qui facilite le suivi et le débogage

Principaux avantages de React

1. Courbe d'apprentissage relativement douce

• Moins d'API de base
• Repose principalement sur les connaissances en JavaScript
• Concepts clairs, bien documentés

2. Écosystème puissant

• Routage：React Router
• Gestion d'état：Redux, Zustand, Jotai
• Bibliothèques UI：Material-UI, Ant Design, Chakra UI
• Chaîne d'outils：Create React App, Vite, Next.js

3. Large soutien de la communauté

• L'une des bibliothèques front-end les plus populaires sur GitHub
• Un grand nombre de composants et d'outils tiers
• Communauté active et ressources d'apprentissage abondantes

4. Excellentes performances

• Optimisation du DOM virtuel
• Rendu à la demande
• Prise en charge du découpage du code et du chargement différé

5. Capacités multiplateformes

• React Native: Développer des applications mobiles
• React Native for Windows: Applications de bureau
• React 360: Applications de réalité virtuelle

6. Prise en charge des applications de niveau entreprise

Utilisé par de nombreuses entreprises bien connues :

• Facebook/Meta
• Instagram
• Netflix
• Airbnb
• Uber
• Tencent, Alibaba, etc.

Cas d'utilisation adaptés à React

Scénarios adaptés à React :

• Applications monopages (SPA)
• Interfaces dynamiques nécessitant des mises à jour fréquentes
• Interfaces utilisateur interactives complexes
• Grands projets nécessitant la réutilisation de composants
• Applications nécessitant un développement multiplateforme

Scénarios moins adaptés :

• Sites web statiques simples (peuvent être surdimensionnés)
• Sites web avec des exigences SEO extrêmement élevées (doivent être combinés avec des solutions SSR telles que Next.js)
• Équipes peu familières avec JavaScript

Comparaison de React avec d'autres frameworks

Histoire du développement de React

• 2013: React open source
• 2015: React Native publié
• 2016: React 16 (architecture Fiber)
• 2019: React Hooks officiellement publié
• 2020: Version expérimentale de Concurrent Mode
• 2022: React 18 (rendu concurrent)
• 2024-2025: Nouvelles fonctionnalités telles que React Compiler, Server Components