Une analyse détaillée des nouvelles fonctionnalités de React 16+, partie 1: informations générales

Aujourd'hui, nous vous présentons la première partie de la traduction de ce grand matériel. Il est consacré à une analyse détaillée des nouvelles fonctionnalités de React qui sont apparues dans cette bibliothèque depuis la version 16. L'auteur de ce matériel est engagé dans la programmation depuis 5 ans. Dans le passé, il était designer et s'est essayé comme illustrateur. Il a inclus des bandes dessinées dans l'article, qui, à son avis, aideront les lecteurs à mieux comprendre ce qui est discuté.

Dans l'original, cet article est intitulé "Réintroduction de React: chaque mise à jour de React depuis la version 16 démystifiée." Le titre laisse entendre que le lecteur, peut-être déjà familier avec React, est invité à découvrir à nouveau cette bibliothèque. Cette réintroduction à React l'aidera à rationaliser ce qu'il sait déjà et à découvrir quelque chose de nouveau.

Comment lire ce matériel?

Avant de lire cet article, vous pouvez télécharger le livre électronique , qui est distribué gratuitement. Il représente le même matériel, conçu comme un fichier PDF, Epub ou Mobi autonome. Le livre fournit des exemples de code avec mise en évidence de la syntaxe. Il sera peut-être plus pratique pour vous de lire le matériel et de parcourir le code en parallèle, sur la base du livre. De plus, il est recommandé d'utiliser ce référentiel. Vous pouvez trouver le code des exemples discutés ici.

Pour qui et pourquoi ce matériel a-t-il été écrit?

J'ai écrit ma première application React il y a environ 4 ans. Depuis lors, les principes fondamentaux de React n'ont pas changé. Nous avons devant nous le même code déclaratif et tous les mêmes composants. Tout cela est bien, mais la façon dont les applications React modernes sont écrites est différente de ce qu'elle était auparavant. Au fil des ans, beaucoup de nouvelles choses sont apparues dans React, et une partie de cette bibliothèque a été supprimée.

Si vous avez étudié React pendant longtemps, il est fort possible que vous ne soyez pas particulièrement familiarisé avec les nouvelles fonctionnalités de cette bibliothèque. De plus, même celui qui suit les innovations peut très bien «s'y perdre», pour ainsi dire. Comment corriger la situation, en réalisant que l'ancien doit être jeté et lequel des nouveaux doit être accepté? Comment mettez-vous en évidence ces fonctionnalités modernes de React que vous pourriez trouver particulièrement utiles?

Même moi, un programmeur expérimenté, je me perds parfois, si nécessaire, pour oublier quelque chose d'ancien et apprendre quelque chose de nouveau à la place. Cela peut sembler aussi difficile que d'apprendre un concept complètement nouveau.

Si vous ressentez également quelque chose comme ça, j'espère que mon travail pourra vous aider à tout remettre à sa place.

On peut en dire autant de ceux qui viennent de commencer à apprendre React.

Autour il y a beaucoup d'informations périmées. Si vous apprenez React à partir de publications assez anciennes, vous pouvez certainement maîtriser les bases. Cependant, dans le développement moderne de React, il existe de nombreuses nouvelles fonctionnalités intéressantes qui méritent votre attention. Il est préférable de se renseigner sur ces fonctionnalités dès que possible, plutôt que d'essayer d'oublier les anciennes méthodes de travail plus tard et d'en apprendre de nouvelles à la place.

En fait, nous analyserons ici en détail tout ce qui est nouveau dans React 16+.

Quoi de neuf dans React 16+?

À première vue, il peut sembler que dans React, après la sortie de la version 16, peu de modifications ont été apportées. Mais en réalité, ce n'est pas le cas. Voici de quoi nous parlerons:

1. Nouvelles méthodes de cycle de vie des composants.
2. Gestion d'état simplifiée à l'aide de l'API Context.
3. La propriété contextType et les fonctionnalités de l'API Context.
4. Application Profiler: diagrammes, analyse d'interaction.
5. Chargement paresseux de matériaux à l'aide de React.lazy et Suspense.
6. Une version fonctionnelle des composants basés sur PureComponent créés à l'aide de React.memo.
7. Simplifiez les applications React à l'aide de crochets.
8. Modèles avancés de conception d'applications React basées sur les hooks.

Chaque élément de cette liste est présenté dans une grande section distincte. La première section se concentre sur les nouvelles techniques de cycle de vie des composants.

Chers lecteurs! Nous réfléchissons maintenant à l'opportunité de traduire la suite de ce matériel. Si le sujet de React-development est proche de vous, nous vous invitons à voter et à commenter.