React 1

Réagir de base
.
1
2
Qu'est-ce que React ?
1
1
React est une bibliothèque JavaScript frontale open source utilisée
1
0
pour créer des interfaces utilisateur, en particulier pour les
9
applications d'une seule page. Il est utilisé pour gérer la couche de
8
vue pour les applications Web et mobiles. React a été créé par Jordan
7
Walke , un ingénieur logiciel travaillant pour Facebook. React a été
6
déployé pour la première fois sur le fil d'actualité de Facebook en 2011
et sur Instagram en 2012.
5
Retour au sommet
.
Quelles sont les principales fonctionnalités de React ?
Les principales fonctionnalités de React sont :
○ Il utilise VirtualDOM au lieu de RealDOM étant donné que les
manipulations de RealDOM sont coûteuses.

○ Prend en charge le rendu côté serveur .
○ Suit le flux de données unidirectionnel ou la liaison de données.
○ Utilise des composants d'interface utilisateur réutilisables/
4
composables pour développer la vue.
. Retour au sommet
3
.
Qu'est-ce que JSX ?
JSX est une extension de syntaxe de type XML pour ECMAScript
(l'acronyme signifie JavaScript XML ). Fondamentalement, il fournit
simplement du sucre syntaxique pour
la React.createElement()fonction, nous donnant l'expressivité de
JavaScript ainsi que la syntaxe de modèle HTML.
Dans l'exemple ci-dessous, le texte à l'intérieur <h1>de la balise est
2
renvoyé en tant que fonction JavaScript à la fonction de rendu.
class App extends React.Component {
. render() {
. return(
. <div>
. <h1>{'Welcome to React world!'}</h1>
. </div>
. )
. }
. }
1
.
1
3
Retour au sommet
.
Quelle est la différence entre élément et composant ?
1
2
Un élément est un objet simple décrivant ce que vous voulez voir
apparaître à l'écran en termes de nœuds DOM ou d'autres
composants. Les éléments peuvent contenir d'autres éléments dans
leurs props. Créer un élément React est bon marché. Une fois qu'un
élément est créé, il n'est jamais muté.
La représentation d'objet de React Element serait la suivante :
const element = React.createElement(
. 'div',
. {id: 'login-btn'},
. 'Login'
. )
La React.createElement()fonction ci-dessus renvoie un objet :

{
. type: 'div',
. props: {
. children: 'Login',
. id: 'login-btn'
. }
. }
.
Et enfin, il rend au DOM en utilisant ReactDOM.render():

<div id='login-btn'>Login</div>
Alors qu'un composant peut être déclaré de plusieurs manières

différentes. Il peut s'agir d'une classe avec une render()méthode ou il
peut être défini comme une fonction. Dans les deux cas, il prend les
props en entrée et renvoie un arbre JSX en sortie :
const Button = ({ onLogin }) =>
. <div id={'login-btn'} onClick={onLogin}>Login</div>
Ensuite, JSX est transpilé dans

une React.createElement()arborescence de fonctions :
const Button = ({ onLogin }) => React.createElement(
. 'div',
. { id: 'login-btn', onClick: onLogin },
. 'Login'
. )
.
Retour au sommet
.
Comment créer des composants dans React ?
Il existe deux manières de créer un composant.
○ Composants de fonction : il s'agit de la manière la plus simple de
créer un composant. Ce sont des fonctions JavaScript pures qui

acceptent l'objet props comme premier paramètre et renvoient
des éléments React :
function Greeting({ message }) {
○ return <h1>{`Hello, ${message}`}</h1>
○
○ }
○ Composants de classe : vous pouvez également utiliser la classe

ES6 pour définir un composant. Le composant de fonction ci-
dessus peut être écrit comme suit :
class Greeting extends React.Component {
○ render() {
○ return <h1>{`Hello, ${this.props.message}`}</h1>
○ }
○ }
. Retour au sommet
.
Quand utiliser un composant de classe plutôt qu'un composant de
fonction ?
Si le composant a besoin de méthodes d'state ou de cycle de
vie, utilisez le composant de classe, sinon utilisez le composant de
fonction. Cependant, à partir de React 16.8 avec l'ajout de Hooks,
vous pouvez utiliser state , des méthodes de cycle de vie et d'autres
fonctionnalités qui n'étaient disponibles que dans le composant de
classe directement dans votre composant de fonction. * Ainsi, il est
toujours recommandé d'utiliser des composants Function, sauf si vous
avez besoin d'une fonctionnalité React dont l'équivalent du composant
Function n'est pas encore présent, comme Error Boundaries *
Retour au sommet
.
Que sont les composants purs ?
React.PureComponentest exactement le même
.
que React.Componentsauf qu'il gère

la shouldComponentUpdate()méthode pour vous. Lorsque les props
ou l'state changent, PureComponent effectuera une comparaison
superficielle sur les props et l'state. Le composant , d'autre part, ne
comparera pas les props et l'state actuels au prochain prêt à
l'emploi. Ainsi, le composant restituera par défaut chaque fois
qu'il shouldComponentUpdateest appelé.
Retour au sommet
.
Quel est l'state dans React ?
L'state d'un composant est un objet qui contient des informations
susceptibles de changer au cours de la durée de vie du
composant. Nous devons toujours essayer de rendre notre state aussi
simple que possible et de minimiser le nombre de composants avec
state.
Créons un composant utilisateur avec l'state du message,
class User extends React.Component {
. constructor(props) {
. super(props)
.
. this.state = {
. message: 'Welcome to React world'
. }
. }
.
. render() {
. return (
. <div>
. <h1>{this.state.message}</h1>
. </div>
. )
. }
.}
.
L'state est similaire aux props, mais il est privé et entièrement contrôlé
par le composant, c'est-à-dire qu'il n'est accessible à aucun autre
composant tant que le composant propriétaire ne décide pas de le
transmettre.
Retour au sommet
.
Que sont les props dans React ?
Les props sont des entrées de composants. Ce sont des valeurs
uniques ou des objets contenant un ensemble de valeurs qui sont
transmises aux composants lors de la création à l'aide d'une
convention de dénomination similaire aux attributs de balise HTML. Ce
sont des données transmises d'un composant parent à un composant
enfant.
L'objectif principal des props dans React est de fournir les
fonctionnalités de composant suivantes :
○ Transmettez des données personnalisées à votre composant.
○ Déclencher des changements d'state.
○ Utiliser via la méthode this.props.reactPropdu composant
interne render().
. Par exemple, créons un élément avec reactPropla propriété :
<Element reactProp={'1'} />
Ce reactPropnom (ou tout ce que vous avez trouvé) devient alors une
propriété attachée à l'objet props natif de React qui existe déjà à
l'origine sur tous les composants créés à l'aide de la bibliothèque
React.
props.reactProp
.
Retour au sommet
.
Quelle est la différence entre l'state et les props ?
Les props et l'state sont des objets JavaScript simples. Alors que les
deux contiennent des informations qui influencent la sortie du rendu,
ils sont différents dans leur fonctionnalité par rapport au
composant. Les props sont transmis au composant de la même
manière que les paramètres de fonction, tandis que l'state est géré
dans le composant de la même manière que les variables déclarées
dans une fonction.
Retour au sommet
.
Pourquoi ne devrions-nous pas mettre à jour l'state directement ?
Si vous essayez de mettre à jour l'state directement, il ne restituera
pas le composant.
//Wrong
. this.state.message = 'Hello world'
Utilisez plutôt la setState()méthode. Il planifie une mise à jour de

l'objet d'state d'un composant. Lorsque l'state change, le composant
répond en effectuant un nouveau rendu.
//Correct
. this.setState({ message: 'Hello World' })
Remarque : Vous pouvez affecter directement l'objet d'state soit dans

le constructeur , soit en utilisant la syntaxe de déclaration de champ
de classe du dernier javascript.
Retour au sommet
.
Quel est le but de la fonction de rappel en tant qu'argument
de setState()?
La fonction de rappel est invoquée lorsque setState est terminé et que
le composant est rendu. Comme elle setState()est asynchrone , la
fonction de rappel est utilisée pour toute action de publication.
Remarque : Il est recommandé d'utiliser la méthode du cycle de vie
plutôt que cette fonction de rappel.
setState({ name: 'John' }, () => console.log('The name has updated
and component re-rendered'))
Retour au sommet
.
Quelle est la différence entre la gestion des événements HTML et
React ?
Voici quelques-unes des principales différences entre la gestion des
événements HTML et React,
○ En HTML, le nom de l'événement représente généralement
en minuscules comme convention :
<button onclick='activateLasers()'>
Alors que dans React, il suit la convention camelCase :

<button onClick={activateLasers}>
○ En HTML, vous pouvez revenir falsepour empêcher le

comportement par défaut :
<a href='#' onclick='console.log("The link was clicked."); return
false;' />
Alors que dans React, vous devez

appeler preventDefault()explicitement :
function handleClick(event) {
○ event.preventDefault()
○ console.log('The link was clicked.')
○ }
○ En HTML, vous devez invoquer la fonction en ajoutant () Alors que

dans React, vous ne devez pas ajouter ()le nom de la fonction. (se
référer à la fonction "activateLasers" dans le premier point par
exemple)
Retour au sommet
.
Comment lier des méthodes ou des gestionnaires d'événements
dans les rappels JSX ?
Il y a 3 façons possibles d'y parvenir :
○ Liaison dans le constructeur : dans les classes JavaScript, les
méthodes ne sont pas liées par défaut. La même chose s'applique

aux gestionnaires d'événements React définis en tant que
méthodes de classe. Normalement, nous les lions dans le
constructeur.
class Foo extends Component {
○ constructor(props) {
○ super(props);
○ this.handleClick = this.handleClick.bind(this);
○ }
○ handleClick() {
○ console.log('Click happened');
○ }
○ render() {
○ return <button onClick={this.handleClick}>Click Me</button>;
○ }
○ }
○ Syntaxe des champs de classe publique : si vous n'aimez pas

utiliser l'approche de liaison, la syntaxe des champs de classe
publique peut être utilisée pour lier correctement les rappels.
handleClick = () => {
○ console.log('this is:', this)
○ }
<button onClick={this.handleClick}>
○ {'Click me'}
○ </button>
○ Fonctions fléchées dans les rappels : vous pouvez utiliser les

fonctions fléchées directement dans les rappels.
handleClick() {
○ console.log('Click happened');
○ }
○ render() {
○ return <button onClick={() => this.handleClick()}>Click Me</
button>;
○ }
. Remarque : si le rappel est transmis en tant que prop aux composants
enfants, ces composants peuvent effectuer un nouveau rendu
supplémentaire. Dans ces cas, il est préférable d'utiliser une approche
de syntaxe de champs de classe publique en.bind() tenant compte des
performances.
Retour au sommet
.
.
Comment passer un paramètre à un gestionnaire d'événements
ou à un rappel ?
Vous pouvez utiliser une fonction fléchée pour envelopper
un gestionnaire d'événements et passer des paramètres :
<button onClick={() => this.handleClick(id)} />
C'est l'équivalent d'appeler .bind:

<button onClick={this.handleClick.bind(this, id)} />
En dehors de ces deux approches, vous pouvez également passer des

arguments à une fonction définie comme fonction fléchée
<button onClick={this.handleClick(id)} />
. handleClick = (id) => () => {
. console.log("Hello, your ticket number is", id)
. };
Retour au sommet
.
Que sont les événements synthétiques dans React ?
SyntheticEventest un wrapper multi-navigateur autour de l'événement
natif du navigateur. Son API est identique à l'événement natif du
navigateur, y compris stopPropagation()et preventDefault(), sauf que
les événements fonctionnent de manière identique sur tous les
navigateurs.
Retour au sommet
.
Que sont les expressions conditionnelles en ligne ?
Vous pouvez utiliser des instructions if ou des expressions
ternaires disponibles dans JS pour restituer conditionnellement des
expressions. En dehors de ces approches, vous pouvez également
intégrer toutes les expressions dans JSX en les enveloppant
d'accolades, puis suivies de l'opérateur logique JS &&.
<h1>Hello!</h1>
.{
. messages.length > 0 && !isLogin?
. <h2>
. You have {messages.length} unread messages.
. </h2>
. :
. <h2>
. You don't have unread messages.
. </h2>
.}
Retour au sommet
.
Qu'est-ce que la propriété "clé" et quel est l'avantage de l'utiliser
dans des tableaux d'éléments ?
A keyest un attribut de chaîne spécial que vous devez inclure lors de
la création de tableaux d'éléments. L'accessoire clé aide React à
identifier les éléments qui ont été modifiés, ajoutés ou supprimés.
Le plus souvent nous utilisons l'ID de nos données comme clé :
const todoItems = todos.map((todo) =>
. <li key={todo.id}>
. {todo.text}
. </li>
.)
Lorsque vous ne disposez pas d'ID stables pour les éléments rendus,
vous pouvez utiliser l' index d'élément comme clé en dernier recours :
const todoItems = todos.map((todo, index) =>
. <li key={index}>
. {todo.text}
. </li>
. )
Noter:
○ L'utilisation d' index pour les clés n'est pas recommandée si
l'ordre des éléments peut changer. Cela peut avoir un impact

négatif sur les performances et peut entraîner des problèmes avec
l'state des composants.
○ Si vous extrayez l'élément de liste en tant que composant séparé,
appliquez les clés sur le composant de liste au lieu de lila balise.

○ Il y aura un message d'avertissement dans la console si le keyprop
n'est pas présent sur les éléments de la liste.

Retour au sommet
.
A quoi servent les refs ?
La référence est utilisée pour renvoyer une référence à
l'élément. Ils doivent être évités dans la plupart des cas, cependant,
ils peuvent être utiles lorsque vous avez besoin d'un accès direct à
l'élément DOM ou à une instance d'un composant.
Retour au sommet
.
.
Comment créer des références ?
Il existe deux approches
○ Il s'agit d'une approche récemment ajoutée. Les références sont
créées à l'aide React.createRef()de la méthode et attachées aux

éléments React via l' refattribut. Afin d'utiliser des références dans
tout le composant, affectez simplement la référence à la propriété
d'instance dans le constructeur.
class MyComponent extends React.Component {
○ super(props)
○ this.myRef = React.createRef()
○ }
○ render() {
○ return <div ref={this.myRef} />
○ }
○ }
○ Vous pouvez également utiliser l'approche des rappels de

référence quelle que soit la version de React. Par exemple,
l'élément d'entrée du composant de barre de recherche est
accessible comme suit,
class SearchBar extends Component {
○ super(props);
○ this.txtSearch = null;
○ this.state = { term: '' };
○ this.setInputSearchRef = e => {
○ this.txtSearch = e;
○ }
○ }
○ onInputChange(event) {
○ this.setState({ term: this.txtSearch.value });
○ }
○ render() {
○ return (
○ <input
○ value={this.state.term}
○ onChange={this.onInputChange.bind(this)}
○ ref={this.setInputSearchRef} />
○ );
○ }
○ }
○
. Vous pouvez également utiliser des références dans des composants

de fonction à l'aide de fermetures . Remarque : Vous pouvez
également utiliser des rappels de référence en ligne même si ce n'est
pas une approche recommandée.
Retour au sommet
.
Que sont les références avancées ?
Le transfert de référence est une fonctionnalité qui permet à certains
composants de prendre une référence qu'ils reçoivent et de la
transmettre plus bas à un enfant.
const ButtonElement = React.forwardRef((props, ref) => (
. <button ref={ref} className="CustomButton">
. {props.children}
. </button>
. ));
.
. // Create ref to the DOM button:
. const ref = React.createRef();
. <ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>
Retour au sommet
.
Quelle est l'option préférée avec les références de rappel et
findDOMNode() ?
Il est préférable d'utiliser des références de rappel plutôt que
l' findDOMNode()API. Car findDOMNode()empêche certaines
améliorations de React à l'avenir.
L' approche héritée consistant à utiliserfindDOMNode :
class MyComponent extends Component {
. componentDidMount() {
. findDOMNode(this).scrollIntoView()
. }
.
. render() {
. return <div />
. }
.}
L'approche recommandée est la suivante :

class MyComponent extends Component {
. constructor(props){
. super(props);
. this.node = createRef();
. }
. this.node.current.scrollIntoView();
. }
.
. render() {
. return <div ref={this.node} />
. }
. }
Retour au sommet
.
Pourquoi les références de chaîne sont-elles héritées ?
Si vous avez déjà travaillé avec React, vous connaissez peut-être une
ancienne API où l' refattribut est une chaîne, comme ref={'textInput'},
et le nœud DOM est accessible en tant que this.refs.textInput. Nous
vous le déconseillons car les références de chaîne ont des problèmes
ci-dessous et sont considérées comme héritées. Les références de
chaîne ont été supprimées dans React v16 .
○ Ils forcent React à garder une trace du composant en cours
d'exécution . Ceci est problématique car cela rend le module de

réaction avec state et provoque donc des erreurs étranges lorsque
le module de réaction est dupliqué dans le bundle.
○ Ils ne sont pas composables - si une bibliothèque met une
référence sur l'enfant passé, l'utilisateur ne peut pas mettre une

autre référence dessus. Les références de rappel sont
parfaitement composables.
○ Ils ne fonctionnent pas avec une analyse statique comme
Flow. Flow ne peut pas deviner la magie que le framework fait pour

faire apparaître la chaîne ref sur this.refs, ainsi que son type (qui
peut être différent). Les références de rappel sont plus conviviales
pour l'analyse statique.
○ Cela ne fonctionne pas comme la plupart des gens s'y attendraient
avec le modèle "rappel de rendu" (par exemple)class

MyComponent extends Component {
○ renderRow = (index) => {
○ // This won't work. Ref will get attached to DataTable rather than
MyComponent:
○ return <input ref={'input-' + index} />;
○
○ // This would work though! Callback refs are awesome.
○ return <input ref={input => this['input-' + index] = input} />;
○ }
○
○ render() {
○ return <DataTable data={this.props.data}
renderRow={this.renderRow} />
○ }
○ }
Retour au sommet
.
Qu'est-ce que le DOM virtuel ?
Le DOM virtuel (VDOM) est une représentation en mémoire du Real
DOM . La représentation d'une UI est conservée en mémoire et
synchronisée avec le "vrai" DOM. C'est une étape qui se produit entre
l'appel de la fonction de rendu et l'affichage des éléments à
l'écran. Tout ce processus s'appelle la réconciliation .
Retour au sommet
.
Comment fonctionne le DOM virtuel ?
Le DOM virtuel fonctionne en trois étapes simples.
○ Chaque fois que des données sous-jacentes changent, l'intégralité
de l'interface utilisateur est restituée dans la représentation du

DOM virtuel.
○ Ensuite, la différence entre la représentation DOM précédente et la

nouvelle est calculée.
○
○ Une fois les calculs effectués, le vrai DOM sera mis à jour avec
uniquement les choses qui ont réellement changé.
Retour au sommet
.
Quelle est la différence entre Shadow DOM et Virtual DOM ?
Le Shadow DOM est une technologie de navigateur conçue
principalement pour les variables de portée et les CSS dans les
composants Web . Le DOM virtuel est un concept implémenté par des
bibliothèques en JavaScript au-dessus des API de navigateur.
Retour au sommet
.
Qu'est-ce que React Fiber ?
Fiber est le nouveau moteur de réconciliation ou la réimplémentation
de l'algorithme de base dans React v16. L'objectif de React Fiber est
d'augmenter sa pertinence pour des domaines tels que l'animation, la
mise en page, les gestes, la possibilité de mettre en pause,
d'abandonner ou de réutiliser le travail et d'attribuer la priorité à
différents types de mises à jour ; et de nouvelles primitives de
concurrence.
Retour au sommet
.
Quel est l'objectif principal de React Fiber ?
L'objectif de React Fiber est d'augmenter sa pertinence pour des
domaines tels que l'animation, la mise en page et les gestes. Sa
principale caractéristique est le rendu incrémental : la possibilité de
diviser le travail de rendu en morceaux et de le répartir sur plusieurs
images.
de la documentation
Ses principaux objectifs sont :
○ Possibilité de diviser le travail interruptible en morceaux.
○ Capacité à hiérarchiser, rebaser et réutiliser le travail en cours.
○ Capacité à faire des allers-retours entre parents et enfants pour
prendre en charge la mise en page dans React.

○ Possibilité de renvoyer plusieurs éléments à partir de render().
○ Meilleure prise en charge des limites d'erreur.
Retour au sommet
.
Que sont les composants contrôlés ?
Un composant qui contrôle les éléments d'entrée dans les formulaires
lors d'une entrée utilisateur ultérieure est appelé Controlled
Component , c'est-à-dire que chaque mutation d'state aura une
fonction de gestionnaire associée.
Par exemple, pour écrire tous les noms en majuscules, nous utilisons
handleChange comme ci-dessous,
handleChange(event) {
. this.setState({value: event.target.value.toUpperCase()})
.}
Retour au sommet
.
Que sont les composants non contrôlés ?
Les composants non contrôlés sont ceux qui stockent leur propre
state en interne, et vous interrogez le DOM à l'aide d'une référence
pour trouver sa valeur actuelle lorsque vous en avez besoin. C'est un
peu plus comme le HTML traditionnel.
Dans le composant UserProfile ci-dessous, l' nameentrée est
accessible à l'aide de ref.
class UserProfile extends React.Component {
. super(props)
. this.handleSubmit = this.handleSubmit.bind(this)
. this.input = React.createRef()
. }
.
. handleSubmit(event) {
. alert('A name was submitted: ' + this.input.current.value)
. event.preventDefault()
. }
.
. render() {
. return (
. <form onSubmit={this.handleSubmit}>
. <label>
. {'Name:'}
. <input type="text" ref={this.input} />
. </label>
. <input type="submit" value="Submit" />
. </form>
. );
. }
. }
Dans la plupart des cas, il est recommandé d'utiliser des composants

contrôlés pour implémenter des formulaires. Dans un composant
contrôlé, les données de formulaire sont gérées par un composant
React. L'alternative est les composants non contrôlés, où les données
de formulaire sont gérées par le DOM lui-même.
Retour au sommet
.
Quelle est la différence entre createElement et cloneElement ?
Les éléments JSX seront transpilés en React.createElement()fonctions
pour créer des éléments React qui seront utilisés pour la
.
représentation objet de l'interface

utilisateur. Considérant cloneElementqu'il est utilisé pour cloner un
élément et lui transmettre de nouveaux props.
Retour au sommet
.
Qu'est-ce que Lifting State Up dans React ?
Lorsque plusieurs composants doivent partager les mêmes données
changeantes, il est recommandé de remonter l'state partagé
jusqu'à leur ancêtre commun le plus proche. Cela signifie que si deux
composants enfants partagent les mêmes données de son parent,
déplacez l'state vers le parent au lieu de conserver l'state local dans
les deux composants enfants.
Retour au sommet
.
Quelles sont les différentes phases du cycle de vie des
composants ?
Le cycle de vie des composants comporte trois phases de cycle de vie
distinctes :
○ Montage : le composant est prêt à être monté dans le navigateur
DOM. Cette phase couvre l'initialisation à partir des méthodes , ,

et du
cycle constructor()de getDerivedStateFromProps()vie render().co
mponentDidMount()
○ Mise à jour : dans cette phase, le composant est mis à jour de

deux manières, en envoyant les nouveaux props et en mettant à
jour l'state depuis setState()ou forceUpdate(). Cette phase couvre
les méthodes getDerivedStateFromProps(), shouldComponentUpd
ate(), render()et du cycle getSnapshotBeforeUpdate()de
vie.componentDidUpdate()
○ Démontage : dans cette dernière phase, le composant n'est pas

nécessaire et est démonté du navigateur DOM. Cette phase
comprend componentWillUnmount()la méthode du cycle de vie.
. Il convient de mentionner que React a en interne un concept de

phases lors de l'application des modifications au DOM. Ils sont
séparés comme suit
○ Rendu Le composant sera rendu sans aucun effet
secondaire. Cela s'applique aux composants Pure et dans cette

phase, React peut mettre en pause, abandonner ou redémarrer le
rendu.
○ Pré-validation Avant que le composant n'applique réellement les
modifications au DOM, il y a un moment qui permet à React de lire
à partir du DOM via le getSnapshotBeforeUpdate().
○ Commit React fonctionne avec le DOM et exécute les cycles de

vie finaux respectivement componentDidMount()pour le
montage, componentDidUpdate()la mise à jour
et componentWillUnmount()le démontage.
. React 16.3+ Phases (ou une version interactive )
.
Avant de réagir 16.3
.
Retour au sommet
.
Quelles sont les méthodes de cycle de vie de React ?
Avant de réagir 16.3
○ componentWillMount : exécuté avant le rendu et utilisé pour la
configuration au niveau de l'application dans votre composant

racine.
○ componentDidMount : Exécuté après le premier rendu et ici,
toutes les requêtes AJAX, les mises à jour DOM ou d'state et la

configuration des écouteurs d'événement doivent se produire.
○ componentWillReceiveProps : Exécuté lors de la mise à jour d'un
accessoire particulier pour déclencher des transitions d'state.

○ shouldComponentUpdate : détermine si le composant sera mis à
jour ou non. Par défaut, il renvoie true. Si vous êtes sûr que le

composant n'a pas besoin d'être rendu après la mise à jour de
l'state ou des props, vous pouvez renvoyer une valeur
fausse. C'est un excellent endroit pour améliorer les performances
car cela vous permet d'empêcher un nouveau rendu si le
composant reçoit un nouvel accessoire.
○ componentWillUpdate : exécuté avant de restituer le composant
lorsqu'il y a des changements d'props et d'state confirmés

par shouldComponentUpdate()ce qui renvoie true.
○ componentDidUpdate : il est principalement utilisé pour mettre à
jour le DOM en réponse à des changements de propriété ou

d'state.
○ componentWillUnmount : il sera utilisé pour annuler toute
requête réseau sortante ou supprimer tous les écouteurs

d'événements associés au composant.
. Réagir 16.3+
○ getDerivedStateFromProps : invoqué juste avant
l'appel render()et invoqué à chaque rendu. Cela existe pour les

rares cas d'utilisation où vous avez besoin d'un state dérivé. A
lire si vous avez besoin d'un state dérivé .
○ componentDidMount : exécuté après le premier rendu et où
toutes les requêtes AJAX, les mises à jour DOM ou d'state et la

configuration des écouteurs d'événement doivent se produire.
○ shouldComponentUpdate : détermine si le composant sera mis à
jour ou non. Par défaut, il renvoie true. Si vous êtes sûr que le

composant n'a pas besoin d'être rendu après la mise à jour de
l'state ou des props, vous pouvez renvoyer une valeur
fausse. C'est un excellent endroit pour améliorer les performances
car cela vous permet d'empêcher un nouveau rendu si le
composant reçoit un nouvel accessoire.
○ getSnapshotBeforeUpdate : exécuté juste avant que la sortie
rendue ne soit validée dans le DOM. Toute valeur renvoyée par this

sera transmise à componentDidUpdate(). Ceci est utile pour
capturer des informations à partir du DOM, c'est-à-dire la position
de défilement.
○ componentDidUpdate : il est principalement utilisé pour mettre à
jour le DOM en réponse à des changements de propriété ou

d'state. Cela ne se déclenchera pas
si shouldComponentUpdate()renvoie false.
○ componentWillUnmount Il sera utilisé pour annuler toute
demande réseau sortante ou supprimer tous les écouteurs

d'événements associés au composant.
Retour au sommet
.
Que sont les composants d'ordre supérieur ?
Un composant d'ordre supérieur ( HOC ) est une fonction qui prend un
composant et renvoie un nouveau composant. Fondamentalement,
c'est un modèle dérivé de la nature compositionnelle de React.
Nous les appelons composants purs car ils peuvent accepter
n'importe quel composant enfant fourni dynamiquement, mais ils ne
modifieront ni ne copieront aucun comportement de leurs composants
d'entrée.
const EnhancedComponent =
higherOrderComponent(WrappedComponent)
HOC peut être utilisé pour de nombreux cas d'utilisation :

○ Réutilisation de code, abstraction logique et bootstrap.
○ Détournement de rendu.
○ Abstraction et manipulation d'state.
○ Manipulation des props.
Retour au sommet
.
Comment créer un proxy d'props pour le composant HOC ?
Vous pouvez ajouter/modifier les props passés au composant en
utilisant le modèle de proxy d'props comme ceci :
function HOC(WrappedComponent) {
. return class Test extends Component {
. render() {
. const newProps = {
. title: 'New Header',
. footer: false,
. showFeatureX: false,
. showFeatureY: true
. }
.
. return <WrappedComponent {...this.props} {...newProps} />
. }
. }
.}
Retour au sommet
.
Qu'est-ce que le contexte ?
Le contexte fournit un moyen de transmettre des données via
l'arborescence des composants sans avoir à transmettre
manuellement les props à chaque niveau.
Par exemple, les utilisateurs authentifiés, les préférences locales, les
thèmes d'interface utilisateur doivent être accessibles dans
l'application par de nombreux composants.
const {Provider, Consumer} = React.createContext(defaultValue)
Retour au sommet
.
Qu'est-ce qu'un accessoire pour enfants ?
Children est un accessoire ( this.props.children) qui vous permet de
transmettre des composants en tant que données à d'autres
composants, comme tout autre accessoire que vous
utilisez. L'arborescence des composants placée entre les balises
d'ouverture et de fermeture du composant sera transmise à ce
composant en tant que childrenprop.
Il existe plusieurs méthodes disponibles dans l'API React pour
travailler avec cet accessoire. Ceux-ci
incluent React.Children.map, React.Children.forEach, React.Children.c
ount, React.Children.only, React.Children.toArray.
Une utilisation simple de l'accessoire pour enfants ressemble à ci-
dessous,
const MyDiv = React.createClass({
. render: function() {
. return <div>{this.props.children}</div>
. }
. })
.
. ReactDOM.render(
. <MyDiv>
. <span>{'Hello'}</span>
. <span>{'World'}</span>
. </MyDiv>,
. node
.)
Retour au sommet
.
Comment écrire des commentaires dans React ?
Les commentaires dans React/JSX sont similaires aux commentaires
JavaScript Multiline mais sont entourés d'accolades.
Commentaires sur une seule ligne :
<div>
. {/* Single-line comments(In vanilla JavaScript, the single-line
comments are represented by double slash(//)) */}
. {`Welcome ${user}, let's play React`}
. </div>
Commentaires multi-lignes :
<div>
. {/* Multi-line comments for more than
. one line */}
. {`Welcome ${user}, let's play React`}
. </div>
Retour au sommet
.
Quel est le but d'utiliser un super constructeur avec l'argument
props ?
Un constructeur de classe enfant ne peut pas utiliser de thisréférence
tant que la super()méthode n'a pas été appelée. Il en va de même pour
les sous-classes ES6. La principale raison de passer le paramètre
props à super()call est d'accéder this.propsà vos constructeurs
enfants.
Passe d'props :
. super(props)
.
. console.log(this.props) // prints { name: 'John', age: 42 }
. }
.}
.
Ne pas passer d'props :

. super()
.
. console.log(this.props) // prints undefined
.
. // but props parameter is still available
. console.log(props) // prints { name: 'John', age: 42 }
. }
.
. render() {
. // no difference outside constructor
. console.log(this.props) // prints { name: 'John', age: 42 }
. }
.}
Les extraits de code ci-dessus révèlent qu'il this.propsn'y a de

différence qu'au sein du constructeur. Il en serait de même en dehors
du constructeur.
Retour au sommet
.
Qu'est-ce que la réconciliation ?
Lorsque les props ou l'state d'un composant changent, React décide
si une mise à jour réelle du DOM est nécessaire en comparant
l'élément nouvellement renvoyé avec celui précédemment
rendu. Lorsqu'ils ne sont pas égaux, React mettra à jour le DOM. Ce
processus s'appelle la réconciliation .
Retour au sommet
.
Comment définir l'state avec un nom de clé dynamique ?
Si vous utilisez ES6 ou le transpileur Babel pour transformer votre
code JSX, vous pouvez le faire avec des noms de propriétés calculés .
handleInputChange(event) {
. this.setState({ [event.target.id]: event.target.value })
.}
Retour au sommet
.
Quelle serait l'erreur courante d'appeler la fonction à chaque fois
que le composant s'affiche ?
.
Vous devez vous assurer que la fonction n'est pas appelée lors du
passage de la fonction en tant que paramètre.
render() {
. // Wrong: handleClick is called instead of passed as a reference!
. return <button onClick={this.handleClick()}>{'Click Me'}</button>
.}
Au lieu de cela, passez la fonction elle-même sans parenthèse :

render() {
. // Correct: handleClick is passed as a reference!
. return <button onClick={this.handleClick}>{'Click Me'}</button>
.}
Retour au sommet
.
La fonction paresseuse prend-elle en charge les exportations
nommées ?
Non, React.lazyla fonction ne prend actuellement en charge que les
exportations par défaut. Si vous souhaitez importer des modules
nommés exports, vous pouvez créer un module intermédiaire qui le
réexporte par défaut. Cela garantit également que le secouage des
arbres continue de fonctionner et ne tire pas sur les composants
inutilisés. Prenons un fichier de composant qui exporte plusieurs
composants nommés,// MoreComponents.js
. export const SomeComponent = /* ... */;
. export const UnusedComponent = /* ... */;
et réexporter MoreComponents.jsles composants dans un fichier

intermédiaireIntermediateComponent.js// IntermediateComponent.js
. export { SomeComponent as default } from "./MoreComponents.js";
Vous pouvez maintenant importer le module en utilisant la fonction

paresseuse comme ci-dessous,import React, { lazy } from 'react';
. const SomeComponent = lazy(() => import("./
IntermediateComponent.js"));
Retour au sommet
.
Pourquoi React utilise l' attribut classNameover ?class
classest un mot-clé en JavaScript et JSX est une extension de
JavaScript. C'est la principale raison pour laquelle React utilise à
la classNameplace de class. Passez une chaîne
comme classNameaccessoire.
render() {
. return <span className={'menu navigation-menu'}>{'Menu'}</span>
.}
Retour au sommet
.
Que sont les fragments ?
C'est un modèle courant dans React qui est utilisé pour qu'un
composant renvoie plusieurs éléments. Les fragments vous
permettent de regrouper une liste d'enfants sans ajouter de nœuds
supplémentaires au DOM.
render() {
. return (
. <React.Fragment>
. <ChildA />
. <ChildB />
. <ChildC />
. </React.Fragment>
. )
.}
Il existe également une syntaxe plus courte , mais elle n'est pas prise
en charge par de nombreux outils :
render() {
. return (
. <>
. <ChildA />
. <ChildB />
. <ChildC />
. </>
. )
. }
Retour au sommet
.
Pourquoi les fragments sont meilleurs que les conteneurs divs ?
Vous trouverez ci-dessous la liste des raisons,
○ Les fragments sont un peu plus rapides et utilisent moins de
mémoire en ne créant pas de nœud DOM supplémentaire. Cela n'a

un réel avantage que sur les arbres très grands et profonds.
○ Some CSS mechanisms like Flexbox and CSS Grid have a special
○
parent-child relationships, and adding divs in the middle makes it

hard to keep the desired layout.
○ The DOM Inspector is less cluttered.
Back to Top
.
What are portals in React?
Portal is a recommended way to render children into a DOM node that
exists outside the DOM hierarchy of the parent component.
ReactDOM.createPortal(child, container)
The first argument is any render-able React child, such as an element,

string, or fragment. The second argument is a DOM element.
Back to Top
.
What are stateless components?
Si le comportement d'un composant est indépendant de son state, il
peut s'agir d'un composant sans state. Vous pouvez utiliser une
fonction ou une classe pour créer des composants sans state. Mais à
moins que vous n'ayez besoin d'utiliser un hook de cycle de vie dans
vos composants, vous devriez opter pour des composants de
fonction. Il y a beaucoup d'avantages si vous décidez d'utiliser des
composants de fonction ici ; ils sont faciles à écrire, à comprendre et à
tester, un peu plus rapides, et vous pouvez éviter thiscomplètement le
mot-clé.
Retour au sommet
.
Que sont les composants avec state ?
Si le comportement d'un composant dépend de l' state du composant,
il peut être qualifié de composant avec state. Ces composants avec
state sont toujours des composants de classe et ont un state qui est
initialisé dans le fichier constructor.
class App extends Component {
. super(props)
. this.state = { count: 0 }
. }
.
. render() {
. // ...
. }
.}
.
Réagissez à la mise à jour 16.8 :

Les Hooks vous permettent d'utiliser l'state et d'autres fonctionnalités
de React sans écrire de classes.
Le composant fonctionnel équivalent
import React, {useState} from 'react';
.
. const App = (props) => {
. const [count, setCount] = useState(0);
.
. return (
. // JSX
. )
. }
Retour au sommet
.
Comment appliquer la validation sur les props dans React ?
Lorsque l'application s'exécute en mode développement , React vérifie
automatiquement tous les props que nous avons définis sur les
composants pour s'assurer qu'ils ont le bon type . Si le type est
incorrect, React générera des messages d'avertissement dans la
console. Il est désactivé en mode production en raison de l'impact sur
les performances. Les props obligatoires sont définis avec isRequired.
L'ensemble des types d'props prédéfinis :
○ PropTypes.number
○ PropTypes.string
○ PropTypes.array
○ PropTypes.object
○ PropTypes.func
○ PropTypes.node
○ PropTypes.element
○ PropTypes.bool
○ PropTypes.symbol
○ PropTypes.any
. Nous pouvons définir propTypespour Userle composant comme ci-

dessous :
import React from 'react'
. import PropTypes from 'prop-types'
.
. class User extends React.Component {
. static propTypes = {
. name: PropTypes.string.isRequired,
. age: PropTypes.number.isRequired
. }
.
. render() {
. return (
. <>
. <h1>{`Welcome, ${this.props.name}`}</h1>
. <h2>{Àge, ${this.props.age}`}</h2>
. </>
. )
. }
. }
Remarque : dans React v15.5 , les PropTypes ont été déplacés

de React.PropTypesla prop-typesbibliothèque.
Le composant fonctionnel équivalent
. import PropTypes from 'prop-types'
.
. function User({name, age}) {
. return (
. <>
. <h1>{`Welcome, ${name}`}</h1>
. <h2>{Àge, ${age}`}</h2>
. </>
. )
.}
.
. User.propTypes = {
. name: PropTypes.string.isRequired,
. age: PropTypes.number.isRequired
. }
Retour au sommet
.
Quels sont les avantages de React ?
Vous trouverez ci-dessous la liste des principaux avantages de React,
○ Augmente les performances de l'application avec Virtual DOM .
○ JSX rend le code facile à lire et à écrire.
○ Il rend à la fois côté client et côté serveur ( SSR ).
○ Facile à intégrer aux frameworks (Angular, Backbone) puisqu'il ne
s'agit que d'une bibliothèque de vues.

○ Des tests unitaires et d'intégration faciles à écrire avec des outils
tels que Jest.

Retour au sommet
.
Quelles sont les limites de React ?
Outre les avantages, il y a aussi quelques limitations de React,
○ React est juste une bibliothèque de vues, pas un framework
complet.
○ Il existe une courbe d'apprentissage pour les débutants qui
débutent dans le développement Web.

○ L'intégration de React dans un framework MVC traditionnel
nécessite une configuration supplémentaire.

○ La complexité du code augmente avec les modèles en ligne et
JSX.
○ Trop de composants plus petits conduisant à une ingénierie
excessive ou à un passe-partout.
Retour au sommet
.
Que sont les limites d'erreur dans React v16 ?
Les limites d'erreur sont des composants qui interceptent les erreurs
JavaScript n'importe où dans leur arborescence de composants
enfants, consignent ces erreurs et affichent une interface utilisateur
de secours au lieu de l'arborescence des composants qui a planté.
Un composant de classe devient une limite d'erreur s'il définit une
nouvelle méthode de cycle de vie appelée componentDidCatch(error,
info)or static getDerivedStateFromError() :
class ErrorBoundary extends React.Component {
. super(props)
. this.state = { hasError: false }
. }
.
. componentDidCatch(error, info) {
. // You can also log the error to an error reporting service
. logErrorToMyService(error, info)
. }
.
. static getDerivedStateFromError(error) {
. // Update state so the next render will show the fallback UI.
. return { hasError: true };
. }
.
. render() {
. if (this.state.hasError) {
. // You can render any custom fallback UI
. return <h1>{'Something went wrong.'}</h1>
. }
. return this.props.children
. }
.}
Après cela, utilisez-le comme composant régulier :

<ErrorBoundary>
. <MyWidget />
. </ErrorBoundary>
Retour au sommet
.
Comment les limites d'erreur sont-elles gérées dans React v15 ?
React v15 a fourni une prise en charge très basique des limites
d'erreur à l' aide de la unstable_handleErrorméthode. Il a été
renommé componentDidCatchdans React v16.
Retour au sommet
.
Quelles sont les méthodes recommandées pour la vérification de
type statique ?
Normalement, nous utilisons la bibliothèque
PropTypes ( React.PropTypesdéplacée dans un prop-typespackage
depuis React v15.5) pour la vérification de type dans les applications
React. Pour les grandes bases de code, il est recommandé d'utiliser
des vérificateurs de type statiques tels que Flow ou TypeScript, qui
effectuent une vérification de type au moment de la compilation et
fournissent des fonctionnalités d'auto-complétion.
Retour au sommet
.
A quoi sert le react-dompackage ?
Le react-dompackage fournit des méthodes spécifiques à DOM qui
peuvent être utilisées au niveau supérieur de votre application. La
plupart des composants ne sont pas nécessaires pour utiliser ce
module. Certaines des méthodes de ce paquet sont :
○ render()
○ hydrate()
○ unmountComponentAtNode()
○ findDOMNode()
○ createPortal()
Retour au sommet
.
.
A quoi sert la méthode render de react-dom?
Cette méthode est utilisée pour restituer un élément React dans le
DOM dans le conteneur fourni et renvoyer une référence au
composant. Si l'élément React a déjà été rendu dans le conteneur, il
effectuera une mise à jour sur celui-ci et ne fera muter le DOM que si
nécessaire pour refléter les dernières modifications.
ReactDOM.render(element, container, [callback])
.
Si le rappel facultatif est fourni, il sera exécuté après le rendu ou la

mise à jour du composant.
Retour au sommet
.
Qu'est-ce que ReactDOMServer ?
L' ReactDOMServerobjet vous permet de rendre les composants dans
un balisage statique (généralement utilisé sur le serveur de
nœud). Cet objet est principalement utilisé pour le rendu côté
serveur (SSR). Les méthodes suivantes peuvent être utilisées dans les
environnements de serveur et de navigateur :
○ renderToString()
○ renderToStaticMarkup()
. Par exemple, vous exécutez généralement un serveur Web basé sur

Node comme Express, Hapi ou Koa, et vous appelez renderToString
pour restituer votre composant racine à une chaîne, que vous envoyez
ensuite en réponse.
// using Express
. import { renderToString } from 'react-dom/server'
. import MyPage from './MyPage'
.
. app.get('/', (req, res) => {
. res.write('<!DOCTYPE html><html><head><title>My Page</title></
head><body>')
. res.write('<div id="content">')
. res.write(renderToString(<MyPage/>))
. res.write('</div></body></html>')
. res.end()
. })
Retour au sommet
.
Comment utiliser innerHTML dans React ?
L' dangerouslySetInnerHTML attribut est le remplacement de React
.
pour une utilisation innerHTML dans le navigateur DOM. Tout

comme innerHTML, il est risqué d'utiliser cet attribut compte tenu des
attaques de script intersite (XSS). Il vous suffit de passer un __html
objet en tant que clé et du texte HTML en tant que valeur.
Dans cet exemple, MyComponent utilise
l' dangerouslySetInnerHTMLattribut pour définir le balisage HTML :
function createMarkup() {
. return { __html: 'First · Second' }
.}
.
. function MyComponent() {
. return <div dangerouslySetInnerHTML={createMarkup()} />
.}
Retour au sommet
.
Comment utiliser les styles dans React ?
L' style attribut accepte un objet JavaScript avec des propriétés
camelCased plutôt qu'une chaîne CSS. Ceci est cohérent avec la
propriété JavaScript de style DOM, est plus efficace et empêche les
failles de sécurité XSS.
const divStyle = {
. color: 'blue',
. backgroundImage: 'url(' + imgUrl + ')'
. };
.
. function HelloWorldComponent() {
. return <div style={divStyle}>Hello World!</div>
.}
Les clés de style sont en camelCased afin d'être cohérentes avec

l'accès aux propriétés sur les nœuds DOM en JavaScript (par
exemple node.style.backgroundImage).
Retour au sommet
.
En quoi les événements sont-ils différents dans React ?
La gestion des événements dans les éléments React présente
quelques différences syntaxiques :
○ Les gestionnaires d'événements React sont nommés en utilisant
camelCase, plutôt qu'en minuscules.

○ Avec JSX, vous transmettez une fonction en tant que gestionnaire
d'événements, plutôt qu'une chaîne.

Retour au sommet
.
Que se passera-t-il si vous utilisez setState()dans le
constructeur ?
Lorsque vous utilisez setState(), outre l'affectation à l'state de l'objet,
React restitue également le composant et tous ses enfants. Vous
obtiendrez une erreur comme celle-ci : ne peut mettre à jour qu'un
composant monté ou de montage. Nous devons donc
utiliser this.statepour initialiser les variables à l'intérieur du
constructeur.
Retour au sommet
.
Quel est l'impact des index en tant que clés ?
Les clés doivent être stables, prévisibles et uniques afin que React
puisse suivre les éléments.
Dans l'extrait de code ci-dessous, la clé de chaque élément sera
basée sur l'ordre, plutôt que liée aux données représentées. Cela
limite les optimisations que React peut faire.
{todos.map((todo, index) =>
. <Todo
. {...todo}
. key={index}
. />
. )}
Si vous utilisez des données d'élément pour une clé unique, en

supposant que todo.id est unique à cette liste et stable, React serait
en mesure de réorganiser les éléments sans avoir besoin de les
réévaluer autant.
{todos.map((todo) =>
. <Todo {...todo}
. key={todo.id} />
. )}
Retour au sommet
.
Est-ce bon à
utiliser setState()en componentWillMount()méthode ?
Oui, il est sûr d'utiliser la
méthode setState()intérieure componentWillMount(). Mais en même
temps, il est recommandé d'éviter l'initialisation asynchrone
dans componentWillMount()la méthode du cycle de
vie. componentWillMount()est appelé immédiatement avant le
montage. Il est appelé avant render(), donc la définition de l'state dans
cette méthode ne déclenchera pas de nouveau rendu. Évitez
d'introduire des effets secondaires ou des abonnements dans cette
méthode. Nous devons nous assurer que les appels asynchrones pour
l'initialisation des composants se sont produits
dans componentDidMount()au lieu de componentWillMount().
componentDidMount() {
. axios.get(àpi/todos`)
. .then((result) => {
. this.setState({
. messages: [...result.data]
. })
. })
. }
Retour au sommet
.
Que se passera-t-il si vous utilisez des props dans leur state
initial ?
Si les props du composant sont modifiés sans que le composant soit
actualisé, la nouvelle valeur de l'accessoire ne sera jamais affichée car
la fonction constructeur ne mettra jamais à jour l'state actuel du
composant. L'initialisation de l'state à partir des props ne s'exécute
que lorsque le composant est créé pour la première fois.
Le composant ci-dessous n'affichera pas la valeur d'entrée mise à
jour :
. super(props)
.
. this.state = {
. records: [],
. inputValue: this.props.inputValue
. };
. }
.
. render() {
. return <div>{this.state.inputValue}</div>
. }
.}
L'utilisation d'props dans la méthode de rendu mettra à jour la valeur :

.

. super(props)
.
. this.state = {
. record: []
. }
. }
.
. render() {
. return <div>{this.props.inputValue}</div>
. }
.}
Retour au sommet
.
Comment rendez-vous conditionnellement les composants ?
Dans certains cas, vous souhaitez rendre différents composants en
fonction de certains states. JSX ne rend pas falseou undefined, vous
pouvez donc utiliser le court-circuit conditionnel pour rendre une
partie donnée de votre composant uniquement si une certaine
condition est vraie.
const MyComponent = ({ name, address }) => (
. <div>
. <h2>{name}</h2>
. {address &&
. <p>{address}</p>
. }
. </div>
.)
Si vous avez besoin d'une if-elsecondition, utilisez l' opérateur

ternaire .
const MyComponent = ({ name, address }) => (
. <div>
. <h2>{name}</h2>
. {address
. ? <p>{address}</p>
. : <p>{'Address is not available'}</p>
. }
. </div>
. )
.
Retour au sommet
.
Pourquoi devons-nous être prudents lors de la diffusion d'props
sur des éléments DOM ?
Lorsque nous diffusons des props , nous courons le risque d'ajouter
des attributs HTML inconnus, ce qui est une mauvaise pratique. Au
lieu de cela, nous pouvons utiliser la déstructuration des props
avec ...restl'opérateur, de sorte qu'il n'ajoutera que les props requis.
Par exemple,
const ComponentA = () =>
. <ComponentB isDisplay={true} className={'componentStyle'} />
.
. const ComponentB = ({ isDisplay, ...domProps }) =>
. <div {...domProps}>{'ComponentB'}</div>
Retour au sommet
.
Comment utilisez-vous les décorateurs dans React ?
Vous pouvez décorer vos composants de classe , ce qui revient à
passer le composant dans une fonction. Les décorateurs sont un
moyen flexible et lisible de modifier la fonctionnalité des composants.
@setTitle('Profile')
. class Profile extends React.Component {
. //....
.}
.
. /*
. title is a string that will be set as a document title
. WrappedComponent is what our decorator will receive when
. put directly above a component class as seen in the example above
. */
. const setTitle = (title) => (WrappedComponent) => {
. return class extends React.Component {
. document.title = title
. }
.
. render() {
. return <WrappedComponent {...this.props} />
. }
. }
.}
.
Remarque : les décorateurs sont une fonctionnalité qui n'a pas été
intégrée à ES7, mais qui sont actuellement une proposition de phase
2 .
Retour au sommet
.
Comment mémoriser un composant ?
Il existe des bibliothèques memoize disponibles qui peuvent être
utilisées sur des composants de fonction.
Par exemple moizela bibliothèque peut mémoriser le composant dans
un autre composant.
import moize from 'moize'
. import Component from './components/Component' // this module
exports a non-memoized component
.
. const MemoizedFoo = moize.react(Component)
.
. const Consumer = () => {
. <div>
. {'I will memoize the following entry:'}
. <MemoizedFoo/>
. </div>
.}
Mise à jour : depuis React v16.6.0, nous avons un

fichier React.memo. Il fournit un composant d'ordre supérieur qui
mémorise le composant à moins que les props ne changent. Pour
l'utiliser, enveloppez simplement le composant à l'aide de React.memo
avant de l'utiliser.
const MemoComponent = React.memo(function
MemoComponent(props) {
. /* render using props */
. });
. OR
. export default React.memo(MyFunctionComponent);
Retour au sommet
.
Comment implémentez-vous le rendu côté serveur ou SSR ?
React est déjà équipé pour gérer le rendu sur les serveurs Node. Une
version spéciale du moteur de rendu DOM est disponible, qui suit le
même schéma que côté client.
import ReactDOMServer from 'react-dom/server'
. import App from './App'
.
. ReactDOMServer.renderToString(<App />)
Cette méthode affichera le code HTML normal sous forme de chaîne,

qui peut ensuite être placée dans le corps d'une page dans le cadre
de la réponse du serveur. Côté client, React détecte le contenu pré-
rendu et reprend de manière transparente là où il s'est arrêté.
Retour au sommet
.
Comment activer le mode production dans React ?
Vous devez utiliser la méthode de Webpack DefinePluginpour
définir NODE_ENVsur production, par laquelle il supprime des
éléments tels que la validation propType et des avertissements
supplémentaires. En dehors de cela, si vous minimisez le code, par
exemple, l'élimination du code mort d'Uglify pour supprimer le code et
les commentaires de développement uniquement, cela réduira
considérablement la taille de votre bundle.
Retour au sommet
.
Qu'est-ce que l'ARC et ses avantages ?
L' create-react-appoutil CLI vous permet de créer et d'exécuter
rapidement des applications React sans étape de configuration.
Créons l'application Todo en utilisant CRA :
# Installation
. $ npm install -g create-react-app
.
. # Create new project
. $ create-react-app todo-app
. $ cd todo-app
.
. # Build, test and run
. $ npm run build
. $ npm run test
. $ npm start
Il comprend tout ce dont nous avons besoin pour créer une application
React :
○ Prise en charge de la syntaxe React, JSX, ES6 et Flow.
○ Extras de langage au-delà de ES6 comme l'opérateur de
propagation d'objet.
○ CSS préfixé automatiquement, vous n'avez donc pas besoin de
-webkit- ou d'autres préfixes.
○ Un exécuteur de test unitaire interactif rapide avec prise en charge
intégrée des rapports de couverture.

○ Un serveur de développement en direct qui avertit des erreurs
courantes.
○ Un script de construction pour regrouper JS, CSS et des images
pour la production, avec des hachages et des cartes source.

Retour au sommet
.
Quel est l'ordre des méthodes de cycle de vie dans le montage ?
Les méthodes de cycle de vie sont appelées dans l'ordre suivant
lorsqu'une instance d'un composant est créée et insérée dans le DOM.
○ constructor()
○ static getDerivedStateFromProps()
○ render()
○ componentDidMount()
Retour au sommet
.
Quelles sont les méthodes de cycle de vie qui seront obsolètes
dans React v16 ?
Les méthodes de cycle de vie suivantes seront des pratiques de
codage dangereuses et seront plus problématiques avec le rendu
asynchrone.
○ componentWillMount()
○ componentWillReceiveProps()
○ componentWillUpdate()
. À partir de React v16.3, ces méthodes sont aliasées avec

un UNSAFE_préfixe et la version sans préfixe sera supprimée dans
React v17.
Retour au sommet
.
A quoi sert la getDerivedStateFromProps()méthode du cycle de
vie ?
La nouvelle méthode de cycle de vie
statique getDerivedStateFromProps()est invoquée après
l'instanciation d'un composant ainsi qu'avant son nouveau rendu. Il
peut renvoyer un objet pour mettre à jour l'state ou nullindiquer que
les nouveaux props ne nécessitent aucune mise à jour d'state.
. static getDerivedStateFromProps(props, state) {
. // ...
. }
.}
Cette méthode de cycle de vie componentDidUpdate()couvre tous les

cas d'utilisation de componentWillReceiveProps().
Retour au sommet
.
A quoi sert la getSnapshotBeforeUpdate()méthode du cycle de
vie ?
La nouvelle getSnapshotBeforeUpdate()méthode de cycle de vie est
appelée juste avant les mises à jour du DOM. La valeur de retour de
cette méthode sera transmise comme troisième paramètre
à componentDidUpdate().
. getSnapshotBeforeUpdate(prevProps, prevState) {
. // ...
. }
.}
Cette méthode de cycle de vie componentDidUpdate()couvre tous les

cas d'utilisation de componentWillUpdate().
Retour au sommet
.
Les Hooks remplacent-ils render props et les composants d'ordre
supérieur ?
render props et les composants d'ordre supérieur ne rendent qu'un
seul enfant, mais dans la plupart des cas, les Hooks sont un moyen
plus simple de servir cela en réduisant l'imbrication dans votre arbre.
Retour au sommet
.
Quelle est la méthode recommandée pour nommer les
composants ?
Il est recommandé de nommer le composant par référence au lieu
d'utiliser displayName.
Utilisation displayNamepour nommer le composant :
export default React.createClass({
. displayName: 'TodoApp',
. // ...
. })
L' approche recommandée :
export default class TodoApp extends React.Component {
. // ...
.}
aussi
const TodoApp = () => {
. //...
.}
. export default TodoApp;
Retour au sommet
.
Quel est l'ordre recommandé des méthodes dans la classe
composant ?
Ordre recommandé des méthodes du montage à l' étape de rendu :
○ staticméthodes
○ constructor()
○ getChildContext()
○ componentWillMount()
○ componentDidMount()
○ componentWillReceiveProps()
○ shouldComponentUpdate()
○ componentWillUpdate()
○ componentDidUpdate()
○ componentWillUnmount()
○ cliquez sur les gestionnaires ou les gestionnaires d'événements
comme onClickSubmit()ouonChangeDescription()
○ méthodes getter pour rendre
comme getSelectReason()ougetFooterContent()
○ méthodes de rendu facultatives telles
que renderNavigation()ourenderProfilePicture()
○ render()
Retour au sommet
.
Qu'est-ce qu'un composant de commutation ?
Un composant de commutation est un composant qui restitue l'un
des nombreux composants. Nous devons utiliser object pour mapper
les valeurs prop aux composants.
Par exemple, un composant de commutation pour afficher différentes
pages en fonction de pageprop :
import HomePage from './HomePage'
. import AboutPage from './AboutPage'
. import ServicesPage from './ServicesPage'
. import ContactPage from './ContactPage'
.
. const PAGES = {
. home: HomePage,
. about: AboutPage,
. services: ServicesPage,
. contact: ContactPage
. }
.
. const Page = (props) => {
. const Handler = PAGES[props.page] || ContactPage
.
. return <Handler {...props} />
. }
.
. // The keys of the PAGES object can be used in the prop types to
catch dev-time errors.
. Page.propTypes = {
. page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
.}
Retour au sommet
.
Pourquoi devons-nous passer une fonction à setState() ?
La raison en est qu'il setState()s'agit d'une opération
asynchrone. Réagissez aux changements d'state des lots pour des
raisons de performances, de sorte que l'state peut ne pas changer
immédiatement après setState()l'appel. Cela signifie que vous ne
devez pas vous fier à l'state actuel lors de l'appel setState() , car vous
ne pouvez pas être sûr de ce que sera cet state. La solution consiste à
passer une fonction à setState(), avec l'state précédent comme
argument. En procédant ainsi, vous pouvez éviter que l'utilisateur
obtienne l'ancienne valeur d'state lors de l'accès en raison de la
nature asynchrone de setState().
Disons que la valeur de comptage initiale est zéro. Après trois
opérations d'incrémentation consécutives, la valeur ne sera
incrémentée que de un.
// assuming this.state.count === 0
. this.setState({ count: this.state.count + 1 })
. // this.state.count === 1, not 3
Si nous passons une fonction à setState(), le nombre est incrémenté

.
correctement.
this.setState((prevState, props) => ({
. count: prevState.count + props.increment
. }))
. // this.state.count === 3 as expected
(OU)
Pourquoi la fonction est-elle préférée à l'objet setState()?

React peut regrouper plusieurs setState()appels en une seule mise à
jour pour des raisons de performances. Étant donné
que this.propset this.statepeuvent être mis à jour de manière
asynchrone, vous ne devez pas vous fier à leurs valeurs pour calculer
l'state suivant.
Cet exemple de compteur ne se mettra pas à jour comme prévu :
// Wrong
. this.setState({
. counter: this.state.counter + this.props.increment,
. })
L'approche préférée consiste à appeler setState()avec une fonction

plutôt qu'avec un objet. Cette fonction recevra l'state précédent
comme premier argument et les props au moment où la mise à jour est
appliquée comme deuxième argument.
// Correct
. this.setState((prevState, props) => ({
. counter: prevState.counter + props.increment
. }))
Retour au sommet
.
Qu'est-ce que le mode strict dans React ?
React.StrictModeest un composant utile pour mettre en évidence les
problèmes potentiels dans une application. Tout
comme <Fragment>, <StrictMode>ne restitue aucun élément DOM
supplémentaire. Il active des vérifications et des avertissements
supplémentaires pour ses descendants. Ces vérifications s'appliquent
uniquement au mode développement .
.
. function ExampleApplication() {
. return (
. <div>
. <Header />
. <React.StrictMode>
. <div>
. <ComponentOne />
. <ComponentTwo />
. </div>
. </React.StrictMode>
. <Header />
. </div>
. )
.}
Dans l'exemple ci-dessus, les vérifications en mode

strict s'appliquent uniquement aux
composants <ComponentOne>et .<ComponentTwo>
Retour au sommet
.
Que sont les React Mixins ?
Les mixins sont un moyen de séparer totalement les composants pour
avoir une fonctionnalité commune. Les mixins ne doivent pas être
utilisés et peuvent être remplacés par des composants ou
des décorateurs d'ordre supérieur .
L'un des mixins les plus couramment utilisés
est PureRenderMixin. Vous pouvez l'utiliser dans certains composants
pour éviter les re-rendus inutiles lorsque les props et l'state sont
légèrement égaux aux props et à l'state précédents :
const PureRenderMixin = require('react-addons-pure-render-mixin')
.
. const Button = React.createClass({
. mixins: [PureRenderMixin],
. // ...
. })
Retour au sommet
.
Pourquoi isMounted()un anti-modèle et quelle est la solution
appropriée ?
Le principal cas d'utilisation de isMounted()est d'éviter
d'appeler setState()après le démontage d'un composant, car il
émettra un avertissement.
if (this.isMounted()) {
. this.setState({...})
.}
Vérifier isMounted()avant d'appeler setState()élimine l'avertissement,

mais il va également à l'encontre de l'objectif de
l'avertissement. L'utilisation isMounted()est une odeur de code car la
seule raison pour laquelle vous voudriez vérifier est parce que vous
pensez que vous pourriez détenir une référence après le démontage
du composant.
Une solution optimale serait de trouver des endroits
où setState()pourrait être appelé après le démontage d'un composant,
et de les réparer. De telles situations se produisent le plus souvent en
raison de rappels, lorsqu'un composant attend des données et est
démonté avant l'arrivée des données. Idéalement, tous les rappels
doivent être annulés dans componentWillUnmount(), avant le
démontage.
Retour au sommet
.
Quels sont les événements de pointeur pris en charge dans
React ?
Les événements de pointeur fournissent une manière unifiée de gérer
tous les événements d'entrée. Autrefois, nous avions une souris et des
écouteurs d'événements respectifs pour les gérer, mais de nos jours,
nous avons de nombreux appareils qui ne sont pas liés à une souris,
comme des téléphones avec une surface tactile ou des stylos. Nous
devons nous rappeler que ces événements ne fonctionneront que
dans les navigateurs prenant en charge la spécification Pointer
Events .
Les types d'événements suivants sont désormais disponibles
dans React DOM :
○ onPointerDown
○ onPointerMove
○ onPointerUp
○ onPointerCancel
○ onGotPointerCapture
○ onLostPointerCapture
○ onPointerEnter
○ onPointerLeave
○ onPointerOver
○ onPointerOut
Retour au sommet
.
Pourquoi les noms de composants doivent-ils commencer par une
majuscule ?
.
Si vous rendez votre composant à l'aide de JSX, le nom de ce

composant doit commencer par une lettre majuscule, sinon React
générera une erreur en tant que balise non reconnue. Cette
convention est due au fait que seuls les éléments HTML et les balises
SVG peuvent commencer par une lettre minuscule.
class SomeComponent extends Component {
. // Code goes here
.}
Vous pouvez définir une classe de composant dont le nom commence

par une lettre minuscule, mais lorsqu'il est importé, il doit avoir une
lettre majuscule. Ici, les minuscules conviennent :
class myComponent extends Component {
. render() {
. return <div />
. }
. }
.
. export default myComponent
Alors que lorsqu'il est importé dans un autre fichier, il doit commencer
par une majuscule :
import MyComponent from './MyComponent'
Quelles sont les exceptions sur la dénomination des composants

React ?
Les noms des composants doivent commencer par une lettre
majuscule, mais il existe quelques exceptions à cette convention. Les
noms de balises en minuscules avec un point (accesseurs de
propriété) sont toujours considérés comme des noms de composants
valides. Par exemple, la balise ci-dessous peut être compilée en un
composant valide,
render() {
. return (
. <obj.component/> // `React.createElement(obj.component)`
. )
. }
Retour au sommet
.
Les attributs DOM personnalisés sont-ils pris en charge dans
React v16 ?
.
Oui. Dans le passé, React ignorait les attributs DOM inconnus. Si vous

avez écrit JSX avec un attribut que React ne reconnaît pas, React
l'ignorerait simplement.
Par exemple, examinons l'attribut ci-dessous :
<div mycustomattribute={'something'} />
Rendurait un div vide au DOM avec React v15 :

<div />
Dans React v16, tous les attributs inconnus se retrouveront dans le

DOM :
<div mycustomattribute='something' />
Ceci est utile pour fournir des attributs non standard spécifiques au
navigateur, essayer de nouvelles API DOM et s'intégrer à des
bibliothèques tierces avisées.
Retour au sommet
.
Quelle est la différence entre constructeur et getInitialState ?
Vous devez initialiser l'state dans le constructeur lors de l'utilisation
des classes ES6 et la getInitialState()méthode lors de l'utilisation
de React.createClass().
Utilisation des classes ES6 :
. super(props)
. this.state = { /* initial state */ }
. }
.}
Utilisation React.createClass():
const MyComponent = React.createClass({
. getInitialState() {
. return { /* initial state */ }
. }
. })
Remarque : React.createClass() est obsolète et supprimé dans React

v16. Utilisez plutôt des classes JavaScript simples.
Retour au sommet
.
Pouvez-vous forcer un composant à restituer sans appeler
.
setState ?
Par défaut, lorsque l'state ou les props de votre composant changent,
votre composant sera restitué. Si votre render()méthode dépend
d'autres données, vous pouvez indiquer à React que le composant
doit être rendu à nouveau en appelant forceUpdate().
component.forceUpdate(callback)
Il est recommandé d'éviter toute utilisation de forceUpdate()et de ne

lire que depuis this.propset this.statedans render().
Retour au sommet
.
Quelle est la différence entre super()et super(props)dans React
en utilisant les classes ES6 ?
Lorsque vous souhaitez accéder this.propsà constructor(), vous
devez transmettre les props à la super()méthode.
Utilisation super(props):
. super(props)
. console.log(this.props) // { name: 'John', ... }
. }
.}
Utilisation super():
. super()
. console.log(this.props) // undefined
. }
. }
À l' extérieur constructor(), les deux afficheront la même valeur

pour this.props.
Retour au sommet
.
Comment boucler dans JSX?
Vous pouvez simplement utiliser Array.prototype.mapavec la syntaxe
de la fonction fléchée ES6 .
Par exemple, le itemstableau d'objets est mappé dans un tableau de
composants :
<tbody>
. {items.map(item => <SomeComponent key={item.id}
.
name={item.name} />)}
. </tbody>
Mais vous ne pouvez pas itérer en utilisant forloop:

<tbody>
. for (let i = 0; i < items.length; i++) {
. <SomeComponent key={items[i].id} name={items[i].name} />
. }
. </tbody>
En effet, les balises JSX sont transpilées en appels de fonction et vous

ne pouvez pas utiliser d'instructions dans des expressions. Cela peut
changer grâce aux doexpressions qui sont la proposition de l'étape 1 .
Retour au sommet
.
Comment accédez-vous aux props dans les guillemets d'attribut ?
React (ou JSX) ne prend pas en charge l'interpolation de variable à
l'intérieur d'une valeur d'attribut. La représentation ci-dessous ne
fonctionnera pas :
<img className='image' src='images/{this.props.image}' />
Mais vous pouvez mettre n'importe quelle expression JS entre des

accolades comme valeur d'attribut entière. Donc l'expression ci-
dessous fonctionne :
<img className='image' src={'images/' + this.props.image} />
L'utilisation de chaînes de modèle fonctionnera également :

<img className='image' src={ìmages/${this.props.image}`} />
Retour au sommet
.
Qu'est-ce que le tableau de proptype React avec forme?
Si vous souhaitez passer un tableau d'objets à un composant avec une
forme particulière, utilisez React.PropTypes.shape()-le comme
argument de React.PropTypes.arrayOf().
ReactComponent.propTypes = {
. arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({
. color: React.PropTypes.string.isRequired,
. fontSize: React.PropTypes.number.isRequired
. })).isRequired
.}
.
Retour au sommet
.
Comment appliquer conditionnellement les attributs de classe ?
Vous ne devez pas utiliser d'accolades à l'intérieur des guillemets car
elles seront évaluées comme une chaîne.
<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">
Au lieu de cela, vous devez déplacer les accolades à l'extérieur

(n'oubliez pas d'inclure des espaces entre les noms de classe):
<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}
>
Les chaînes de modèle fonctionneront également :

<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}
>
Retour au sommet
.
Quelle est la différence entre React et ReactDOM ?
Le reactpackage
contient React.createElement(), React.Component, React.Childrenet
d'autres assistants liés aux éléments et aux classes de
composants. Vous pouvez les considérer comme les assistants
isomorphes ou universels dont vous avez besoin pour créer des
composants. Le react-dompackage contient ReactDOM.render(),
et react-dom/servernous avons une prise en charge du rendu côté
serveur avec ReactDOMServer.renderToString()et ReactDOMServer.re
nderToStaticMarkup().
Retour au sommet
.
Pourquoi ReactDOM est séparé de React ?
L'équipe React a travaillé sur l'extraction de toutes les fonctionnalités
liées au DOM dans une bibliothèque distincte
appelée ReactDOM . React v0.14 est la première version dans laquelle
les bibliothèques sont divisées. En examinant certains des
packages, react-native, react-art, react-canvaset react-three, il est
devenu clair que la beauté et l'essence de React n'ont rien à voir avec
les navigateurs ou le DOM.
Pour créer plus d'environnements dans lesquels React peut rendre,
l'équipe React a prévu de diviser le package React principal en
deux : reactet react-dom. Cela ouvre la voie à l'écriture de
composants pouvant être partagés entre la version Web de React et
React Native.
Retour au sommet
.
Comment utiliser l'élément d'étiquette React ?
Si vous essayez de restituer un <label>élément lié à une entrée de
texte à l'aide de l' forattribut standard, il produit du code HTML sans
cet attribut et affiche un avertissement sur la console.
<label for={'user'}>{'User'}</label>
. <input type={'text'} id={'user'} />
Puisque forest un mot-clé réservé en JavaScript, utilisez-le à

la htmlForplace.
<label htmlFor={'user'}>{'User'}</label>
. <input type={'text'} id={'user'} />
Retour au sommet
.
Comment combiner plusieurs objets de style en ligne ?
Vous pouvez utiliser l' opérateur de propagation dans React normal :
<button style={{...styles.panel.button, ...styles.panel.submitButton}}
>{'Submit'}</button>
Si vous utilisez React Native, vous pouvez utiliser la notation de

tableau :
<button style={[styles.panel.button, styles.panel.submitButton]}
>{'Submit'}</button>
Retour au sommet
.
Comment re-rendre la vue lorsque le navigateur est
redimensionné ?
Vous pouvez écouter l' resizeévénement
dans componentDidMount()puis mettre à jour les dimensions
( widthet height). Vous devez supprimer l'écouteur dans
la componentWillUnmount()méthode.
class WindowDimensions extends React.Component {
. constructor(props){
. super(props);
. this.updateDimensions = this.updateDimensions.bind(this);
. }
.
. componentWillMount() {
. this.updateDimensions()
. }
.
. window.addEventListener('resize', this.updateDimensions)
. }
.
. componentWillUnmount() {
. window.removeEventListener('resize', this.updateDimensions)
. }
.
. updateDimensions() {
. this.setState({width: window.innerWidth, height:
window.innerHeight})
. }
.
. render() {
. return <span>{this.state.width} x {this.state.height}</span>
. }
.}
Retour au sommet
.
Quelle est la différence
entre setState()et replaceState()méthodes ?
Lorsque vous utilisez setState()les states actuel et précédent sont
fusionnés. replaceState()rejette l'state actuel et le remplace
uniquement par ce que vous fournissez. Est
généralement setState()utilisé sauf si vous avez vraiment besoin de
supprimer toutes les clés précédentes pour une raison
quelconque. Vous pouvez également définir l'state
sur false/ nullin setState()au lieu d'utiliser replaceState().
Retour au sommet
.
Comment écouter les changements d'state ?
La componentDidUpdateméthode de cycle de vie sera appelée
lorsque l'state changera. Vous pouvez comparer les valeurs d'state et
d'props fournies avec l'state et les props actuels pour déterminer si
quelque chose de significatif a changé.
componentDidUpdate(object prevProps, object prevState)
.
Remarque : Les versions précédentes de ReactJS utilisent

également componentWillUpdate(object nextProps, object
nextState)pour les changements d'state. Il a été déprécié dans les
dernières versions.
Retour au sommet
.
Quelle est l'approche recommandée pour supprimer un élément
de tableau dans l'state React ?
La meilleure approche est d'utiliser la Array.prototype.filter()méthode.
Par exemple, créons une removeItem()méthode pour mettre à jour
l'state.
removeItem(index) {
. this.setState({
. data: this.state.data.filter((item, i) => i !== index)
. })
.}
Retour au sommet
.
Est-il possible d'utiliser React sans afficher le HTML ?
C'est possible avec la dernière version (>=16.2). Ci-dessous les
options possibles :
render() {
. return false
.}
render() {
. return null
.}
render() {
. return []
.}
render() {
. return <React.Fragment></React.Fragment>
.}
render() {
. return <></>
.}
Le retour undefinedne fonctionnera pas.
Retour au sommet
.
Comment joliment imprimer du JSON avec React ?
Nous pouvons utiliser <pre>tag pour que la mise en forme
du JSON.stringify()soit conservée :
const data = { name: 'John', age: 42 }
.
. class User extends React.Component {
. render() {
. return (
. <pre>
. {JSON.stringify(data, null, 2)}
. </pre>
. )
. }
.}
.
. React.render(<User />, document.getElementById('container'))
Retour au sommet
.
Pourquoi vous ne pouvez pas mettre à jour les props dans React ?
La philosophie de React est que les props doivent
être immuables et descendants . Cela signifie qu'un parent peut
envoyer n'importe quelle valeur d'accessoire à un enfant, mais que
l'enfant ne peut pas modifier les props reçus.
Retour au sommet
.
Comment focaliser un élément d'entrée sur le chargement de la
page ?
Vous pouvez le faire en créant ref pour inputelement et en l'utilisant
dans componentDidMount():
class App extends React.Component{
. this.nameInput.focus()
. }
.
. render() {
. return (
. <div>
. <input
. defaultValue={'Won\'t focus'}
. />
. <input
. ref={(input) => this.nameInput = input}
. defaultValue={'Will focus'}
. />
. </div>
. )
. }
.}
.
. ReactDOM.render(<App />, document.getElementById('app'))
Également dans le composant fonctionnel (react 16.08 et supérieur)

import React, {useEffect, useRef} from 'react';
.
. const App = () => {
. const inputElRef = useRef(null)
.
. useEffect(()=>{
. inputElRef.current.focus()
. }, [])
.
. return(
. <div>
. <input
. defaultValue={'Won\'t focus'}
. />
. <input
. ref={inputElRef}
. defaultValue={'Will focus'}
. />
. </div>
. )
. }
.
. ReactDOM.render(<App />, document.getElementById('app'))
Retour au sommet
.
.
Quelles sont les manières possibles de mettre à jour les objets en
state ?
○ Appel setState()avec un objet à fusionner avec l'state :
◆ Utiliser Object.assign()pour créer une copie de l'objet :
const user = Object.assign({}, this.state.user, { age: 42 })

◆ this.setState({ user })
◆ Utilisation de l'opérateur de propagation :

const user = { ...this.state.user, age: 42 }
◆ this.setState({ user })
○ Appel setState()avec une fonction :

this.setState(prevState => ({
○ user: {
○ ...prevState.user,
○ age: 42
○ }
○ }))
Retour au sommet
.
Comment trouver la version de React au moment de l'exécution
dans le navigateur ?
Vous pouvez utiliser React.versionpour obtenir la version.
const REACT_VERSION = React.version
.
. ReactDOM.render(
. <div>{`React version: ${REACT_VERSION}`}</div>,
. document.getElementById('app')
.)
Retour au sommet
.
Quelles sont les approches pour inclure des polyfills dans
votre create-react-app?
Il existe des approches pour inclure des polyfills dans create-react-
app,
○ Importation manuelle depuiscore-js :
Créez un fichier appelé (quelque chose comme) polyfills.jset

importez-le dans le index.jsfichier racine. Exécutez npm install
○
core-jsou yarn add core-jset importez vos fonctionnalités

spécifiques requises.
import 'core-js/fn/array/find'
○ import 'core-js/fn/array/includes'
○ import 'core-js/fn/number/is-nan'
○ Utilisation du service Polyfill :

Utilisez le CDN polyfill.io pour récupérer des polyfills
personnalisés spécifiques au navigateur en ajoutant cette ligne
àindex.html :
<script src='https://cdn.polyfill.io/v2/polyfill.min.js?
features=default,Array.prototype.includes'></script>
Dans le script ci-dessus, nous avons dû demander explicitement

la Array.prototype.includesfonctionnalité car elle n'est pas incluse
dans l'ensemble de fonctionnalités par défaut.
Retour au sommet
.
Comment utiliser https au lieu de http dans create-react-app ?
Il vous suffit d'utiliser la HTTPS=trueconfiguration. Vous pouvez
modifier votre package.jsonsection de scripts :
"scripts": {
. "start": "set HTTPS=true && react-scripts start"
.}
ou simplement courirset HTTPS=true && npm start
Retour au sommet
.
Comment éviter d'utiliser les importations de chemin relatif dans
create-react-app ?
Créez un fichier appelé .envà la racine du projet et écrivez le chemin
d'importation :
NODE_PATH=src/app
.
Après cela, redémarrez le serveur de développement. Vous devriez

maintenant pouvoir importer n'importe quoi à l'intérieur src/appsans
chemins relatifs.
Retour au sommet
.
.
Comment ajouter Google Analytics pour React Router ?
Ajoutez un écouteur sur l' historyobjet pour enregistrer chaque page
vue :
history.listen(function (location) {
. window.ga('set', 'page', location.pathname + location.search)
. window.ga('send', 'pageview', location.pathname + location.search)
. })
Retour au sommet
.
Comment mettre à jour un composant toutes les secondes ?
Vous devez utiliser setInterval()pour déclencher le changement, mais
vous devez également effacer le minuteur lorsque le composant se
démonte pour éviter les erreurs et les fuites de mémoire.
. this.interval = setInterval(() => this.setState({ time: Date.now() }),
1000)
.}
.
. componentWillUnmount() {
. clearInterval(this.interval)
.}
Retour au sommet
.
Comment appliquez-vous les préfixes de fournisseur aux styles
en ligne dans React ?
React n'applique pas automatiquement les préfixes de
fournisseur . Vous devez ajouter manuellement les préfixes de
fournisseur.
<div style={{
. transform: 'rotate(90deg)',
. WebkitTransform: 'rotate(90deg)', // note the capital 'W' here
. msTransform: 'rotate(90deg)' // 'ms' is the only lowercase vendor
prefix
. }} />
Retour au sommet
.
Comment importer et exporter des composants avec React et
ES6 ?
.
Vous devez utiliser la valeur par défaut pour exporter les composants
. import User from 'user'
.
. export default class MyProfile extends React.Component {
. render(){
. return (
. <User type="customer">
. //...
. </User>
. )
. }
.}
Avec le spécificateur d'exportation, le MyProfile va être le membre et

exporté vers ce module et le même peut être importé sans
mentionner le nom dans d'autres composants.
Retour au sommet
.
Pourquoi un constructeur de composant n'est-il appelé qu'une
seule fois ?
L'algorithme de réconciliation de React suppose que sans aucune
information contraire, si un composant personnalisé apparaît au
même endroit sur les rendus suivants, c'est le même composant
qu'avant, donc réutilise l'instance précédente plutôt que d'en créer
une nouvelle.
Retour au sommet
.
Comment définir des constantes dans React ?
Vous pouvez utiliser le champ ES7 staticpour définir la constante.
. static DEFAULT_PAGINATION = 10
.}
Retour au sommet
.
Comment déclencher par programmation un événement de clic
dans React ?
Vous pouvez utiliser la prop ref pour acquérir une référence à
l' HTMLInputElementobjet sous-jacent via un rappel, stocker la
référence en tant que propriété de classe, puis utiliser cette référence
pour déclencher ultérieurement un clic de vos gestionnaires
d'événements à l'aide de la HTMLElement.clickméthode.
Cela peut se faire en deux étapes :
○ Créer une référence dans la méthode de rendu :
<input ref={input => this.inputElement = input} />
○ Appliquer l'événement click dans votre gestionnaire

d'événements :
this.inputElement.click()
Retour au sommet
.
Est-il possible d'utiliser async/wait en plain React ?
Si vous souhaitez utiliser async/ awaitdans React, vous aurez besoin
du plugin Babel et transform-async-to-generator . React Native est
livré avec Babel et un ensemble de transformations.
Retour au sommet
.
Quelles sont les structures de dossiers courantes pour React ?
Il existe deux pratiques courantes pour la structure des fichiers de
projet React.
○ Regroupement par fonctionnalités ou itinéraires :
Une façon courante de structurer les projets consiste à localiser

CSS, JS et les tests ensemble, regroupés par fonctionnalité ou
itinéraire.
common/
○ ├─ Avatar.js
○ ├─ Avatar.css
○ ├─ APIUtils.js
○ └─ APIUtils.test.js
○ feed/
○ ├─ index.js
○ ├─ Feed.js
○ ├─ Feed.css
○ ├─ FeedStory.js
○ ├─ FeedStory.test.js
○ └─ FeedAPI.js
○ profile/
○ ├─ index.js
○ ├─ Profile.js
○ ├─ ProfileHeader.js
○ ├─ ProfileHeader.css
○ └─ ProfileAPI.js
○
○ Regroupement par type de fichier :

Une autre façon courante de structurer des projets consiste à
regrouper des fichiers similaires.
api/
○ ├─ APIUtils.js
○ ├─ APIUtils.test.js
○ ├─ ProfileAPI.js
○ └─ UserAPI.js
○ components/
○ ├─ Avatar.js
○ ├─ Avatar.css
○ ├─ Feed.js
○ ├─ Feed.css
○ ├─ FeedStory.js
○ ├─ FeedStory.test.js
○ ├─ Profile.js
○ ├─ ProfileHeader.js
○ └─ ProfileHeader.css
○
Retour au sommet
.
Quels sont les forfaits populaires pour l'animation ?
React Transition Group et React Motion sont des packages
d'animation populaires dans l'écosystème React.
Retour au sommet
.
Quel est l'avantage des modules de styles ?
Il est recommandé d'éviter les valeurs de style de codage en dur dans
les composants. Toutes les valeurs susceptibles d'être utilisées dans
différents composants de l'interface utilisateur doivent être extraites
dans leurs propres modules.
Par exemple, ces styles peuvent être extraits dans un composant
séparé :
export const colors = {
. white,
. black,
. blue
. }
.
. export const space = [
. 0,
. 8,
. 16,
. 32,
. 64
. ]
Et ensuite importé individuellement dans d'autres composants :

import { space, colors } from './styles'
Retour au sommet
.
Quels sont les linters populaires spécifiques à React ?
ESLint est un linter JavaScript populaire. Il existe des plugins
disponibles qui analysent des styles de code spécifiques. L'un des
plus courants pour React est un package npm appelé eslint-plugin-
react. Par défaut, il vérifiera un certain nombre de bonnes pratiques,
avec des règles vérifiant les choses, des clés dans les itérateurs à un
ensemble complet de types d'props.
Un autre plugin populaire est eslint-plugin-jsx-a11y, qui aidera à
résoudre les problèmes courants d'accessibilité. Comme JSX offre
une syntaxe légèrement différente du HTML standard, les problèmes
avec le alttexte et tabindex, par exemple, ne seront pas détectés par
les plugins standard.
Retour au sommet
.
Comment effectuer un appel AJAX et dans quelles méthodes de
cycle de vie des composants dois-je effectuer un appel AJAX ?
Vous pouvez utiliser des bibliothèques AJAX telles que Axios, jQuery
AJAX et le navigateur intégré fetch. Vous devez récupérer les
données dans la componentDidMount()méthode du cycle de vie. Cela
vous permet setState()de mettre à jour votre composant lorsque les
données sont récupérées.
Par exemple, la liste des employés extraite de l'API et définie l'state
local :
. super(props)
. this.state = {
. employees: [],
. error: null
. }
. }
.
. fetch('https://api.example.com/items')
. .then(res => res.json())
. .then(
. (result) => {
. this.setState({
. employees: result.employees
. })
. },
. (error) => {
. this.setState({ error })
. }
. )
. }
.
. render() {
. const { error, employees } = this.state
. if (error) {
. return <div>Error: {error.message}</div>;
. } else {
. return (
. <ul>
. {employees.map(employee => (
. <li key={employee.name}>
. {employee.name}-{employee.experience}
. </li>
. ))}
. </ul>
. )
. }
. }
. }
Retour au sommet
.
Que sont render props ?
Render Props est une technique simple de partage de code entre
.
composants à l'aide d'un accessoire dont la valeur est une

fonction. Le composant ci-dessous utilise le prop de rendu qui
renvoie un élément React.
<DataProvider render={data => (
. <h1>{`Hello ${data.target}`}</h1>
. )}/>
Des bibliothèques telles que React Router et DownShift utilisent ce

modèle.
Réagir Routeur
Retour au sommet
.
Qu'est-ce que React Router ?
React Router est une puissante bibliothèque de routage construite
sur React qui vous aide à ajouter de nouveaux écrans et flux à votre
application incroyablement rapidement, tout en maintenant l'URL
synchronisée avec ce qui est affiché sur la page.
Retour au sommet
.
En quoi React Router est-il différent de la bibliothèque
d'historique ?
React Router est un wrapper autour de la historybibliothèque qui gère
l'interaction avec le navigateur window.historyavec ses historiques de
navigateur et de hachage. Il fournit également un historique de la
mémoire qui est utile pour les environnements qui n'ont pas
d'historique global, tels que le développement d'applications mobiles
(React Native) et les tests unitaires avec Node.
Retour au sommet
.
Quels sont les <Router>composants de React Router v4 ?
React Router v4 fournit ci-dessous 3 <Router>composants :
○ <BrowserRouter>
○ <HashRouter>
○ <MemoryRouter>
. Les composants ci-dessus créeront des instances de navigateur , de

hachage et d'historique de la mémoire . React Router v4 rend les
propriétés et les méthodes de l' historyinstance associée à votre
routeur disponibles via le contexte de l' routerobjet.
Retour au sommet
.
Quel est le but push()et replace()les méthodes de history?
Une instance d'historique a deux méthodes à des fins de navigation.
○ push()
○ replace()
. Si vous considérez l'historique comme un tableau d'emplacements

visités, push()ajoutera un nouvel emplacement au tableau
et replace()remplacera l'emplacement actuel dans le tableau par le
nouveau.
Retour au sommet
.
Comment naviguez-vous par programmation à l'aide de React
Router v4 ?
Il existe trois manières différentes de réaliser un routage/navigation
programmatique au sein des composants.
○ Utilisation de la withRouter()fonction d'ordre supérieur :
La withRouter()fonction d'ordre supérieur injectera l'objet

d'historique en tant que prop du composant. Cet objet fournit
des push()méthodes replace()pour éviter l'utilisation du contexte.
import { withRouter } from 'react-router-dom' // this also works
with 'react-router-native'
○
○ const Button = withRouter(({ history }) => (
○ <button
○ type='button'
○ onClick={() => { history.push('/new-location') }}
○ >
○ {'Click Me!'}
○ </button>
○ ))
○ Utilisation <Route>du modèle d'props de composant et de

rendu :
Le <Route>composant transmet les mêmes props
que withRouter(), vous pourrez donc accéder aux méthodes
d'historique via l'accessoire d'historique.
import { Route } from 'react-router-dom'
○
○ const Button = () => (
○ <Route render={({ history }) => (
○ <button
○ type='button'
○ onClick={() => { history.push('/new-location') }}
○ >
○ {'Click Me!'}
○ </button>
○ )} />
○ )
○ Utilisation du contexte :
Cette option n'est pas recommandée et traitée comme une API
instable.
const Button = (props, context) => (
○ <button
○ type='button'
○ onClick={() => {
○ context.history.push('/new-location')
○ }}
○ >
○ {'Click Me!'}
○ </button>
○ )
○
○ Button.contextTypes = {
○ history: React.PropTypes.shape({
○ push: React.PropTypes.func.isRequired
○ })
○ }
Retour au sommet
.
Comment obtenir les paramètres de requête dans React Router
v4 ?
La capacité d'analyser les chaînes de requête a été retirée de React
Router v4 car il y a eu des demandes d'utilisateurs au fil des ans pour
prendre en charge différentes implémentations. La décision a donc
été donnée aux utilisateurs de choisir l'implémentation qu'ils
aiment. L'approche recommandée consiste à utiliser la bibliothèque
de chaînes de requête.
const queryString = require('query-string');
. const parsed = queryString.parse(props.location.search);
Vous pouvez également utiliser URLSearchParamssi vous voulez

quelque chose de natif :
.
const params = new URLSearchParams(props.location.search)

. const foo = params.get('name')
Vous devez utiliser un polyfill pour IE11.
Retour au sommet
.
Pourquoi recevez-vous l'avertissement "Le routeur ne peut avoir
qu'un seul élément enfant" ?
Vous devez envelopper votre route dans un <Switch>bloc
car <Switch>il est unique en ce qu'il rend une route exclusivement.
Dans un premier temps, vous devez ajouter Switchà vos
importations :
import { Switch, Router, Route } from 'react-router'
Définissez ensuite les itinéraires dans le <Switch>bloc :

<Router>
. <Switch>
. <Route {/* ... */} />
. <Route {/* ... */} />
. </Switch>
. </Router>
Retour au sommet
.
Comment passer des paramètres à la history.pushméthode dans
React Router v4 ?
Pendant la navigation, vous pouvez passer des props à
l' historyobjet :
this.props.history.push({
. pathname: '/template',
. search: '?name=sudheer',
. state: { detail: response.data }
. })
La searchpropriété est utilisée pour transmettre les paramètres de

requête dans la push()méthode.
Retour au sommet
.
Comment implémenter la page par défaut ou NotFound ?
A <Switch>affiche le premier enfant <Route>qui
correspond. Un <Route>sans chemin correspond toujours. Il vous
.
suffit donc de supprimer simplement l'attribut de chemin comme ci-

dessous
<Switch>
. <Route exact path="/" component={Home}/>
. <Route path="/user" component={User}/>
. <Route component={NotFound} />
. </Switch>
Retour au sommet
.
Comment obtenir l'historique sur React Router v4 ?
Vous trouverez ci-dessous la liste des étapes pour obtenir un objet
d'historique sur React Router v4,
○ Créez un module qui exporte un historyobjet et importez ce
module dans tout le projet.

Par exemple, créez history.jsle fichier :
import { createBrowserHistory } from 'history'
○
○ export default createBrowserHistory({
○ /* pass a configuration object here if needed */
○ })
○ Vous devez utiliser le <Router>composant au lieu des routeurs

intégrés. Importez le fichier history.jsintérieur ci-dessusindex.js :
import { Router } from 'react-router-dom'
○ import history from './history'
○ import App from './App'
○
○ ReactDOM.render((
○ <Router history={history}>
○ <App />
○ </Router>
○ ), holder)
○ You can also use push method of history object similar to built-in

history object:
// some-other-file.js
○ import history from './history'
○
○ history.push('/go-here')
○
Back to Top
.
How to perform automatic redirect after login?
The react-router package provides <Redirect> component in React
Router. Rendering a <Redirect> will navigate to a new location. Like
server-side redirects, the new location will override the current
location in the history stack.
import React, { Component } from 'react'
. import { Redirect } from 'react-router'
.
. export default class LoginComponent extends Component {
. render() {
. if (this.state.isLoggedIn === true) {
. return <Redirect to="/your/redirect/page" />
. } else {
. return <div>{'Login Please'}</div>
. }
. }
.}
React Internationalization
Back to Top
.
What is React Intl?
The React Intl library makes internalization in React straightforward,
with off-the-shelf components and an API that can handle everything
from formatting strings, dates, and numbers, to pluralization. React
Intl is part of FormatJS which provides bindings to React via its
components and API.
Back to Top
.
What are the main features of React Intl?
Vous trouverez ci-dessous les principales fonctionnalités de React
Intl,
○ Afficher les numéros avec des séparateurs.
○ Affichez correctement les dates et les heures.
○ Afficher les dates par rapport à "maintenant".
○ Mettez les étiquettes au pluriel dans les chaînes.
○ Prise en charge de plus de 150 langues.
○ S'exécute dans le navigateur et Node.
○ Construit sur des normes.
Retour au sommet
.
Quelles sont les deux façons de formater dans React Intl ?
La bibliothèque propose deux manières de formater les chaînes, les
nombres et les dates :
○ Utilisation de composants de réaction :
<FormattedMessage
○ id={'account'}
○ defaultMessage={'The amount is less than minimum balance.'}
○ />
○ Utilisation d'une API :

const messages = defineMessages({
○ accountMessage: {
○ id: 'account',
○ defaultMessage: 'The amount is less than minimum balance.',
○ }
○ })
○
○ formatMessage(messages.accountMessage)
Retour au sommet
.
Comment utiliser <FormattedMessage>comme espace réservé
avec React Intl ?
Les <Formatted... />composants des éléments de react-intlretour, et
non du texte brut, ne peuvent donc pas être utilisés pour les espaces
réservés, le texte alternatif, etc. Dans ce cas, vous devez utiliser une
API de niveau inférieur formatMessage(). Vous pouvez injecter
l' intlobjet dans votre composant en utilisant injectIntl()un composant
d'ordre supérieur, puis formater le message en
utilisant formatMessage()disponible sur cet objet.
. import { injectIntl, intlShape } from 'react-intl'
.
. const MyComponent = ({ intl }) => {
. const placeholder = intl.formatMessage({id: 'messageId'})
. return <input placeholder={placeholder} />
.}
.
. MyComponent.propTypes = {
. intl: intlShape.isRequired
.}
.
. export default injectIntl(MyComponent)
Retour au sommet
.
Comment accéder aux paramètres régionaux actuels avec React
Intl ?
Vous pouvez obtenir les paramètres régionaux actuels dans n'importe
quel composant de votre application en utilisantinjectIntl() :
import { injectIntl, intlShape } from 'react-intl'
.
. const MyComponent = ({ intl }) => (
. <div>{`The current locale is ${intl.locale}`}</div>
.)
.
.}
.
Retour au sommet
.
Comment formater la date avec React Intl ?
Le injectIntl()composant d'ordre supérieur vous donnera accès à
la formatDate()méthode via les props de votre composant. La
méthode est utilisée en interne par les instances de FormattedDateet
renvoie la représentation sous forme de chaîne de la date formatée.
import { injectIntl, intlShape } from 'react-intl'
.
. const stringDate = this.props.intl.formatDate(date, {
. year: 'numeric',
. month: 'numeric',
. day: 'numeric'
. })
.
. const MyComponent = ({intl}) => (
. <div>{`The formatted date is ${stringDate}`}</div>
.)
.
. }
.
Test de réaction
Retour au sommet
.
Qu'est-ce que Shallow Renderer dans les tests React ?
Le rendu superficiel est utile pour écrire des cas de test unitaires
dans React. Il vous permet de rendre un composant d' un niveau de
profondeur et d'affirmer des faits sur ce que sa méthode de rendu
renvoie, sans vous soucier du comportement des composants
enfants, qui ne sont pas instanciés ou rendus.
Par exemple, si vous avez le composant suivant :
function MyComponent() {
. return (
. <div>
. <span className={'heading'}>{'Title'}</span>
. <span className={'description'}>{'Description'}</span>
. </div>
. )
.}
Vous pouvez alors affirmer comme suit :

import ShallowRenderer from 'react-test-renderer/shallow'
.
. // in your test
. const renderer = new ShallowRenderer()
. renderer.render(<MyComponent />)
.
. const result = renderer.getRenderOutput()
.
. expect(result.type).toBe('div')
. expect(result.props.children).toEqual([
. <span className={'heading'}>{'Title'}</span>,
. <span className={'description'}>{'Description'}</span>
. ])
Retour au sommet
.
Qu'est-ce TestRendererqu'un paquet dans React ?
Ce package fournit un moteur de rendu qui peut être utilisé pour
restituer des composants en objets JavaScript purs, sans dépendre
du DOM ou d'un environnement mobile natif. Ce package facilite la
capture d'un instantané de la hiérarchie de la vue de la plate-forme
(similaire à un arbre DOM) rendue par un ReactDOM ou React Native
sans utiliser de navigateur ou jsdom.
import TestRenderer from 'react-test-renderer'
.
. const Link = ({page, children}) => <a href={page}>{children}</a>
.
. const testRenderer = TestRenderer.create(
. <Link page={'https://www.facebook.com/'}>{'Facebook'}</Link>
. )
.
. console.log(testRenderer.toJSON())
. // {
. // type: 'a',
. // props: { href: 'https://www.facebook.com/' },
. // children: [ 'Facebook' ]
. // }
Retour au sommet
.
A quoi sert le package ReactTestUtils ?
ReactTestUtils est fourni dans le with-addonspackage et vous permet
d'effectuer des actions sur un DOM simulé à des fins de test unitaire.
Retour au sommet
.
Qu'est-ce que la plaisanterie ?
Jest est un framework de test unitaire JavaScript créé par Facebook
basé sur Jasmine et fournit une création de simulation automatisée et
un jsdomenvironnement. Il est souvent utilisé pour tester des
composants.
Retour au sommet
.
Quels sont les avantages de Jest par rapport à Jasmine ?
Il y a quelques avantages par rapport au jasmin :
○ Trouve automatiquement les tests à exécuter dans votre code
source.
Se moque automatiquement des dépendances lors de l'exécution
○
de vos tests.
○ Permet de tester du code asynchrone de manière synchrone.
○ Exécute vos tests avec une fausse implémentation DOM
(via jsdom) afin que vos tests puissent être exécutés sur la ligne
de commande.
○ Exécute les tests dans des processus parallèles afin qu'ils se
terminent plus tôt.

Retour au sommet
.
Donnez un exemple simple de cas de test Jest
Écrivons un test pour une fonction qui additionne deux nombres
dans sum.jsfile :
const sum = (a, b) => a + b
.
. export default sum
Créez un fichier nommé sum.test.jsqui contient le test réel :

import sum from './sum'
.
. test('adds 1 + 2 to equal 3', () => {
. expect(sum(1, 2)).toBe(3)
. })
Et puis ajoutez la section suivante à votre package.json:

{
. "scripts": {
. "test": "jest"
. }
. }
Enfin, exécutez yarn testou npm testet Jest affichera un résultat :

$ yarn test
. PASS ./sum.test.js
. ✓ adds 1 + 2 to equal 3 (2ms)
Réagir Redux
Retour au sommet
.
Qu'est-ce que le flux ?
Flux est un paradigme de conception d'application utilisé en
remplacement du modèle MVC plus traditionnel. Ce n'est pas un
.
framework ou une bibliothèque mais un nouveau type d'architecture

qui complète React et le concept de flux de données
unidirectionnel. Facebook utilise ce modèle en interne lorsqu'il
travaille avec React.
Le flux de travail entre le répartiteur, stocke et visualise les
composants avec des entrées et des sorties distinctes comme suit :
Retour au sommet
.
Qu'est-ce que Redux ?
Redux est un conteneur d'state prévisible pour les applications
JavaScript basé sur le modèle de conception Flux . Redux peut être
utilisé avec React ou avec toute autre bibliothèque de vues. Il est
minuscule (environ 2 Ko) et n'a aucune dépendance.
Retour au sommet
.
Quels sont les principes de base de Redux ?
Redux suit trois principes fondamentaux :
○ Source unique de vérité : l'state de l'ensemble de votre
application est stocké dans une arborescence d'objets au sein

d'un seul magasin. L'arbre d'state unique facilite le suivi des
modifications au fil du temps et le débogage ou l'inspection de
l'application.
○ State is read-only: The only way to change the state is to emit an
action, an object describing what happened. This ensures that

neither the views nor the network callbacks will ever write directly
to the state.
○ Changes are made with pure functions: To specify how the state
tree is transformed by actions, you write reducers. Reducers are

just pure functions that take the previous state and an action as
parameters, and return the next state.
Back to Top
.
What are the downsides of Redux compared to Flux?
Instead of saying downsides we can say that there are few
compromises of using Redux over Flux. Those are as follows:
○ You will need to learn to avoid mutations: Flux is un-opinionated
about mutating data, but Redux doesn't like mutations and many
packages complementary to Redux assume you never mutate the
state. You can enforce this with dev-only packages like redux-
immutable-state-invariant, Immutable.js, or instructing your team
to write non-mutating code.
○ You're going to have to carefully pick your packages: While
Flux explicitly doesn't try to solve problems such as undo/redo,

persistence, or forms, Redux has extension points such as
middleware and store enhancers, and it has spawned a rich
ecosystem.
○ There is no nice Flow integration yet: Flux currently lets you do
very impressive static type checks which Redux doesn't support

yet.
Back to Top
.
Quelle est la différence
entre mapStateToProps()et mapDispatchToProps()?
mapStateToProps()est un utilitaire qui aide votre composant à obtenir
un state mis à jour (qui est mis à jour par d'autres composants):
const mapStateToProps = (state) => {
. return {
. todos: getVisibleTodos(state.todos, state.visibilityFilter)
. }
.}
mapDispatchToProps()est un utilitaire qui aidera votre composant à

déclencher un événement d'action (envoyant une action qui peut
provoquer un changement d'state de l'application) :
const mapDispatchToProps = (dispatch) => {
. return {
. onTodoClick: (id) => {
. dispatch(toggleTodo(id))
. }
. }
. }
Il est recommandé de toujours utiliser la forme « raccourci d'objet »

pour le fichier mapDispatchToProps.
Redux l'enveloppe dans une autre fonction qui ressemble à (…args)
=> dispatch(onTodoClick(…args)), et transmet cette fonction wrapper
comme accessoire à votre composant.
const mapDispatchToProps = ({
. onTodoClick
. })
Retour au sommet
.
Puis-je envoyer une action dans le réducteur ?
Répartir une action dans un réducteur est un anti-pattern . Votre
réducteur doit être sans effets secondaires , digérant simplement la
charge utile de l'action et renvoyant un nouvel objet d'state. L'ajout
d'écouteurs et la distribution d'actions dans le réducteur peuvent
entraîner des actions enchaînées et d'autres effets secondaires.
Retour au sommet
.
Comment accéder au magasin Redux en dehors d'un
composant ?
Il vous suffit d'exporter le magasin depuis le module où il a été créé
avec createStore(). De plus, cela ne devrait pas polluer l'objet fenêtre
global.
store = createStore(myReducer)
.
. export default store
Retour au sommet
.
Quels sont les inconvénients du modèle MVW ?
○ La manipulation du DOM est très coûteuse, ce qui rend les
applications lentes et inefficaces.

○ En raison des dépendances circulaires, un modèle compliqué a été
créé autour des modèles et des vues.

○ De nombreuses modifications de données se produisent pour les
applications collaboratives (comme Google Docs).

○ Pas moyen d'annuler (voyager dans le temps) facilement sans
ajouter autant de code supplémentaire.

Retour au sommet
.
Existe-t-il des similitudes entre Redux et RxJS ?
Ces bibliothèques sont très différentes pour des objectifs très
différents, mais il existe de vagues similitudes.
.
Redux est un outil de gestion de l'state de l'application. Il est

généralement utilisé comme architecture pour les interfaces
utilisateur. Considérez-le comme une alternative à (la moitié de)
Angular. RxJS est une bibliothèque de programmation réactive. Il est
généralement utilisé comme outil pour accomplir des tâches
asynchrones en JavaScript. Considérez-le comme une alternative aux
promesses. Redux utilise le paradigme réactif car le magasin est
réactif. Le magasin observe les actions à distance et se
transforme. RxJS utilise également le paradigme réactif, mais au lieu
d'être une architecture, il vous donne des blocs de construction de
base, Observables, pour accomplir ce modèle.
Retour au sommet
.
Comment dispatcher une action au chargement ?
Vous pouvez envoyer une action dans
la componentDidMount()méthode et dans render()la méthode, vous
pouvez vérifier les données.
class App extends Component {
. this.props.fetchData()
. }
.
. render() {
. return this.props.isLoaded
. ? <div>{'Loaded'}</div>
. : <div>{'Not Loaded'}</div>
. }
.}
.
. const mapStateToProps = (state) => ({
. isLoaded: state.isLoaded
. })
.
. const mapDispatchToProps = { fetchData }
.
. export default connect(mapStateToProps, mapDispatchToProps)
(App)
Retour au sommet
.
Comment utiliser connect()depuis React Redux ?
Vous devez suivre deux étapes pour utiliser votre magasin dans votre
.
conteneur :
○ Use mapStateToProps(): Il mappe les variables d'state de votre
magasin aux props que vous spécifiez.
○ Connectez les props ci-dessus à votre conteneur : l'objet

renvoyé par la mapStateToPropsfonction est connecté au
conteneur. Vous pouvez importer connect()depuis react-redux.
○ import { connect } from 'react-redux'
○
○ class App extends React.Component {
○ render() {
○ return <div>{this.props.containerData}</div>
○ }
○ }
○
○ function mapStateToProps(state) {
○ return { containerData: state.data }
○ }
○
○ export default connect(mapStateToProps)(App)
Retour au sommet
.
Comment réinitialiser l'state dans Redux?
Vous devez écrire un réducteur racine dans votre application qui
délègue la gestion de l'action au réducteur généré
par combineReducers().
Prenons par exemple rootReducer()le retour à l'state initial
après USER_LOGOUTaction. Comme nous le savons, les réducteurs
sont censés retourner l'state initial lorsqu'ils sont appelés
avec undefinedcomme premier argument, quelle que soit l'action.
const appReducer = combineReducers({
. /* your app's top-level reducers */
. })
.
. const rootReducer = (state, action) => {
. if (action.type === 'USER_LOGOUT') {
. state = undefined
. }
.
. return appReducer(state, action)
.}
.
En cas d'utilisation de redux-persist, vous devrez peut-être

également nettoyer votre stockage. redux-persistconserve une copie
de votre state dans un moteur de stockage. Tout d'abord, vous devez
importer le moteur de stockage approprié, puis analyser l'state avant
de le définir sur undefined et nettoyer chaque clé d'state de
stockage.
const appReducer = combineReducers({
. /* your app's top-level reducers */
. })
.
. const rootReducer = (state, action) => {
. if (action.type === 'USER_LOGOUT') {
. Object.keys(state).forEach(key => {
. storage.removeItem(`persist:${key}`)
. })
.
. state = undefined
. }
.
. return appReducer(state, action)
.}
Retour au sommet
.
Quel est le but du atsymbole dans le décorateur de connexion
Redux ?
Le symbole @ est en fait une expression JavaScript utilisée pour
signifier les décorateurs. Les décorateurs permettent d'annoter et de
modifier les classes et les propriétés au moment du design.
Prenons un exemple de configuration de Redux sans et avec un
décorateur.
○ Sans décorateur :

○ import * as actionCreators from './actionCreators'
○ import { bindActionCreators } from 'redux'
○
○ return { todos: state.todos }
○ }
○
○ function mapDispatchToProps(dispatch) {
○ return { actions: bindActionCreators(actionCreators, dispatch) }
○ }
○
○ class MyApp extends React.Component {
○ // ...define your main app here
○ }
○
○ export default connect(mapStateToProps, mapDispatchToProps)
(MyApp)
○ Avec décorateur :
○ import * as actionCreators from './actionCreators'
○ import { bindActionCreators } from 'redux'
○
○ return { todos: state.todos }
○ }
○
○ function mapDispatchToProps(dispatch) {
○ return { actions: bindActionCreators(actionCreators, dispatch) }
○ }
○
○ @connect(mapStateToProps, mapDispatchToProps)
○ export default class MyApp extends React.Component {
○ // ...define your main app here
○ }
. Les exemples ci-dessus sont presque similaires à l'exception de

l'utilisation du décorateur. La syntaxe du décorateur n'est pas encore
intégrée dans les runtimes JavaScript, et est encore expérimentale et
sujette à modification. Vous pouvez utiliser babel pour le support des
décorateurs.
Retour au sommet
.
Quelle est la différence entre le contexte React et React Redux ?
Vous pouvez utiliser Context directement dans votre application et
sera idéal pour transmettre des données à des composants
profondément imbriqués pour lesquels il a été conçu.
Alors que Redux est beaucoup plus puissant et fournit un grand
nombre de fonctionnalités que l'API Context ne fournit pas. De plus,
React Redux utilise le contexte en interne, mais il n'expose pas ce fait
dans l'API publique.
Retour au sommet
.
Pourquoi les fonctions d'state Redux sont-elles appelées
réducteurs ?
Les réducteurs renvoient toujours l'accumulation de l'state (basé sur
toutes les actions précédentes et actuelles). Par conséquent, ils
agissent comme un réducteur d'state. Chaque fois qu'un réducteur
Redux est appelé, l'state et l'action sont passés en paramètres. Cet
state est ensuite réduit (ou accumulé) en fonction de l'action, puis
l'state suivant est renvoyé. Vous pouvez réduire une collection
d'actions et un state initial (du magasin) sur lequel effectuer ces
actions pour obtenir l'state final résultant.
Retour au sommet
.
Comment faire une requête AJAX dans Redux ?
Vous pouvez utiliser un redux-thunkmiddleware qui vous permet de
définir des actions asynchrones.
Prenons un exemple de récupération d'un compte spécifique en tant
qu'appel AJAX à l'aide de l'API fetch :
export function fetchAccount(id) {
. return dispatch => {
. dispatch(setLoadingAccountState()) // Show a loading spinner
. fetch(`/account/${id}`, (response) => {
. dispatch(doneFetchingAccount()) // Hide loading spinner
. if (response.status === 200) {
. dispatch(setAccount(response.json)) // Use a normal function to
set the received state
. } else {
. dispatch(someError)
. }
. })
. }
.}
.
. function setAccount(data) {
. return { type: 'SET_Account', data: data }
.}
Retour au sommet
.
Dois-je conserver l'state de tous les composants dans le magasin
Redux ?
Keep your data in the Redux store, and the UI related state internally
in the component.
Back to Top
.
What is the proper way to access Redux store?
The best way to access your store in a component is to use
the connect() function, that creates a new component that wraps
around your existing one. This pattern is called Higher-Order
Components, and is generally the preferred way of extending a
component's functionality in React. This allows you to map state and
action creators to your component, and have them passed in
automatically as your store updates.
Let's take an example of <FilterLink> component using connect:
import { connect } from 'react-redux'
. import { setVisibilityFilter } from '../actions'
. import Link from '../components/Link'
.
. const mapStateToProps = (state, ownProps) => ({
. active: ownProps.filter === state.visibilityFilter
. })
.
. const mapDispatchToProps = (dispatch, ownProps) => ({
. onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
. })
.
. const FilterLink = connect(
. mapStateToProps,
. mapDispatchToProps
. )(Link)
.
. export default FilterLink
Due to it having quite a few performance optimizations and generally

being less likely to cause bugs, the Redux developers almost always
recommend using connect() over accessing the store directly (using
context API).
class MyComponent {
. someMethod() {
. doSomethingWith(this.context.store)
. }
.}
Back to Top
.
What is the difference between component and container in
React Redux?
Component is a class or function component that describes the
presentational part of your application.
Container is an informal term for a component that is connected to a
Redux store. Containers subscribe to Redux state updates
and dispatch actions, and they usually don't render DOM elements;
they delegate rendering to presentational child components.
Back to Top
.
What is the purpose of the constants in Redux?
Les constantes vous permettent de trouver facilement toutes les
utilisations de cette fonctionnalité spécifique dans le projet lorsque
vous utilisez un IDE. Cela vous empêche également d'introduire des
bogues stupides causés par des fautes de frappe - auquel cas, vous
obtiendrez un ReferenceErrorimmédiatement.
Normalement, nous les enregistrerons dans un seul fichier
( constants.jsou actionTypes.js).
export const ADD_TODO = 'ADD_TODO'
. export const DELETE_TODO = 'DELETE_TODO'
. export const EDIT_TODO = 'EDIT_TODO'
. export const COMPLETE_TODO = 'COMPLETE_TODO'
. export const COMPLETE_ALL = 'COMPLETE_ALL'
. export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'
Dans Redux, vous les utilisez à deux endroits :

○ Lors de la création de l'action :
Prenons actions.js:
import { ADD_TODO } from './actionTypes';
○
○ export function addTodo(text) {
○ return { type: ADD_TODO, text }
○ }
○ Dans les réducteurs :

Créons reducer.js:
○
import { ADD_TODO } from './actionTypes'

○
○ export default (state = [], action) => {
○ switch (action.type) {
○ case ADD_TODO:
○ return [
○ ...state,
○ {
○ text: action.text,
○ completed: false
○ }
○ ];
○ default:
○ return state
○ }
○ }
Retour au sommet
.
Quelles sont les différentes manières
d'écrire mapDispatchToProps()?
Il existe plusieurs façons de lier les créateurs
d'action à dispatch()in mapDispatchToProps().
Ci-dessous les options possibles :
const mapDispatchToProps = (dispatch) => ({
. action: () => dispatch(action())
. })
const mapDispatchToProps = (dispatch) => ({

. action: bindActionCreators(action, dispatch)
. })
const mapDispatchToProps = { action }
La troisième option n'est qu'un raccourci pour la première.
Retour au sommet
.
A quoi sert le ownPropsparamètre
dans mapStateToProps()et mapDispatchToProps()?
Si le ownPropsparamètre est spécifié, React Redux transmettra les
props qui ont été transmis au composant dans vos fonctions
de connexion . Ainsi, si vous utilisez un composant connecté :
import ConnectedComponent from './containers/
ConnectedComponent';
.
. <ConnectedComponent user={'john'} />
L' ownPropsintérieur de vos
fonctions mapStateToProps()et mapDispatchToProps()sera un objet :
{ user: 'john' }
Vous pouvez utiliser cet objet pour décider quoi renvoyer de ces
fonctions.
Retour au sommet
.
Comment structurer les répertoires de niveau supérieur Redux ?
La plupart des applications ont plusieurs répertoires de niveau
supérieur comme ci-dessous :
○ Composants : Utilisé pour les composants muets ignorant Redux.
○ Conteneurs : Utilisés pour les composants intelligents connectés
à Redux.
○ Actions : utilisé pour tous les créateurs d'action, où les noms de
fichiers correspondent à une partie de l'application.

○ Réducteurs : utilisé pour tous les réducteurs, où le nom des
fichiers correspond à la clé d'state.

○ Store : utilisé pour l'initialisation du magasin.
. Cette structure fonctionne bien pour les applications de petite et

moyenne taille.
Retour au sommet
.
Qu'est-ce que redux-saga ?
redux-sagaest une bibliothèque qui vise à rendre les effets
secondaires (des choses asynchrones comme la récupération de
données et des choses impures comme l'accès au cache du
navigateur) dans les applications React/Redux plus faciles et
meilleures.
Il est disponible dans NPM :
$ npm install --save redux-saga
Retour au sommet
.
Quel est le modèle mental de redux-saga ?
Saga est comme un fil séparé dans votre application, qui est seul
.
responsable des effets secondaires. est un middlewareredux-

saga redux , ce qui signifie que ce thread peut être démarré, mis en
pause et annulé à partir de l'application principale avec des actions
Redux normales, il a accès à l'state complet de l'application Redux et
peut également envoyer des actions Redux.
Retour au sommet
.
Quelles sont les différences entre call()et put()dans redux-saga ?
Les deux call()et put()sont des fonctions de création d'effet. call()La
fonction est utilisée pour créer une description d'effet, qui demande
au middleware d'appeler la promesse. put()La fonction crée un effet,
qui demande au middleware d'envoyer une action au magasin.
Prenons un exemple de la façon dont ces effets fonctionnent pour
récupérer des données utilisateur particulières.
function* fetchUserSaga(action) {
. // `call` function accepts rest arguments, which will be passed to
àpi.fetchUser` function.
. // Instructing middleware to call promise, it resolved value will be
assigned to ùserData` variable
. const userData = yield call(api.fetchUser, action.userId)
.
. // Instructing middleware to dispatch corresponding action.
. yield put({
. type: 'FETCH_USER_SUCCESS',
. userData
. })
.}
Retour au sommet
.
Qu'est-ce que Redux Thunk ?
Le middleware Redux Thunk vous permet d'écrire des créateurs
d'action qui renvoient une fonction au lieu d'une action. Le thunk peut
être utilisé pour retarder l'envoi d'une action ou pour l'envoyer
uniquement si une certaine condition est remplie. La fonction interne
reçoit les méthodes de stockage dispatch()et getState()en tant que
paramètres.
Retour au sommet
.
Quelles sont les différences entre redux-sagaet redux-thunk?
Redux Thunk et Redux Saga s'occupent tous deux de gérer les effets
.
secondaires. Dans la plupart des scénarios, Thunk

utilise Promises pour les gérer, tandis que Saga
utilise Generators . Thunk est simple à utiliser et les promesses sont
familières à de nombreux développeurs, les sagas/générateurs sont
plus puissants mais vous devrez les apprendre. Mais les deux
intergiciels peuvent coexister, vous pouvez donc commencer avec
Thunks et introduire Sagas quand/si vous en avez besoin.
Retour au sommet
.
Qu'est-ce que Redux DevTools ?
Redux DevTools est un environnement de voyage dans le temps
d'édition en direct pour Redux avec rechargement à chaud, relecture
d'action et interface utilisateur personnalisable. Si vous ne voulez pas
vous soucier de l'installation de Redux DevTools et de son intégration
dans votre projet, pensez à utiliser l'extension Redux DevTools pour
Chrome et Firefox.
Retour au sommet
.
Quelles sont les fonctionnalités de Redux DevTools ?
Certaines des principales fonctionnalités de Redux DevTools sont ci-
dessous,
○ Vous permet d'inspecter chaque charge utile d'state et d'action.
○ Permet de remonter dans le temps en annulant des actions.
○ Si vous modifiez le code du réducteur, chaque
action échelonnée sera réévaluée.
○ Si les réducteurs lancent, vous verrez au cours de quelle action
cela s'est produit et quelle était l'erreur.

○ Avec persistState()Store Enhancer, vous pouvez conserver les
sessions de débogage lors des rechargements de page.

Retour au sommet
.
Que sont les sélecteurs Redux et pourquoi les utiliser ?
Les sélecteurs sont des fonctions qui prennent l'state Redux comme
argument et renvoient des données à transmettre au composant.
Par exemple, pour obtenir les détails de l'utilisateur à partir de
l'state :
const getUserData = state => state.user.data
Ces sélecteurs ont deux avantages principaux,

○ Le sélecteur peut calculer des données dérivées, permettant à
Redux de stocker l'state minimal possible

○ Le sélecteur n'est recalculé que si l'un de ses arguments change
Retour au sommet
.
Qu'est-ce que le formulaire Redux ?
Redux Form fonctionne avec React et Redux pour permettre à un
formulaire dans React d'utiliser Redux pour stocker tout son
state. Redux Form peut être utilisé avec des entrées HTML5 brutes,
mais il fonctionne également très bien avec les frameworks
d'interface utilisateur courants tels que Material UI, React Widgets et
React Bootstrap.
Retour au sommet
.
Quelles sont les principales fonctionnalités de Redux Form ?
Certaines des principales fonctionnalités de Redux Form sont :
○ Persistance des valeurs de champ via le magasin Redux.
○ Validation (sync/async) et soumission.
○ Formatage, analyse et normalisation des valeurs de champ.
Retour au sommet
.
Comment ajouter plusieurs middlewares à Redux ?
Vous pouvez utiliser applyMiddleware().
Par exemple, vous pouvez les ajouter redux-thunket loggerles passer
comme arguments à applyMiddleware():
import { createStore, applyMiddleware } from 'redux'
. const createStoreWithMiddleware = applyMiddleware(ReduxThunk,
logger)(createStore)
Retour au sommet
.
Comment définir l'state initial dans Redux ?
Vous devez passer l'state initial comme deuxième argument à
createStore :
const rootReducer = combineReducers({
. todos: todos,
. visibilityFilter: visibilityFilter
. })
.
. const initialState = {
. todos: [{ id: 123, name: 'example', completed: false }]
.}
.
. const store = createStore(
. rootReducer,
. initialState
.)
Retour au sommet
.
En quoi Relay est-il différent de Redux ?
Relay est similaire à Redux en ce sens qu'ils utilisent tous les deux un
seul magasin. La principale différence est que le relais ne gère que
l'state provenant du serveur et que tout accès à l'state est utilisé via
des requêtes GraphQL (pour lire des données) et des mutations (pour
modifier des données). Relay met les données en cache pour vous et
optimise la récupération des données pour vous, en récupérant
uniquement les données modifiées et rien de plus.
.
Qu'est-ce qu'une action dans Redux ?
Les actions sont des objets JavaScript simples ou des charges utiles
d'informations qui envoient des données de votre application à votre
boutique. Ils sont la seule source d'information pour le magasin. Les
actions doivent avoir une propriété type qui indique le type d'action
en cours d'exécution.
Par exemple, prenons une action qui représente l'ajout d'un nouvel
élément de tâche :
{
. type: ADD_TODO,
. text: 'Add todo item'
.}
.
Retour au sommet
Réagir natif
Retour au sommet
.
Quelle est la différence entre React Native et React ?
React est une bibliothèque JavaScript, prenant en charge à la fois le
Web frontal et exécuté sur le serveur, pour créer des interfaces
utilisateur et des applications Web.
React Native est un framework mobile qui se compile en composants
d'application natifs, vous permettant de créer des applications
mobiles natives (iOS, Android et Windows) en JavaScript qui vous
permet d'utiliser React pour créer vos composants et implémente
React sous le capot.
Retour au sommet
.
Comment tester les applications React Native ?
React Native ne peut être testé que dans des simulateurs mobiles
comme iOS et Android. Vous pouvez exécuter l'application sur votre
mobile à l'aide de l'application expo ( https://expo.io ). Lorsqu'elle se
synchronise à l'aide du code QR, votre mobile et votre ordinateur
doivent se trouver sur le même réseau sans fil.
Retour au sommet
.
Comment se connecter dans React Native ?
Vous pouvez utiliser console.log, console.warn, etc. Depuis React
Native v0.29, vous pouvez simplement exécuter ce qui suit pour voir
les journaux dans la console :
$ react-native log-ios
. $ react-native log-android
.
Retour au sommet
.
Comment déboguer votre React Native ?
Suivez les étapes ci-dessous pour déboguer l'application React
Native :
○ Run your application in the iOS simulator.
○ Press Command + D and a webpage should open up at http://
localhost:8081/debugger-ui.
○ Enable Pause On Caught Exceptions for a better debugging
experience.
○ Press Command + Option + I to open the Chrome Developer tools,
or open it via View -> Developer -> Developer Tools.

○ You should now be able to debug as you normally would.
React supported libraries & Integration

Back to Top
.
What is reselect and how it works?
Reselect is a selector library (for Redux) which
uses memoization concept. It was originally written to compute
derived data from Redux-like applications state, but it can't be tied to
any architecture or library.
Reselect conserve une copie des dernières entrées/sorties du dernier
appel, et ne recalcule le résultat que si l'une des entrées change. Si
les mêmes entrées sont fournies deux fois de suite, Resélection
renvoie la sortie mise en cache. Sa mémorisation et son cache sont
entièrement personnalisables.
Retour au sommet
.
Qu'est-ce que le flux ?
Flow est un vérificateur de type statique conçu pour rechercher les
erreurs de type dans JavaScript. Les types de flux peuvent exprimer
des distinctions beaucoup plus fines que les systèmes de types
traditionnels. Par exemple, Flow vous aide à détecter les erreurs
impliquant null, contrairement à la plupart des systèmes de type.
Retour au sommet
.
Quelle est la différence entre Flow et PropTypes ?
Flow est un outil d'analyse statique (vérificateur statique) qui utilise
un sur-ensemble du langage, vous permettant d'ajouter des
annotations de type à tout votre code et de détecter toute une classe
de bogues au moment de la compilation.
PropTypes est un vérificateur de type de base (vérificateur
d'exécution) qui a été corrigé sur React. Il ne peut rien vérifier d'autre
que les types d'props transmis à un composant donné. Si vous
souhaitez une vérification de type plus flexible pour l'ensemble de
votre projet, Flow/TypeScript sont des choix appropriés.
Retour au sommet
.
Comment utiliser les icônes Font Awesome dans React ?
Les étapes ci-dessous ont été suivies pour inclure Font Awesome
dans React :
○ Installerfont-awesome :
$ npm install --save font-awesome
○ Importez font-awesomedans votre index.jsfichier :
import 'font-awesome/css/font-awesome.min.css'
○ Ajouter des classes Font Awesome dans className:

render() {
○ return <div><i className={'fa fa-spinner'} /></div>
○ }
Retour au sommet
.
Qu'est-ce que React Dev Tools ?
React Developer Tools vous permet d'inspecter la hiérarchie des
composants, y compris les props et l'state des composants. Il existe
à la fois en tant qu'extension de navigateur (pour Chrome et Firefox)
et en tant qu'application autonome (fonctionne avec d'autres
environnements, notamment Safari, IE et React Native).
Les extensions officielles disponibles pour différents navigateurs ou
environnements.
○ Extension chromée
○ Extension Firefox
○ Application autonome (Safari, React Native, etc.)
Retour au sommet
.
Pourquoi DevTools ne se charge-t-il pas dans Chrome pour les
fichiers locaux ?
Si vous avez ouvert un fichier HTML local dans votre navigateur
( file://...), vous devez d'abord ouvrir les extensions Chrome et
vérifier Allow access to file URLs.
Retour au sommet
.
Comment utiliser Polymer dans React ?
Vous devez suivre les étapes ci-dessous pour utiliser Polymer dans
React,
○ Créez un élément Polymère :
<link rel='import' href='../../bower_components/polymer/

polymer.html' />
○ Polymer({
○ is: 'calender-element',
○ ready: function() {
○ this.textContent = 'I am a calender'
○ }
○ })
○ Créez la balise HTML du composant Polymer en l'important dans

un document HTML, par exemple importez-la dans
le index.htmlfichier de votre application React :
<link rel='import' href='./src/polymer-components/calender-
element.html'>
○ Utilisez cet élément dans le fichier JSX :

○
○ class MyComponent extends React.Component {
○ render() {
○ return (
○ <calender-element />
○ )
○ }
○ }
○
○ export default MyComponent
Retour au sommet
.
Quels sont les avantages de React par rapport à Vue.js ?
React présente les avantages suivants par rapport à Vue.js :
○ Donne plus de flexibilité dans le développement de grandes
applications.
○ Plus facile à tester.
○ Convient pour la création d'applications mobiles.
○ Plus d'informations et solutions disponibles.
Remarque : La liste d'avantages ci-dessus est purement subjective et

varie en fonction de l'expérience professionnelle. Mais ils sont utiles en
tant que paramètres de base.
Retour au sommet
.
Quelle est la différence entre React et Angular ?
Voyons la différence entre React et Angular dans un format de
tableau.
201.Réagir 202. Angulaire
203.React est une bibliothèque et 204.Angular est un framework et
n'a que la couche View possède des fonctionnalités MVC
complètes
205.React gère le rendu côté 206.AngularJS rend uniquement
serveur côté client mais Angular 2 et
supérieur rend côté serveur
207. React utilise JSX qui 208.Angular suit l'approche de
ressemble à HTML dans JS, ce qui modèle pour HTML, ce qui rend le
peut prêter à confusion code plus court et facile à
comprendre
209.React Native, qui est un type 210. Ionic, l'application native
205.React gère le rendu côté 206.AngularJS rend uniquement
serveur côté client mais Angular 2 et
supérieur rend côté serveur
207. React utilise JSX qui 208.Angular suit l'approche de
ressemble à HTML dans JS, ce qui modèle pour HTML, ce qui rend le
peut prêter à confusion code plus court et facile à
comprendre
209.React Native, qui est un type 210. Ionic, l'application native
React pour créer des applications mobile d'Angular est relativement
mobiles plus rapides et plus moins stable et plus lente
stables
211. Dans React, les données ne 212. Dans Angular, les données
circulent que dans un sens et le circulent dans les deux sens, c'est-
débogage est donc facile à-dire qu'elles ont une liaison de
données bidirectionnelle entre les
enfants et le parent et que le
débogage est donc souvent
difficile.
Remarque : La liste de différences ci-dessus est purement subjective et
varie en fonction de l'expérience professionnelle. Mais ils sont utiles en
tant que paramètres de base.
Retour au sommet
.
Pourquoi l'onglet React n'apparaît pas dans DevTools ?
Lorsque la page se charge, React DevTools définit un global
nommé __REACT_DEVTOOLS_GLOBAL_HOOK__, puis React
communique avec ce crochet lors de l'initialisation. Si le site Web
n'utilise pas React ou si React ne parvient pas à communiquer avec
DevTools, l'onglet n'apparaîtra pas.
Retour au sommet
.
Que sont les composants stylés ?
styled-componentsest une bibliothèque JavaScript pour styliser les
applications React. Il supprime le mappage entre les styles et les
composants et vous permet d'écrire du CSS réel augmenté de
JavaScript.
Retour au sommet
.
Donnez un exemple de composants stylés ?
Créons des <Title>composants <Wrapper>avec des styles
spécifiques pour chacun.
. import styled from 'styled-components'
.
. // Create a <Title> component that renders an <h1> which is centered,
red and sized at 1.5em
. const Title = styled.h1`
. font-size: 1.5em;
. text-align: center;
. color: palevioletred;
.`
.
. // Create a <Wrapper> component that renders a <section> with
some padding and a papayawhip background
. const Wrapper = styled.section`
. padding: 4em;
. background: papayawhip;
.`
Ces deux variables, Titleet Wrapper, sont maintenant des

composants que vous pouvez rendre comme n'importe quel autre
composant de réaction.
<Wrapper>
. <Title>{'Lets start first styled component!'}</Title>
. </Wrapper>
Retour au sommet
.
Qu'est-ce que le relais ?
Relay est un framework JavaScript permettant de fournir une couche
de données et une communication client-serveur aux applications
Web à l'aide de la couche d'affichage React.
Retour au sommet
.
Comment utiliser TypeScript dans l' create-react-
appapplication ?
À partir de react-scripts@2.1.0 ou supérieur, il existe un support
intégré pour le tapuscrit. c'est-à-dire, create-react-appprend
désormais en charge le texte dactylographié de manière native. Vous
pouvez simplement passer l' --typescriptoption comme ci-dessous
npx create-react-app my-app --typescript
.
. # or
.
. yarn create react-app my-app --typescript
.
Mais pour les versions inférieures des scripts de réaction, fournissez

simplement l' --scripts-versionoption pendant react-scripts-tsque
vous créez un nouveau projet. react-scripts-tsest un ensemble
d'ajustements pour prendre le create-react-apppipeline de projet
standard et intégrer TypeScript dans le mélange.
La mise en page du projet devrait maintenant ressembler à ceci :
my-app/
. ├─ .gitignore
. ├─ images.d.ts
. ├─ node_modules/
. ├─ public/
. ├─ src/
. │ └─ ...
. ├─ package.json
. ├─ tsconfig.json
. ├─ tsconfig.prod.json
. ├─ tsconfig.test.json
. └─ tslint.json
.
Divers
Retour au sommet
.
Quelles sont les principales fonctionnalités de Resélectionner la
bibliothèque ?
Voyons les principales fonctionnalités de Resélectionner la
bibliothèque,
○ Selectors can compute derived data, allowing Redux to store the
minimal possible state.

○ Selectors are efficient. A selector is not recomputed unless one of
its arguments changes.

○ Selectors are composable. They can be used as input to other
selectors.
.
Give an example of Reselect usage?
Let's take calculations and different amounts of a shipment order with
the simplified usage of Reselect:
import { createSelector } from 'reselect'
.
. const shopItemsSelector = state => state.shop.items
. const taxPercentSelector = state => state.shop.taxPercent
.
. const subtotalSelector = createSelector(
. shopItemsSelector,
. items => items.reduce((acc, item) => acc + item.value, 0)
. )
.
. const taxSelector = createSelector(
. subtotalSelector,
. taxPercentSelector,
. (subtotal, taxPercent) => subtotal * (taxPercent / 100)
. )
.
. export const totalSelector = createSelector(
. subtotalSelector,
. taxSelector,
. (subtotal, tax) => ({ total: subtotal + tax })
. )
.
. let exampleState = {
. shop: {
. taxPercent: 8,
. items: [
. { name: 'apple', value: 1.20 },
. { name: 'orange', value: 0.95 },
. ]
. }
. }
.
. console.log(subtotalSelector(exampleState)) // 2.15
. console.log(taxSelector(exampleState)) // 0.172
. console.log(totalSelector(exampleState)) // { total: 2.322 }
Back to Top
.
Does the statics object work with ES6 classes in React?
No, statics only works with React.createClass():
someComponent= React.createClass({
. statics: {
. someMethod: function() {
. // ..
. }
. }
. })
.
But you can write statics inside ES6+ classes as below,

class Component extends React.Component {
. static propTypes = {
. // ...
. }
.
. static someMethod() {
. // ...
. }
.}
or writing them outside class as below,

class Component extends React.Component {
. ....
.}
.
. Component.propTypes = {...}
. Component.someMethod = function(){....}
Back to Top
.
Can Redux only be used with React?
Redux peut être utilisé comme magasin de données pour n'importe
quelle couche d'interface utilisateur. L'utilisation la plus courante est
avec React et React Native, mais il existe des liaisons disponibles
pour Angular, Angular 2, Vue, Mithril, etc. Redux fournit simplement
un mécanisme d'abonnement qui peut être utilisé par n'importe quel
autre code.
Retour au sommet
.
Avez-vous besoin d'un outil de build particulier pour utiliser
Redux ?
Redux est écrit à l'origine en ES6 et transpilé pour la production en
ES5 avec Webpack et Babel. Vous devriez pouvoir l'utiliser quel que
soit votre processus de construction JavaScript. Redux propose
également une version UMD qui peut être utilisée directement sans
aucun processus de construction.
Retour au sommet
.
Comment Redux Form initialValuesest-il mis à jour à partir de
l'state ?
.
Vous devez ajouter un enableReinitialize : trueparamètre.

const InitializeFromStateForm = reduxForm({
. form: 'initializeFromState',
. enableReinitialize : true
. })(UserEdit)
Si votre initialValuesaccessoire est mis à jour, votre formulaire sera

également mis à jour.
Retour au sommet
.
Comment React PropTypes autorise différents types pour un
accessoire ?
Vous pouvez utiliser la oneOfType()méthode de PropTypes.
Par exemple, la propriété height peut être définie avec
soit stringou numbertype comme ci-dessous :
Component.propTypes = {
. size: PropTypes.oneOfType([
. PropTypes.string,
. PropTypes.number
. ])
.}
Retour au sommet
.
Puis-je importer un fichier SVG en tant que composant de
réaction ?
Vous pouvez importer SVG directement en tant que composant au
lieu de le charger en tant que fichier. Cette fonctionnalité est
disponible avec react-scripts@2.0.0et supérieur.
import { ReactComponent as Logo } from './logo.svg'
.
. const App = () => (
. <div>
. {/* Logo is an actual react component */}
. <Logo />
. </div>
.)
Note : N'oubliez pas les accolades lors de l'import.
Retour au sommet
.
.
Pourquoi les rappels ou les fonctions de référence en ligne ne
sont-ils pas recommandés ?
Si le rappel ref est défini comme une fonction en ligne, il sera appelé
deux fois lors des mises à jour, d'abord avec null, puis à nouveau avec
l'élément DOM. En effet, une nouvelle instance de la fonction est
créée avec chaque rendu, donc React doit effacer l'ancienne
référence et configurer la nouvelle.
class UserForm extends Component {
. handleSubmit = () => {
. console.log("Input Value is: ", this.input.value)
. }
.
.
. render () {
. return (
. <input
. type='text'
. ref={(input) => this.input = input} /> // Access DOM input in
handle submit
. <button type='submit'>Submit</button>
. </form>
. )
. }
.}
Mais nous nous attendons à ce que le rappel ref soit appelé une fois,
lors du montage du composant. Une solution rapide consiste à utiliser
la syntaxe de propriété de classe ES7 pour définir la fonction
class UserForm extends Component {
. handleSubmit = () => {
. console.log("Input Value is: ", this.input.value)
. }
.
. setSearchInput = (input) => {
. this.input = input
. }
.
. render () {
. return (
. <input
. type='text'
. ref={this.setSearchInput} /> // Access DOM input in handle
.
submit
. <button type='submit'>Submit</button>
. </form>
. )
. }
. }
**Note:** In React v16.3,

Retour au sommet
.
Qu'est-ce que le détournement de rendu dans React ?
Le concept de détournement de rendu est la capacité de contrôler ce
qu'un composant produira à partir d'un autre composant. Cela
signifie que vous décorez votre composant en l'enveloppant dans un
composant d'ordre supérieur. En enveloppant, vous pouvez injecter
des props supplémentaires ou apporter d'autres modifications, ce qui
peut entraîner une modification de la logique de rendu. Cela ne
permet pas réellement le piratage, mais en utilisant HOC, vous faites
en sorte que votre composant se comporte différemment.
Retour au sommet
.
Quelles sont les implémentations d'usine HOC ?
Il existe deux manières principales d'implémenter les HOC dans
React.
○ Props Proxy (PP) et
○ Inversion d'héritage (II).
. Mais ils suivent des approches différentes pour manipuler

le WrappedComponent .
Proxy d'props
Dans cette approche, la méthode de rendu du HOC renvoie un
élément React du type de WrappedComponent. Nous passons
également par les props que le HOC reçoit, d'où le nom Props
Proxy .
function ppHOC(WrappedComponent) {
. return class PP extends React.Component {
. render() {
. return <WrappedComponent {...this.props}/>
. }
. }
.}
Inversion d'héritage
.
Dans cette approche, la classe HOC retournée (Enhancer) étend le

WrappedComponent. Il s'appelle Inheritance Inversion car au lieu que
WrappedComponent étende une classe Enhancer, il est étendu
passivement par Enhancer. De cette façon, la relation entre eux
semble inverse .
function iiHOC(WrappedComponent) {
. return class Enhancer extends WrappedComponent {
. render() {
. return super.render()
. }
. }
. }
Retour au sommet
.
Comment passer des nombres au composant React ?
Vous devriez passer les nombres via des accolades ({}) où sous
forme de chaînes entre guillemets
React.render(<User age={30} department={"IT"} />,
document.getElementById('container'));
Retour au sommet
.
Dois-je conserver tout mon state dans Redux ? Dois-je jamais
utiliser réagir l'state interne?
C'est au développeur de décider, c'est-à-dire que c'est le travail du
développeur de déterminer quels types d'states composent votre
application, et où chaque élément d'state doit vivre. Certains
utilisateurs préfèrent conserver chaque élément de données dans
Redux, pour conserver à tout moment une version entièrement
sérialisable et contrôlée de leur application. D'autres préfèrent
conserver l'state non critique ou de l'interface utilisateur, comme
« cette liste déroulante est-elle actuellement ouverte », à l'intérieur
de l'state interne d'un composant.
Vous trouverez ci-dessous les règles empiriques pour déterminer le
type de données à mettre dans Redux.
○ D'autres parties de l'application s'intéressent-elles à ces
données ?
○ Avez-vous besoin de pouvoir créer d'autres données dérivées
basées sur ces données d'origine ?

○ Les mêmes données sont-elles utilisées pour piloter plusieurs
composants ?
○ Est-il utile pour vous de pouvoir restaurer cet state à un moment
donné (c'est-à-dire, le débogage du voyage dans le temps) ?
○ Voulez-vous mettre les données en cache (c'est-à-dire utiliser ce
qui est dans l'state s'il est déjà là au lieu de le redemander) ?

Retour au sommet
.
Quel est le but de registerServiceWorker dans React ?
React crée un service worker pour vous sans aucune configuration
par défaut. Le service worker est une API Web qui vous aide à mettre
en cache vos actifs et autres fichiers afin que lorsque l'utilisateur est
hors ligne ou sur un réseau lent, il puisse toujours voir les résultats à
l'écran, en tant que tel, il vous aide à créer un meilleur utilisateur
expérience, c'est ce que vous devez savoir sur le service worker pour
l'instant. Il s'agit d'ajouter des fonctionnalités hors ligne à votre site.
import React from 'react';
. import ReactDOM from 'react-dom';
. import App from './App';
. import registerServiceWorker from './registerServiceWorker';
.
. ReactDOM.render(<App />, document.getElementById('root'));
. registerServiceWorker();
Retour au sommet
.
Qu'est-ce que la fonction de mémo React ?
Les composants de classe peuvent être empêchés de restituer
lorsque leurs props d'entrée sont les mêmes en
utilisant PureComponent ou shouldComponentUpdate . Vous
pouvez maintenant faire la même chose avec les composants de
fonction en les enveloppant dans React.memo .
const MyComponent = React.memo(function MyComponent(props) {
. /* only rerenders if props change */
. });
Retour au sommet
.
Qu'est-ce que la fonction paresseuse de React ?
La React.lazyfonction vous permet de restituer une importation
dynamique sous la forme d'un composant standard. Il chargera
automatiquement le bundle contenant le OtherComponentlorsque le
composant sera rendu. Cela doit renvoyer une promesse qui se
résout en un module avec une exportation par défaut contenant un
composant React.const OtherComponent = React.lazy(() => import('./
OtherComponent'));
.
. return (
. <div>
. <OtherComponent />
. </div>
. );
. }
Remarque : React.lazy et Suspensen'est pas encore disponible pour

le rendu côté serveur. Si vous souhaitez fractionner le code dans une
application rendue par le serveur, nous recommandons toujours
React Loadable.
Retour au sommet
.
Comment empêcher les mises à jour inutiles en utilisant
setState ?
Vous pouvez comparer la valeur actuelle de l'state avec une valeur
d'state existante et décider de réafficher ou non la page. Si les
valeurs sont les mêmes, vous devez renvoyer null pour arrêter le
nouveau rendu, sinon renvoyez la dernière valeur d'state.
Par exemple, les informations de profil utilisateur sont
conditionnellement rendues comme suit,
getUserProfile = user => {
. const latestAddress = user.address;
. this.setState(state => {
. if (state.address === latestAddress) {
. return null;
. } else {
. return { title: latestAddress };
. }
. });
. };
Retour au sommet
.
Comment rendez-vous Array, Strings et Numbers dans React 16
Version ?
Tableaux : contrairement aux anciennes versions, vous n'avez pas
besoin de vous assurer que la méthode de rendu renvoie un seul
élément dans React16. Vous pouvez renvoyer plusieurs éléments
frères sans élément d'habillage en renvoyant un tableau.
Par exemple, prenons la liste ci-dessous des développeurs,
const ReactJSDevs = () => {
. return [
. <li key="1">John</li>,
. <li key="2">Jackie</li>,
. <li key="3">Jordan</li>
. ];
. }
Vous pouvez également fusionner ce tableau d'éléments dans un

autre composant de tableau.
const JSDevs = () => {
. return (
. <ul>
. <li>Brad</li>
. <li>Brodge</li>
. <ReactJSDevs/>
. <li>Brandon</li>
. </ul>
. );
. }
Chaînes et nombres : vous pouvez également renvoyer le type de

chaîne et de nombre à partir de la méthode de rendu.
render() {
. return 'Welcome to ReactJS questions';
. }
. // Number
. render() {
. return 2018;
. }
Retour au sommet
.
Comment utiliser la syntaxe des déclarations de champs de
classe dans les classes React ?
Les composants de classe React peuvent être rendus beaucoup plus
concis en utilisant les déclarations de champ de classe. Vous pouvez
initialiser l'state local sans utiliser le constructeur et déclarer des
méthodes de classe en utilisant des fonctions fléchées sans avoir
besoin de les lier.
Prenons un contre-exemple pour démontrer les déclarations de
champ de classe pour l'state sans utiliser le constructeur et les
méthodes sans liaison,
class Counter extends Component {
. state = { value: 0 };
.
. handleIncrement = () => {
. this.setState(prevState => ({
. value: prevState.value + 1
. }));
. };
.
. handleDecrement = () => {
. this.setState(prevState => ({
. value: prevState.value - 1
. }));
. };
.
. render() {
. return (
. <div>
. {this.state.value}
.
. <button onClick={this.handleIncrement}>+</button>
. <button onClick={this.handleDecrement}>-</button>
. </div>
. )
. }
.}
Retour au sommet
.
Que sont les Hooks ?
Hooks est une nouvelle fonctionnalité (React 16.8) qui vous permet
d'utiliser l'state et d'autres fonctionnalités de React sans écrire de
classe.
Voyons un exemple de hook useState :
import { useState } from 'react';
.
. function Example() {
. // Declare a new state variable, which we'll call "count"
. const [count, setCount] = useState(0);
.
. return (
. <div>
. <p>You clicked {count} times</p>
. <button onClick={() => setCount(count + 1)}>
. Click me
. </button>
. </div>
. );
.}
Retour au sommet
.
Quelles règles doivent être suivies pour les Hooks?
Vous devez suivre deux règles afin d'utiliser des Hooks,
○ Appelez Hooks uniquement au niveau supérieur de vos fonctions
de réaction. c'est-à-dire que vous ne devez pas appeler Hooks à

l'intérieur de boucles, de conditions ou de fonctions
imbriquées. Cela garantira que les Hooks sont appelés dans le
même ordre à chaque rendu d'un composant et préserve l'state
des Hooks entre plusieurs appels useState et useEffect.
○ Appelez les hooks à partir des fonctions React uniquement. c'est-
à-dire que vous ne devriez pas appeler Hooks à partir de fonctions

JavaScript régulières.
Retour au sommet
.
Comment s'assurer que les hooks respectent les règles de votre
projet ?
L'équipe React a publié un plugin ESLint appelé eslint-plugin-react-
hooks qui applique ces deux règles. Vous pouvez ajouter ce plugin à
votre projet en utilisant la commande ci-dessous,npm install eslint-
plugin-react-hooks@next
Et appliquez la configuration ci-dessous dans votre fichier de

configuration ESLint,// Your ESLint configuration
. {
. "plugins": [
. // ...
. "react-hooks"
. ],
. "rules": {
. // ...
. "react-hooks/rules-of-hooks": "error"
. }
. }
.
Remarque : Ce plugin est destiné à être utilisé dans Create React
App par défaut.
Retour au sommet
.
Quelles sont les différences entre Flux et Redux ?
Voici les principales différences entre Flux et Redux
230. Flux 231.Redux
232.L'state est modifiable 233.L'state est immuable
234.Le magasin contient à la fois 235.La logique de stockage et de
une logique d'state et de modification est distincte
changement
236.Il existe plusieurs magasins 237. Il n'existe qu'un seul magasin
238.Tous les magasins sont 239.Magasin unique avec
déconnectés et plats réducteurs hiérarchiques
240.Il a un répartiteur singleton 241. Il n'y a pas de notion de
répartiteur
242.Les composants React 243.Les composants du conteneur
s'abonnent au magasin utilisent la fonction de connexion
Retour au sommet
.
Quels sont les avantages de React Router V4 ?
Vous trouverez ci-dessous les principaux avantages du module React
Router V4,
○ Dans React Router v4 (version 4), l'API concerne entièrement les
composants. Un routeur peut être visualisé comme un composant

unique ( <BrowserRouter>) qui encapsule des composants de
routeur enfants spécifiques ( <Route>).
○ Vous n'avez pas besoin de définir manuellement l'historique. Le
module de routeur prendra soin de l'historique en enveloppant les

routes avec le <BrowserRouter>composant.
○ La taille de l'application est réduite en ajoutant uniquement le
module de routeur spécifique (Web, noyau ou natif)

Retour au sommet
.
Pouvez-vous décrire la signature de la méthode de cycle de vie
componentDidCatch ?
La méthode de cycle de vie componentDidCatch est appelée après
qu'une erreur a été renvoyée par un composant descendant. La
méthode reçoit deux paramètres,
○ error : - L'objet d'erreur qui a été lancé
○ info : - Un objet avec une clé componentStack contient les
○
informations sur le composant qui a généré l'erreur.

. La structure de la méthode serait la suivante
componentDidCatch(error, info)
Retour au sommet
.
Dans quels scénarios les limites d'erreur n'attrapent-elles pas
les erreurs ?
Voici les cas dans lesquels les limites d'erreur ne fonctionnent pas,
○ À l'intérieur des gestionnaires d'événements
○ Code asynchrone utilisant les rappels setTimeout ou
requestAnimationFrame
○ Pendant le rendu côté serveur
○ Lorsque des erreurs sont générées dans le code de limite d'erreur
lui-même
Retour au sommet
.
Pourquoi n'avez-vous pas besoin de limites d'erreur pour les
gestionnaires d'événements ?
Les limites d'erreur n'interceptent pas les erreurs dans les
gestionnaires d'événements.
React n'a pas besoin de limites d'erreur pour récupérer des erreurs
dans les gestionnaires d'événements. Contrairement à la méthode de
rendu et aux méthodes de cycle de vie, les gestionnaires
d'événements ne se produisent pas pendant le rendu. Donc, s'ils
lancent, React sait toujours quoi afficher à l'écran.
Si vous avez besoin d'intercepter une erreur dans un gestionnaire
d'événements, utilisez l'instruction try/catch habituelle de
JavaScript :
. super(props);
. this.state = { error: null };
. this.handleClick = this.handleClick.bind(this);
. }
.
. handleClick() {
. try {
. // Do something that could throw
. } catch (error) {
. this.setState({ error });
. }
. }
.
. render() {
. if (this.state.error) {
. return <h1>Caught an error.</h1>
. }
. return <button onClick={this.handleClick}>Click Me</button>
. }
.}
Notez que l'exemple ci-dessus illustre un comportement JavaScript

normal et n'utilise pas de limites d'erreur.
Retour au sommet
.
Quelle est la différence entre le bloc try catch et les limites
d'erreur ?
Try catch block fonctionne avec du code impératif alors que les
limites d'erreur sont destinées au code déclaratif à afficher à l'écran.
Par exemple, le bloc try catch utilisé pour le code impératif ci-
dessous
try {
. showButton();
. } catch (error) {
. // ...
.}
Alors que les limites d'erreur enveloppent le code déclaratif comme

ci-dessous,
<ErrorBoundary>
. <MyComponent />
. </ErrorBoundary>
Ainsi, si une erreur se produit dans une

méthode componentDidUpdate causée par un setState quelque
part au fond de l'arborescence, elle se propagera toujours
correctement jusqu'à la limite d'erreur la plus proche.
Retour au sommet
.
Quel est le comportement des erreurs non interceptées dans
React 16 ?
Dans React 16, les erreurs qui n'ont été détectées par aucune limite
d'erreur entraîneront le démontage de l'ensemble de l'arborescence
des composants React. La raison de cette décision est qu'il est pire
de laisser une interface utilisateur corrompue en place que de la
supprimer complètement. Par exemple, il est pire pour une
application de paiement d'afficher un montant erroné que de ne rien
afficher.
Retour au sommet
.
Quel est le bon emplacement pour les limites d'erreur ?
La granularité de l'utilisation des limites d'erreur dépend du
développeur en fonction des besoins du projet. Vous pouvez suivre
l'une ou l'autre de ces approches,
○ Vous pouvez encapsuler des composants de route de niveau
supérieur pour afficher un message d'erreur générique pour

l'ensemble de l'application.
○ Vous pouvez également envelopper des composants individuels
dans une limite d'erreur pour les protéger contre le blocage du

reste de l'application.
Retour au sommet
.
Quel est l'avantage de la trace de pile de composants à partir de
la limite d'erreur ?
Outre les messages d'erreur et la pile javascript, React16 affichera la
trace de la pile des composants avec les noms de fichiers et les
numéros de ligne en utilisant le concept de limite d'erreur.
Par exemple, le composant BuggyCounter affiche la trace de la pile
du composant comme ci-dessous,
Retour au sommet
.
Quelle est la méthode requise à définir pour un composant de
classe ?
La render()méthode est la seule méthode requise dans un composant
de classe. c'est-à-dire que toutes les méthodes autres que la
méthode de rendu sont facultatives pour un composant de classe.
Retour au sommet
.
Quels sont les types de retour possibles de la méthode de
.
rendu ?
Vous trouverez ci-dessous la liste des types suivants utilisés et le
retour de la méthode de rendu,
○ Éléments React : éléments qui ordonnent à React de restituer un
nœud DOM. Il comprend des éléments HTML tels que <div/>des

éléments définis par l'utilisateur.
○ Tableaux et fragments : renvoie plusieurs éléments à afficher
sous forme de tableaux et de fragments pour envelopper plusieurs

éléments.
○ Portails : affichez les enfants dans une sous-arborescence DOM
différente.
○ Chaîne et nombres : rendre les chaînes et les nombres sous
forme de nœuds de texte dans le DOM

○ Booléens ou null : ne rend rien, mais ces types sont utilisés pour
restituer le contenu de manière conditionnelle.

Retour au sommet
.
Quel est le but principal du constructeur?
Le constructeur est principalement utilisé à deux fins,
○ Pour initialiser l'state local en affectant un objet à this.state
○ Pour lier les méthodes de gestionnaire d'événements à l'instance
Par exemple, le code ci-dessous couvre les deux cas ci-dessus,

. super(props);
. // Don't call this.setState() here!
. this.state = { counter: 0 };
. this.handleClick = this.handleClick.bind(this);
.}
Retour au sommet
.
Est-il obligatoire de définir un constructeur pour le composant
React ?
Non, ce n'est pas obligatoire. c'est-à-dire que si vous n'initialisez pas
l'state et que vous ne liez pas les méthodes, vous n'avez pas besoin
d'implémenter un constructeur pour votre composant React.
Retour au sommet
.
Quels sont les props par défaut ?
Les defaultProps sont définis comme une propriété sur la classe de
composant pour définir les props par défaut pour la classe. Ceci est
utilisé pour les props non définis, mais pas pour les props nuls.
Par exemple, créons un accessoire de couleur par défaut pour le
composant de bouton,
class MyButton extends React.Component {
. // ...
.}
.
. MyButton.defaultProps = {
. color: 'red'
. };
S'il props.colorn'est pas fourni, il définira la valeur par défaut sur

'rouge'. c'est-à-dire que chaque fois que vous essayez d'accéder à
l'accessoire de couleur, il utilise la valeur par défaut
render() {
. return <MyButton /> ; // props.color will be set to red
. }
Remarque : Si vous fournissez une valeur nulle, elle reste alors une
valeur nulle.
Retour au sommet
.
Pourquoi ne pas appeler setState dans componentWillUnmount ?
Vous ne devez pas appeler car une fois qu'une
instance setState()de componentWillUnmount()composant est
démontée, elle ne sera plus jamais montée.
Retour au sommet
.
Quel est le but de getDerivedStateFromError ?
Cette méthode de cycle de vie est appelée après qu'une erreur a été
générée par un composant descendant. Il reçoit l'erreur qui a été
renvoyée en tant que paramètre et doit renvoyer une valeur pour
mettre à jour l'state.
La signature de la méthode du cycle de vie est la suivante,
static getDerivedStateFromError(error)
Prenons le cas d'utilisation de la limite d'erreur avec la méthode de

cycle de vie ci-dessus à des fins de démonstration,
class ErrorBoundary extends React.Component {
. super(props);
. this.state = { hasError: false };
. }
.
. static getDerivedStateFromError(error) {
. // Update state so the next render will show the fallback UI.
. return { hasError: true };
. }
.
. render() {
. if (this.state.hasError) {
. // You can render any custom fallback UI
. return <h1>Something went wrong.</h1>;
. }
.
. return this.props.children;
. }
. }
Retour au sommet
.
Quel est l'ordre des méthodes lorsque le composant est rendu à
nouveau ?
Une mise à jour peut être causée par des changements d'props ou
d'state. Les méthodes ci-dessous sont appelées dans l'ordre suivant
lorsqu'un composant est restitué.
○ statique getDerivedStateFromProps()
○ devraitComponentUpdate()
○ rendre()
○ getSnapshotBeforeUpdate()
○ componentDidUpdate()
Retour au sommet
.
Quelles sont les méthodes invoquées lors de la gestion des
erreurs ?
Les méthodes ci-dessous sont appelées en cas d'erreur lors du
rendu, dans une méthode de cycle de vie ou dans le constructeur de
tout composant enfant.
○ statique getDerivedStateFromError()
○ composantDidCatch()
Retour au sommet
.
Quel est le but de la propriété de classe displayName ?
La chaîne displayName est utilisée dans les messages de
débogage. Habituellement, vous n'avez pas besoin de le définir
explicitement car il est déduit du nom de la fonction ou de la classe
qui définit le composant. Vous souhaiterez peut-être le définir
explicitement si vous souhaitez afficher un nom différent à des fins
de débogage ou lorsque vous créez un composant d'ordre supérieur.
Par exemple, pour faciliter le débogage, choisissez un nom
d'affichage qui indique qu'il s'agit du résultat d'un HOC
withSubscription.
function withSubscription(WrappedComponent) {
. class WithSubscription extends React.Component {/* ... */}
. WithSubscription.displayName = `WithSubscription($
{getDisplayName(WrappedComponent)})`;
. return WithSubscription;
. }
. function getDisplayName(WrappedComponent) {
. return WrappedComponent.displayName ||
WrappedComponent.name || 'Component';
. }
Retour au sommet
.
Quelle est la prise en charge du navigateur pour les applications
React ?
React prend en charge tous les navigateurs populaires, y compris
Internet Explorer 9 et supérieur, bien que certains polyfills soient
requis pour les navigateurs plus anciens tels que IE 9 et IE 10. Si vous
utilisez es5-shim et es5-sham polyfill, il prend même en charge les
anciens navigateurs qui ne le font pas. prend en charge les méthodes
ES5.
Retour au sommet
.
Quel est le but de la méthode unmountComponentAtNode ?
Cette méthode est disponible à partir du package react-dom et
supprime un composant React monté du DOM et nettoie ses
gestionnaires d'événements et son state. Si aucun composant n'a été
monté dans le conteneur, l'appel de cette fonction ne fait
rien. Renvoie vrai si un composant a été démonté et faux s'il n'y avait
aucun composant à démonter.
La signature de la méthode serait la suivante,
ReactDOM.unmountComponentAtNode(container)
Retour au sommet
.
Qu'est-ce que le fractionnement de code ?
Le fractionnement de code est une fonctionnalité prise en charge par
des bundles tels que Webpack et Browserify, qui peuvent créer
.
plusieurs bundles pouvant être chargés dynamiquement au moment

de l'exécution. Le projet React prend en charge le fractionnement de
code via la fonctionnalité d'importation dynamique().
Par exemple, dans les extraits de code ci-dessous, il fera de
moduleA.js et de toutes ses dépendances uniques un bloc séparé qui
ne se chargera qu'après que l'utilisateur aura cliqué sur le bouton
"Charger". moduleA.js
const moduleA = 'Hello';
.
. export { moduleA };
App.js
import React, { Component } from 'react';
.
. class App extends Component {
. handleClick = () => {
. import('./moduleA')
. .then(({ moduleA }) => {
. // Use moduleA
. })
. .catch(err => {
. // Handle failure
. });
. };
.
. render() {
. return (
. <div>
. <button onClick={this.handleClick}>Load</button>
. </div>
. );
. }
. }
.
. export default App;
Retour au sommet
.
Quel est l'intérêt du mode strict ?
Cela sera utile dans les cas ci-dessous
○ Identification des composants avec des méthodes de cycle de
vie non sécurisées .

○ Avertissement concernant l' utilisation de l'API de référence de
○
chaîne héritée .
○ Détecter les effets secondaires inattendus .
○ Détection de l' API de contexte héritée .
○ Avertissement concernant l'utilisation obsolète de findDOMNode
Retour au sommet
.
Que sont les fragments de clé ?
Les fragments déclarés avec la syntaxe explicite <React.Fragment>
peuvent avoir des clés. Le cas d'utilisation général consiste à mapper
une collection sur un tableau de fragments comme ci-dessous,
function Glossary(props) {
. return (
. <dl>
. {props.items.map(item => (
. // Without the `key`, React will fire a key warning
. <React.Fragment key={item.id}>
. <dt>{item.term}</dt>
. <dd>{item.description}</dd>
. </React.Fragment>
. ))}
. </dl>
. );
.}
Note: key is the only attribute that can be passed to Fragment. In the

future, there might be a support for additional attributes, such as
event handlers.
Back to Top
.
Does React support all HTML attributes?
As of React 16, both standard or custom DOM attributes are fully
supported. Since React components often take both custom and
DOM-related props, React uses the camelCase convention just like
the DOM APIs.
Let us take few props with respect to standard HTML attributes,
<div tabIndex="-1" /> // Just like node.tabIndex DOM API
. <div className="Button" /> // Just like node.className DOM API
. <input readOnly={true} /> // Just like node.readOnly DOM API
These props work similarly to the corresponding HTML attributes,

with the exception of the special cases. It also support all SVG
attributes.
Back to Top
.
What are the limitations with HOCs?
Higher-order components come with a few caveats apart from its
benefits. Below are the few listed in an order,
○ N'utilisez pas de HOC dans la méthode de rendu : il n'est pas
recommandé d'appliquer un HOC à un composant dans la

méthode de rendu d'un composant.
render() {
○ // A new version of EnhancedComponent is created on every
render
○ // EnhancedComponent1 !== EnhancedComponent2
○ const EnhancedComponent = enhance(MyComponent);
○ // That causes the entire subtree to unmount/remount each time!
○ return <EnhancedComponent />;
○ }
Le code ci-dessus a un impact sur les performances en remontant

un composant qui entraîne la perte de l'state de ce composant et
de tous ses enfants. Au lieu de cela, appliquez les HOC en dehors
de la définition du composant afin que le composant résultant ne
soit créé qu'une seule fois.
○ Les méthodes statiques doivent être copiées : lorsque vous

appliquez un HOC à un composant, le nouveau composant n'a
aucune des méthodes statiques du composant d'origine.
// Define a static method
○ WrappedComponent.staticMethod = function() {/*...*/}
○ // Now apply a HOC
○ const EnhancedComponent = enhance(WrappedComponent);
○
○ // The enhanced component has no static method
○ typeof EnhancedComponent.staticMethod === 'undefined' // true
Vous pouvez surmonter cela en copiant les méthodes sur le

conteneur avant de le retourner,
function enhance(WrappedComponent) {
○ class Enhance extends React.Component {/*...*/}
○ // Must know exactly which method(s) to copy :(
○ Enhance.staticMethod = WrappedComponent.staticMethod;
○ return Enhance;
○ }
○ Les références ne sont pas transmises : pour les HOC, vous
devez transmettre tous les props au composant enveloppé, mais
cela ne fonctionne pas pour les références. C'est parce que ref
n'est pas vraiment un accessoire similaire à key. Dans ce cas, vous
devez utiliser l'API React.forwardRef
Retour au sommet
.
Comment déboguer forwardRefs dans DevTools ?
React.forwardRef accepte une fonction de rendu comme paramètre
et DevTools utilise cette fonction pour déterminer ce qu'il faut
afficher pour le composant de transfert de référence.
Par exemple, si vous ne nommez pas la fonction de rendu ou si vous
n'utilisez pas la propriété displayName, elle apparaîtra sous la forme
"ForwardRef" dans DevTools,
const WrappedComponent = React.forwardRef((props, ref) => {
. return <LogProps {...props} forwardedRef={ref} />;
. });
Mais si vous nommez la fonction de rendu, elle apparaîtra sous la

forme "ForwardRef (myFunction)"
const WrappedComponent = React.forwardRef(
. function myFunction(props, ref) {
. }
. );
Comme alternative, vous pouvez également définir la propriété

displayName pour la fonction forwardRef,
function logProps(Component) {
. class LogProps extends React.Component {
. // ...
. }
.
. function forwardRef(props, ref) {
. }
.
. // Give this component a more helpful display name in DevTools.
. // e.g. "ForwardRef(logProps(MyComponent))"
. const name = Component.displayName || Component.name;
. forwardRef.displayName = `logProps(${name})`;
.
. return React.forwardRef(forwardRef);
.}
Retour au sommet
.
Lorsque les props du composant sont par défaut true ?
If you pass no value for a prop, it defaults to true. This behavior is
available so that it matches the behavior of HTML.
For example, below expressions are equivalent,
<MyInput autocomplete />
.
. <MyInput autocomplete={true} />
Note: It is not recommended to use this approach because it can be

confused with the ES6 object shorthand (example, {name} which is
short for {name: name})
Back to Top
.
What is NextJS and major features of it?
Next.js is a popular and lightweight framework for static and
server-rendered applications built with React. It also provides styling
and routing solutions. Below are the major features provided by
NextJS,
○ Server-rendered by default
○ Automatic code splitting for faster page loads
○ Simple client-side routing (page based)
○ Webpack-based dev environment which supports (HMR)
○ Able to implement with Express or any other Node.js HTTP server
○ Personnalisable avec vos propres configurations Babel et
Webpack
Retour au sommet
.
Comment passer un gestionnaire d'événement à un composant ?
Vous pouvez transmettre des gestionnaires d'événements et d'autres
fonctions en tant qu'props aux composants enfants. Il peut être
utilisé dans le composant enfant comme ci-dessous,
<button onClick={this.handleClick}>
Retour au sommet
.
Est-il bon d'utiliser des fonctions fléchées dans les méthodes de
rendu ?
.
Oui, vous pouvez utiliser. C'est souvent le moyen le plus simple de

passer des paramètres aux fonctions de rappel. Mais vous devez
optimiser les performances lors de son utilisation.
class Foo extends Component {
. handleClick() {
. console.log('Click happened');
. }
. render() {
. return <button onClick={() => this.handleClick()}>Click Me</
button>;
. }
. }
Remarque : L'utilisation d'une fonction de flèche dans la méthode de

rendu crée une nouvelle fonction à chaque rendu du composant, ce
qui peut avoir des conséquences sur les performances.
Retour au sommet
.
Comment empêcher qu'une fonction soit appelée plusieurs fois ?
Si vous utilisez un gestionnaire d'événements tel que onClick ou
onScroll et que vous souhaitez empêcher le rappel d'être déclenché
trop rapidement, vous pouvez limiter la vitesse à laquelle le rappel est
exécuté. Ceci peut être réalisé des manières possibles ci-dessous,
○ Limitation : changements basés sur une fréquence basée sur le
temps. Par exemple, il peut être utilisé à l'aide de la fonction

lodash _.throttle
○ Anti-rebond : publier les modifications après une période
d'inactivité. Par exemple, il peut être utilisé en utilisant la fonction

lodash _.debounce
○ Limitation de RequestAnimationFrame : modifications basées
sur requestAnimationFrame. Par exemple, il peut être utilisé à

l'aide de la fonction raf-schd lodash
Retour au sommet
.
Comment JSX empêche les attaques par injection ?
React DOM échappe toutes les valeurs intégrées dans JSX avant de
les rendre. Ainsi, cela garantit que vous ne pouvez jamais injecter
quoi que ce soit qui ne soit pas explicitement écrit dans votre
application. Tout est converti en chaîne avant d'être rendu.
Par exemple, vous pouvez intégrer l'entrée de l'utilisateur comme ci-
dessous,
const name = response.potentiallyMaliciousInput;
. const element = <h1>{name}</h1>;
.
De cette façon, vous pouvez empêcher les attaques XSS (Cross-site-

scripting) dans l'application.
Retour au sommet
.
Comment mettre à jour les éléments rendus ?
Vous pouvez mettre à jour l'interface utilisateur (représentée par un
élément rendu) en transmettant l'élément nouvellement créé à la
méthode de rendu de ReactDOM.
Par exemple, prenons un exemple d'horloge, où il met à jour l'heure
en appelant la méthode de rendu plusieurs fois,
function tick() {
. const element = (
. <div>
. <h1>Hello, world!</h1>
. <h2>It is {new Date().toLocaleTimeString()}.</h2>
. </div>
. );
. ReactDOM.render(element, document.getElementById('root'));
.}
.
. setInterval(tick, 1000);
Retour au sommet
.
Comment dites-vous que les props sont en lecture seule ?
Lorsque vous déclarez un composant en tant que fonction ou classe,
il ne doit jamais modifier ses propres props.
Prenons une fonction inférieure au capital,
function capital(amount, interest) {
. return amount + interest;
.}
La fonction ci-dessus est appelée "pure" car elle ne tente pas de

modifier leurs entrées et renvoie toujours le même résultat pour les
mêmes entrées. Par conséquent, React a une règle unique disant
"Tous les composants React doivent agir comme des fonctions pures
en ce qui concerne leurs props".
Retour au sommet
.
Comment dites-vous que les mises à jour d'state sont
.
fusionnées ?
Lorsque vous appelez setState() dans le composant, React fusionne
l'objet que vous fournissez dans l'state actuel.
Par exemple, prenons un utilisateur Facebook avec les détails des
publications et des commentaires comme variables d'state,
constructor(props) {
. super(props);
. this.state = {
. posts: [],
. comments: []
. };
. }
Maintenant, vous pouvez les mettre à jour indépendamment avec

des setState()appels séparés comme ci-dessous,
. fetchPosts().then(response => {
. this.setState({
. posts: response.posts
. });
. });
.
. fetchComments().then(response => {
. this.setState({
. comments: response.comments
. });
. });
. }
Comme mentionné dans les extraits de code ci-

dessus, this.setState({comments})ne met à jour que la variable
commentaires sans modifier ni remplacer postsla variable.
Retour au sommet
.
Comment passer des arguments à un gestionnaire
d'événements ?
Lors d'itérations ou de boucles, il est courant de passer un paramètre
supplémentaire à un gestionnaire d'événements. Ceci peut être
réalisé via des fonctions fléchées ou une méthode de liaison.
Prenons un exemple de fiche utilisateur mise à jour dans une grille,
<button onClick={(e) => this.updateUser(userId, e)}>Update User
details</button>
. <button onClick={this.updateUser.bind(this, userId)}>Update User
.
details</button>
Dans les deux approches, l'argument synthétique eest passé en

second argument. Vous devez le transmettre explicitement pour les
fonctions fléchées et il sera transmis automatiquement pour
la bindméthode.
Retour au sommet
.
Comment empêcher le rendu du composant ?
Vous pouvez empêcher le rendu du composant en retournant null en
fonction d'une condition spécifique. De cette façon, il peut restituer
conditionnellement le composant.
function Greeting(props) {
. if (!props.loggedIn) {
. return null;
. }
.
. return (
. <div className="greeting">
. welcome, {props.name}
. </div>
. );
.}
class User extends React.Component {

. super(props);
. this.state = {loggedIn: false, name: 'John'};
. }
.
. render() {
. return (
. <div>
. //Prevent component render if it is not loggedIn
. <Greeting loggedIn={this.state.loggedIn} />
. <UserDetails name={this.state.name}>
. </div>
. );
. }
Dans l'exemple ci-dessus, le greetingcomposant ignore sa section de

rendu en appliquant une condition et en renvoyant une valeur nulle.
Retour au sommet
.
Quelles sont les conditions pour utiliser en toute sécurité l'index
comme clé ?
Il y a trois conditions pour s'assurer qu'il est sûr d'utiliser l'index
comme clé.
○ La liste et les éléments sont statiques - ils ne sont pas calculés et
ne changent pas
○ Les éléments de la liste n'ont pas d'identifiants
○ La liste n'est jamais réorganisée ni filtrée.
Retour au sommet
.
Les clés doivent-elles être uniques au monde ?
Les clés utilisées dans les tableaux doivent être uniques parmi leurs
frères, mais elles n'ont pas besoin d'être uniques au monde. c'est-à-
dire que vous pouvez utiliser les mêmes clés avec deux tableaux
différents.
Par exemple, le Bookcomposant ci-dessous utilise deux tableaux
avec des tableaux différents,
function Book(props) {
. const index = (
. <ul>
. {props.pages.map((page) =>
. <li key={page.id}>
. {page.title}
. </li>
. )}
. </ul>
. );
. const content = props.pages.map((page) =>
. <div key={page.id}>
. <h3>{page.title}</h3>
. <p>{page.content}</p>
. <p>{page.pageNumber}</p>
. </div>
. );
. return (
. <div>
. {index}
. <hr />
. {content}
. </div>
. );
.}
.
Retour au sommet
.
Quel est le choix populaire pour la gestion des formulaires ?
Formikest une bibliothèque de formulaires pour réagir qui fournit des
solutions telles que la validation, le suivi des champs visités et la
gestion de la soumission de formulaires.
En détail, vous pouvez les classer comme suit,
○ Obtenir des valeurs dans et hors de l'state de forme
○ Messages de validation et d'erreur
○ Gestion de la soumission du formulaire
. It is used to create a scalable, performant, form helper with a minimal

API to solve annoying stuff.
Back to Top
.
What are the advantages of formik over redux form library?
Below are the main reasons to recommend formik over redux form
library,
○ The form state is inherently short-term and local, so tracking it in
Redux (or any kind of Flux library) is unnecessary.

○ Redux-Form calls your entire top-level Redux reducer multiple
times ON EVERY SINGLE KEYSTROKE. This way it increases input

latency for large apps.
○ Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB
Back to Top
.
Why are you not required to use inheritance?
Dans React, il est recommandé d'utiliser la composition plutôt que
l'héritage pour réutiliser le code entre les composants. Les props et la
composition vous offrent toute la flexibilité dont vous avez besoin
pour personnaliser explicitement et en toute sécurité l'apparence et
le comportement d'un composant. Considérant que, si vous
souhaitez réutiliser les fonctionnalités non-UI entre les composants, il
est suggéré de l'extraire dans un module JavaScript séparé. Les
composants ultérieurs l'importent et utilisent cette fonction, cet objet
ou cette classe, sans l'étendre.
Retour au sommet
.
Puis-je utiliser des composants Web dans l'application React ?
Oui, vous pouvez utiliser des composants Web dans une application
React. Même si de nombreux développeurs n'utiliseront pas cette
combinaison, cela peut être nécessaire, en particulier si vous utilisez
des composants d'interface utilisateur tiers écrits à l'aide de
composants Web.
Par exemple, utilisons Vaadinle composant Web du sélecteur de date
comme ci-dessous,
import React, { Component } from 'react';
. import './App.css';
. import '@vaadin/vaadin-date-picker';
. class App extends Component {
. render() {
. return (
. <div className="App">
. <vaadin-date-picker label="When were you born?"></vaadin-
date-picker>
. </div>
. );
. }
. }
Retour au sommet
.
Qu'est-ce que l'importation dynamique ?
Vous pouvez réaliser le fractionnement du code dans votre
application à l'aide de l'importation dynamique.
Prenons un exemple d'addition,
○ Importation normale
. import { add } from './math';

. console.log(add(10, 20));
○ Importation dynamique
. import("./math").then(math => {
. console.log(math.add(10, 20));
. });
Retour au sommet
.
Que sont les composants chargeables ?
Si vous souhaitez fractionner le code dans une application rendue par
le serveur, il est recommandé d'utiliser des composants chargeables
car React.lazy et Suspense ne sont pas encore disponibles pour le
rendu côté serveur. Loadable vous permet de restituer une
importation dynamique sous la forme d'un composant standard.
Prenons un exemple,
import loadable from '@loadable/component'
.
. const OtherComponent = loadable(() => import('./OtherComponent'))
.
. return (
. <div>
. </div>
. )
. }
Maintenant, OtherComponent sera chargé dans un bundle séparé
Retour au sommet
.
Qu'est-ce que la composante suspense ?
Si le module contenant l'importation dynamique n'est pas encore
chargé au moment du rendu du composant parent, vous devez
afficher du contenu de secours pendant que vous attendez qu'il se
charge à l'aide d'un indicateur de chargement. Cela peut être fait en
utilisant le composant Suspense .
Par exemple, le code ci-dessous utilise un composant de suspense,
const OtherComponent = React.lazy(() => import('./
OtherComponent'));
.
. return (
. <div>
. <Suspense fallback={<div>Loading...</div>}>
. </Suspense>
. </div>
. );
.}
Comme mentionné dans le code ci-dessus, Suspense est enveloppé

au-dessus du composant paresseux.
Retour au sommet
.
Qu'est-ce que le fractionnement de code basé sur l'itinéraire ?
L'un des meilleurs endroits pour diviser le code est avec les
.
routes. La page entière va être restituée en une seule fois, de sorte

que les utilisateurs n'interagiront probablement pas avec d'autres
éléments de la page en même temps. De ce fait, l'expérience
utilisateur ne sera pas perturbée.
Prenons un exemple de site Web basé sur des itinéraires utilisant des
bibliothèques telles que React Router avec React.lazy,
import { BrowserRouter as Router, Route, Switch } from 'react-router-
dom';
. import React, { Suspense, lazy } from 'react';
.
. const Home = lazy(() => import('./routes/Home'));
. const About = lazy(() => import('./routes/About'));
.
. const App = () => (
. <Router>
. <Suspense fallback={<div>Loading...</div>}>
. <Switch>
. <Route exact path="/" component={Home}/>
. <Route path="/about" component={About}/>
. </Switch>
. </Suspense>
. </Router>
. );
Dans le code ci-dessus, la division du code se produira à chaque

niveau de route.
Retour au sommet
.
Donnez un exemple sur Comment utiliser le contexte ?
Le contexte est conçu pour partager des données qui peuvent être
considérées comme globales pour un arbre de composants React.
Par exemple, dans le code ci-dessous, enfilons manuellement un
accessoire de "thème" afin de styliser le composant Button.
//Lets create a context with a default theme value "luna"
. const ThemeContext = React.createContext('luna');
. // Create App component where it uses provider to pass theme value
in the tree
. class App extends React.Component {
. render() {
. return (
. <ThemeContext.Provider value="nova">
. <Toolbar />
. </ThemeContext.Provider>
. );
. }
.}
. // A middle component where you don't need to pass theme prop
anymore
. function Toolbar(props) {
. return (
. <div>
. <ThemedButton />
. </div>
. );
.}
. // Lets read theme value in the button component to use
. class ThemedButton extends React.Component {
. static contextType = ThemeContext;
. render() {
. return <Button theme={this.context} />;
. }
.}
Retour au sommet
.
Quel est le but de la valeur par défaut dans le contexte ?
L'argument defaultValue n'est utilisé que lorsqu'un composant n'a
pas de fournisseur correspondant au-dessus de lui dans
l'arborescence. Cela peut être utile pour tester des composants
isolément sans les envelopper.
L'extrait de code ci-dessous fournit la valeur de thème par défaut en
tant que Luna.
const MyContext = React.createContext(defaultValue);
Retour au sommet
.
Comment utilisez-vous contextType ?
ContextType est utilisé pour consommer l'objet de contexte. La
propriété contextType peut être utilisée de deux manières,
○ contextType en tant que propriété de classe : la propriété
contextType d'une classe peut être affectée à un objet Context

créé par React.createContext(). Après cela, vous pouvez
consommer la valeur actuelle la plus proche de ce type de
contexte en utilisant this.context dans l'une des méthodes de
cycle de vie et la fonction de rendu.
Attribuons la propriété contextType sur MyClass comme ci-
dessous,
class MyClass extends React.Component {
○ componentDidMount() {
○ let value = this.context;
○ /* perform a side-effect at mount using the value of MyContext
*/
○ }
○ componentDidUpdate() {
○ /* ... */
○ }
○ componentWillUnmount() {
○ /* ... */
○ }
○ render() {
○ /* render something based on the value of MyContext */
○ }
○ }
○ MyClass.contextType = MyContext;
○ Champ statique Vous pouvez utiliser un champ de classe statique

pour initialiser votre contextType à l'aide de la syntaxe de champ
de classe publique.
class MyClass extends React.Component {
○ static contextType = MyContext;
○ render() {
○ /* render something based on the value */
○ }
○ }
Retour au sommet
.
Qu'est-ce qu'un consommateur ?
Un Consumer est un composant React qui s'abonne aux
changements de contexte. Il nécessite une fonction en tant qu'enfant
qui reçoit la valeur de contexte actuelle en tant qu'argument et
renvoie un nœud de réaction. L'argument de valeur passé à la
fonction sera égal à la valeur prop du fournisseur le plus proche pour
ce contexte ci-dessus dans l'arborescence.
Prenons un exemple simple,
<MyContext.Consumer>
. {value => /* render something based on the context value */}
. </MyContext.Consumer>
Retour au sommet
.
Comment résolvez-vous les cas critiques de performances tout
en utilisant le contexte ?
Le contexte utilise l'identité de référence pour déterminer quand re-
rendre, il y a des pièges qui pourraient déclencher des rendus
involontaires chez les consommateurs lorsque le parent d'un
fournisseur re-rend.
Par exemple, le code ci-dessous restituera tous les consommateurs
chaque fois que le fournisseur effectuera un nouveau rendu, car un
nouvel objet est toujours créé pour la valeur.
. render() {
. return (
. <Provider value={{something: 'something'}}>
. <Toolbar />
. </Provider>
. );
. }
.}
Cela peut être résolu en élevant la valeur à l'state parent,

. super(props);
. this.state = {
. value: {something: 'something'},
. };
. }
.
. render() {
. return (
. <Provider value={this.state.value}>
. <Toolbar />
. </Provider>
. );
. }
.}
Retour au sommet
.
Quel est le but de la référence avancée dans les HOC ?
Les références ne seront pas transmises car la référence n'est pas un
accessoire. Il est géré différemment par React, tout comme key . Si
vous ajoutez une référence à un HOC, la référence fera référence au
composant de conteneur le plus externe, et non au composant
enveloppé. Dans ce cas, vous pouvez utiliser l'API Forward Ref. Par
exemple, nous pouvons transmettre explicitement les références au
composant FancyButton interne à l'aide de l'API React.forwardRef.
Le HOC ci-dessous enregistre tous les props,
function logProps(Component) {
. class LogProps extends React.Component {
. componentDidUpdate(prevProps) {
. console.log('old props:', prevProps);
. console.log('new props:', this.props);
. }
.
. render() {
. const {forwardedRef, ...rest} = this.props;
.
. // Assign the custom prop "forwardedRef" as a ref
. return <Component ref={forwardedRef} {...rest} />;
. }
. }
.
. return React.forwardRef((props, ref) => {
. });
. }
Utilisons ce HOC pour enregistrer tous les props qui sont transmis à
notre composant "bouton fantaisie",
class FancyButton extends React.Component {
. focus() {
. // ...
. }
.
. // ...
. }
. export default logProps(FancyButton);
.
Créons maintenant une référence et transmettons-la au composant

FancyButton. Dans ce cas, vous pouvez définir le focus sur l'élément
de bouton.
import FancyButton from './FancyButton';
.
. const ref = React.createRef();
. ref.current.focus();
. <FancyButton
. label="Click Me"
. handleClick={handleClick}
. ref={ref}
. />;
Retour au sommet
.
L'argument ref est-il disponible pour toutes les fonctions ou
composants de classe ?
Les composants normaux de fonction ou de classe ne reçoivent pas
l'argument ref, et ref n'est pas non plus disponible dans les props. Le
deuxième argument ref n'existe que lorsque vous définissez un
composant avec l'appel React.forwardRef.
Retour au sommet
.
Pourquoi avez-vous besoin d'une attention supplémentaire pour
les bibliothèques de composants lors de l'utilisation de
références avancées ?
Lorsque vous commencez à utiliser forwardRef dans une bibliothèque
de composants, vous devez le traiter comme une modification avec
rupture et publier une nouvelle version majeure de votre
bibliothèque. En effet, votre bibliothèque a probablement un
comportement différent, par exemple à quoi les références sont
affectées et quels types sont exportés. Ces modifications peuvent
casser les applications et autres bibliothèques qui dépendent de
l'ancien comportement.
Retour au sommet
.
Comment créer des composants de classe React sans ES6 ?
Si vous n'utilisez pas ES6, vous devrez peut-être utiliser le module
create-react-class à la place. Pour les props par défaut, vous devez
définir getDefaultProps() en tant que fonction sur l'objet passé. Alors
que pour l'state initial, vous devez fournir une méthode getInitialState
distincte qui renvoie l'state initial.
var Greeting = createReactClass({
. getDefaultProps: function() {
. return {
. name: 'Jhohn'
. };
. },
. getInitialState: function() {
. return {message: this.props.message};
. },
. handleClick: function() {
. console.log(this.state.message);
. },
. render: function() {
. return <h1>Hello, {this.props.name}</h1>;
. }
. });
Remarque : Si vous utilisez createReactClass, la liaison automatique

est disponible pour toutes les méthodes. c'est-à-dire que vous
n'avez pas besoin d'utiliser .bind(this)le constructeur in pour les
gestionnaires d'événements.
Retour au sommet
.
Est-il possible d'utiliser React sans JSX ?
Oui, JSX n'est pas obligatoire pour utiliser React. En fait, c'est
pratique lorsque vous ne souhaitez pas configurer la compilation
dans votre environnement de construction. Chaque élément JSX
n'est qu'un sucre syntaxique pour
appeler React.createElement(component, props, ...children).
Prenons par exemple un exemple de salutation avec JSX,
. render() {
. return <div>Hello {this.props.message}</div>;
. }
.}
.
. ReactDOM.render(
. <Greeting message="World" />,
. document.getElementById('root')
. );
Vous pouvez écrire le même code sans JSX comme ci-dessous,

. render() {
. return React.createElement('div', null, `Hello ${this.props.message}
`);
. }
.}
.
. ReactDOM.render(
. React.createElement(Greeting, {message: 'World'}, null),
. document.getElementById('root')
. );
Retour au sommet
.
Qu'est-ce qu'un algorithme différent ?
React doit utiliser des algorithmes pour savoir comment mettre à jour
efficacement l'interface utilisateur pour qu'elle corresponde à
l'arborescence la plus récente. Les différents algorithmes génèrent le
nombre minimum d'opérations pour transformer un arbre en un
autre. Cependant, les algorithmes ont une complexité de l'ordre de
O(n3) où n est le nombre d'éléments dans l'arbre.
Dans ce cas, afficher 1000 éléments nécessiterait de l'ordre d'un
milliard de comparaisons. C'est beaucoup trop cher. Au lieu de cela,
React implémente un algorithme heuristique O(n) basé sur deux
hypothèses :
○ Deux éléments de types différents produiront des arbres
différents.
○ Le développeur peut indiquer quels éléments enfants peuvent être
stables sur différents rendus avec un accessoire clé.

Retour au sommet
.
Quelles sont les règles couvertes par l'algorithme différent?
Lors de la différenciation de deux arbres, React compare d'abord les
deux éléments racine. Le comportement est différent selon les types
d'éléments racine. Il couvre les règles ci-dessous lors de l'algorithme
de réconciliation,
○ Éléments de différents types : chaque fois que les éléments
racine ont des types différents, React détruira l'ancien arbre et

construira le nouvel arbre à partir de zéro. Par exemple, des
éléments vers ou de vers de types différents entraînent une
reconstruction complète.
○ Éléments DOM du même type : lors de la comparaison de deux
éléments DOM React du même type, React examine les attributs

des deux, conserve le même nœud DOM sous-jacent et ne met à
○
jour que les attributs modifiés. Prenons un exemple avec les

mêmes éléments DOM sauf l'attribut className,<div
className="show" title="ReactJS" />
○
○ <div className="hide" title="ReactJS" />
○ Éléments de composant du même type : lorsqu'un composant

est mis à jour, l'instance reste la même, de sorte que l'state est
conservé d'un rendu à l'autre. React met à jour les props de
l'instance de composant sous-jacente pour correspondre au
nouvel élément et appelle componentWillReceiveProps() et
componentWillUpdate() sur l'instance sous-jacente. Après cela, la
méthode render() est appelée et l'algorithme diff se répète sur le
résultat précédent et le nouveau résultat.
○ Récurrence sur les enfants : lors de la récurrence sur les enfants
d'un nœud DOM, React itère simplement sur les deux listes
d'enfants en même temps et génère une mutation chaque fois qu'il
y a une différence. Par exemple, lors de l'ajout d'un élément à la
fin des enfants, la conversion entre ces deux arbres fonctionne
bien.<ul>
○ <li>first</li>
○ <li>second</li>
○ </ul>
○
○ <ul>
○ <li>first</li>
○ <li>second</li>
○ <li>third</li>
○ </ul>
○ Handling keys: React supports a key attribute. When children

have keys, React uses the key to match children in the original tree
with children in the subsequent tree. For example, adding a key
can make the tree conversion efficient,
.<ul>
. <li key="2015">Duke</li>
. <li key="2016">Villanova</li>
.</ul>
.
. <ul>
. <li key="2014">Connecticut</li>
. <li key="2015">Duke</li>
. <li key="2016">Villanova</li>
. </ul>
Back to Top
.
When do you need to use refs?
There are few use cases to go for refs,
○ Managing focus, text selection, or media playback.
○ Triggering imperative animations.
○ Integrating with third-party DOM libraries.
Back to Top
.
Must prop be named as render for render props?
Even though the pattern named render props, you don’t have to use a
prop named render to use this pattern. i.e, Any prop that is a function
that a component uses to know what to render is technically a
“render prop”. Lets take an example with the children prop for render
props,
<Mouse children={mouse => (
. <p>The mouse position is {mouse.x}, {mouse.y}</p>
. )}/>
En fait, le prop children n'a pas besoin d'être nommé dans la liste des
"attributs" dans l'élément JSX. Au lieu de cela, vous pouvez le garder
directement à l'intérieur de l'élément,
<Mouse>
. {mouse => (
. <p>The mouse position is {mouse.x}, {mouse.y}</p>
. )}
. </Mouse>
Lors de l'utilisation de cette technique ci-dessus (sans aucun nom),

indiquez explicitement que les enfants doivent être une fonction dans
vos propTypes.
Mouse.propTypes = {
. children: PropTypes.func.isRequired
. };
Retour au sommet
.
Quels sont les problèmes liés à l'utilisation d'props de rendu avec
des composants purs ?
.
Si vous créez une fonction dans une méthode de rendu, cela annule
le but du composant pur. Parce que la comparaison d'props
superficiels renverra toujours false pour les nouveaux props, et
chaque rendu dans ce cas générera une nouvelle valeur pour
l'accessoire de rendu. Vous pouvez résoudre ce problème en
définissant la fonction de rendu comme méthode d'instance.
Retour au sommet
.
Comment créez-vous HOC à l'aide d'props de rendu ?
Vous pouvez implémenter la plupart des composants d'ordre
supérieur (HOC) à l'aide d'un composant standard avec un
accessoire de rendu. Par exemple, si vous préférez avoir un
withMouse HOC au lieu d'un composant, vous pouvez facilement en
créer un en utilisant un regular avec un render prop.
function withMouse(Component) {
. return class extends React.Component {
. render() {
. return (
. <Mouse render={mouse => (
. <Component {...this.props} mouse={mouse} />
. )}/>
. );
. }
. }
.}
De cette façon, render props donnent la flexibilité d'utiliser l'un ou

l'autre des modèles.
Retour au sommet
.
Qu'est-ce que la technique du fenêtrage ?
Le fenêtrage est une technique qui ne restitue qu'un petit sous-
ensemble de vos lignes à un moment donné et peut réduire
considérablement le temps nécessaire pour restituer les composants
ainsi que le nombre de nœuds DOM créés. Si votre application affiche
de longues listes de données, cette technique est
recommandée. React-window et react-virtualized sont des
bibliothèques de fenêtrage populaires qui fournissent plusieurs
composants réutilisables pour afficher des listes, des grilles et des
données tabulaires.
Retour au sommet
.
Comment imprimez-vous de fausses valeurs dans JSX?
.
The falsy values such as false, null, undefined, and true are valid
children but they don't render anything. If you still want to display
them then you need to convert it to string. Let's take an example on
how to convert to a string,
<div>
. My JavaScript variable is {String(myVariable)}.
. </div>
Back to Top
.
What is the typical use case of portals?
React portals are very useful when a parent component has overflow:
hidden or has properties that affect the stacking context (e.g. z-
index, position, opacity) and you need to visually “break out” of its
container.
For example, dialogs, global message notifications, hovercards, and
tooltips.
Back to Top
.
How do you set default value for uncontrolled component?
In React, the value attribute on form elements will override the value
in the DOM. With an uncontrolled component, you might want React
to specify the initial value, but leave subsequent updates
uncontrolled. To handle this case, you can specify
a defaultValue attribute instead of value.
render() {
. return (
. <label>
. User Name:
. <input
. defaultValue="John"
. type="text"
. ref={this.input} />
. </label>
. <input type="submit" value="Submit" />
. </form>
. );
.}
The same applies for select and textArea inputs. But you need to

use defaultChecked for checkbox and radio inputs.
.
Back to Top
.
What is your favorite React stack?
Même si la pile technologique varie d'un développeur à l'autre, la pile
la plus populaire est utilisée dans le code de projet réutilisable. Il
utilise principalement Redux et redux-saga pour la gestion de l'state
et les effets secondaires asynchrones, le routeur de réaction à des
fins de routage, les composants de style pour le style des
composants de réaction, les axios pour l'appel de l'API REST et
d'autres piles prises en charge telles que webpack, reselect, ESNext,
Babel. Vous pouvez cloner le projet https://github.com/react-
boilerplate/react-boilerplate et commencer à travailler sur n'importe
quel nouveau projet de réaction.
Retour au sommet
.
Quelle est la différence entre Real DOM et Virtual DOM ?
Vous trouverez ci-dessous les principales différences entre Real DOM
et Virtual DOM,
299. Vrai DOM 300. DOM virtuel
301. Les mises à jour sont lentes 302.Les mises à jour sont rapides
303.La manipulation du DOM est 304.La manipulation du DOM est
très coûteuse. très facile
305.Vous pouvez mettre à jour 306.Vous ne pouvez pas mettre à
HTML directement. jour directement HTML
307. Cela cause trop de perte de 308.Il n'y a pas de perte de
mémoire mémoire
309.Crée un nouveau DOM si 310. Il met à jour le JSX si la mise à
l'élément est mis à jour jour de l'élément
Retour au sommet
.
Comment ajouter Bootstrap à une application React ?
Bootstrap peut être ajouté à votre application React de trois manières
possibles,
○ Utilisation du CDN Bootstrap : C'est le moyen le plus simple
d'ajouter bootstrap. Ajoutez les ressources bootstrap CSS et JS

dans une balise head.
○ Bootstrap en tant que dépendance : si vous utilisez un outil de
construction ou un groupeur de modules tel que Webpack, il s'agit

de l'option préférée pour ajouter Bootstrap à votre application
React.npm install bootstrap
○ React Bootstrap Package : Dans ce cas, vous pouvez ajouter
Bootstrap à notre application React en utilisant un package qui a
reconstruit les composants Bootstrap pour qu'ils fonctionnent
particulièrement en tant que composants React. Les forfaits ci-
dessous sont populaires dans cette catégorie,
◆ réagir-bootstrap
◆ sangle de réaction
Retour au sommet
.
Pouvez-vous répertorier les meilleurs sites Web ou applications
utilisant React comme framework frontal ?
Vous trouverez ci-dessous l' top 10 websitesutilisation de React
comme framework frontal,
○ Facebook
○ Uber
○ Instagram
○ Whatsapp
○ Académie Khan
○ Airbnb
○ Boîte de dépôt
○ Flipboard
○ Netflix
○ Pay Pal
Retour au sommet
.
Est-il recommandé d'utiliser la technique CSS In JS dans React ?
React n'a aucune opinion sur la façon dont les styles sont définis,
mais si vous êtes débutant, un bon point de départ est de définir vos
styles dans un fichier *.css séparé comme d'habitude et de vous y
référer en utilisant className. Cette fonctionnalité ne fait pas partie
de React mais provient de bibliothèques tierces. Mais si vous voulez
essayer une approche différente (CSS-In-JS), la bibliothèque de
composants de style est une bonne option.
Retour au sommet
.
Dois-je réécrire tous mes composants de classe avec des hooks ?
Non. Mais vous pouvez essayer Hooks dans quelques composants
(ou de nouveaux composants) sans réécrire le code existant. Parce
qu'il n'est pas prévu de supprimer des classes dans ReactJS.
Retour au sommet
.
Comment récupérer des données avec React Hooks ?
Le crochet d'effet appelé useEffectest utilisé pour récupérer les
.
données avec axios à partir de l'API et pour définir les données dans
l'state local du composant avec la fonction de mise à jour du crochet
d'state.
Prenons un exemple dans lequel il récupère la liste des articles de
réaction de l'API
import React, { useState, useEffect } from 'react';
. import axios from 'axios';
.
. function App() {
. const [data, setData] = useState({ hits: [] });
.
. useEffect(() => {
. (async () => {
. const result = await axios(
. 'http://hn.algolia.com/api/v1/search?query=react',
. );
.
. setData(result.data);
. })()
. }, []);
.
. return (
. <ul>
. {data.hits.map(item => (
. <li key={item.objectID}>
. <a href={item.url}>{item.title}</a>
. </li>
. ))}
. </ul>
. );
.}
.
N'oubliez pas que nous avons fourni un tableau vide comme

deuxième argument du hook d'effet pour éviter de l'activer lors des
mises à jour du composant, mais uniquement lors du montage du
composant. c'est-à-dire qu'il récupère uniquement sur le montage du
composant.
Retour au sommet
.
Hooks couvre-t-il tous les cas d'utilisation des classes ?
Hooks doesn't cover all use cases of classes but there is a plan to
.
add them soon. Currently there are no Hook equivalents to the

uncommon getSnapshotBeforeUpdate and componentDidCatch lif
ecycles yet.
Back to Top
.
What is the stable release for hooks support?
React includes a stable implementation of React Hooks in 16.8
release for below packages
○ React DOM
○ React DOM Server
○ React Test Renderer
○ React Shallow Renderer
Back to Top
.
Why do we use array destructuring (square brackets notation)
in useState?
Lorsque nous déclarons une variable d'state avec useState, elle
renvoie une paire - un tableau avec deux éléments. Le premier
élément est la valeur actuelle et le second est une fonction qui met à
jour la valeur. Utiliser [0] et [1] pour y accéder est un peu déroutant
car ils ont une signification spécifique. C'est pourquoi nous utilisons
plutôt la déstructuration de tableau.
Par exemple, l'accès à l'index du tableau ressemblerait à ceci :
var userStateVariable = useState('userProfile'); // Returns an array
pair
. var user = userStateVariable[0]; // Access first item
. var setUser = userStateVariable[1]; // Access second item
Alors qu'avec la déstructuration de tableau, les variables sont

accessibles comme suit :
const [user, setUser] = useState('userProfile');
Retour au sommet
.
Quelles sont les sources utilisées pour introduire les Hooks ?
Hooks a obtenu les idées de plusieurs sources différentes. Voici
quelques-uns d'entre eux,
○ Expériences précédentes avec des API fonctionnelles dans le
référentiel react-future
○ Expériences de la communauté avec des API de prop de rendu
telles que Reactions Component

○ Variables d'state et cellules d'state dans DisplayScript.
○ Abonnements en Rx.
○ Composants réducteurs dans ReasonReact.
Retour au sommet
.
Comment accéder à l'API impérative des composants Web ?
Les composants Web exposent souvent une API impérative pour
implémenter ses fonctions. Vous devrez utiliser une référence pour
interagir directement avec le nœud DOM si vous souhaitez accéder à
l'API impérative d'un composant Web. Mais si vous utilisez des
composants Web tiers, la meilleure solution consiste à écrire un
composant React qui se comporte comme un wrapper pour votre
composant Web.
Retour au sommet
.
Qu'est-ce que le formik ?
Formik est une petite bibliothèque de formulaires de réaction qui
vous aide à résoudre les trois problèmes majeurs,
○ Obtenir des valeurs dans et hors de l'state de forme
○ Messages de validation et d'erreur
○ Gestion de la soumission du formulaire
Retour au sommet
.
Quels sont les choix de middleware typiques pour gérer les
appels asynchrones dans Redux ?
Certains des choix de middleware populaires pour gérer les appels
asynchrones dans l'écosystème Redux sont Redux Thunk, Redux
Promise, Redux Saga.
Retour au sommet
.
Les navigateurs comprennent-ils le code JSX ?
Non, les navigateurs ne peuvent pas comprendre le code JSX. Vous
avez besoin d'un transpiler pour convertir votre JSX en Javascript
normal que les navigateurs peuvent comprendre. Le transpileur le
plus utilisé actuellement est Babel.
Retour au sommet
.
Décrivez le flux de données en réaction ?
React implémente un flux de données réactif unidirectionnel à l'aide
d'props qui réduisent le passe-partout et sont plus faciles à
comprendre que la liaison de données bidirectionnelle traditionnelle.
Retour au sommet
.
Qu'est-ce que les scripts de réaction ?
Le react-scriptspackage est un ensemble de scripts du pack de
démarrage create-react-app qui vous aide à lancer des projets sans
.
configuration. La react-scripts startcommande configure

l'environnement de développement et démarre un serveur, ainsi que
le rechargement à chaud du module.
Retour au sommet
.
Quelles sont les fonctionnalités de créer une application de
réaction ?
Vous trouverez ci-dessous la liste de certaines des fonctionnalités
fournies par l'application de création de réaction.
○ Prise en charge de la syntaxe React, JSX, ES6, Typescript et Flow.
○ CSS préfixé automatiquement
○ CSS Réinitialiser/Normaliser
○ Un serveur de développement en direct
○ Un exécuteur de test unitaire interactif rapide avec prise en charge
intégrée des rapports de couverture

○ Un script de construction pour regrouper JS, CSS et des images
pour la production, avec des hachages et des cartes source

○ Un travailleur de service hors ligne et un manifeste d'application
Web, répondant à tous les critères de l'application Web

progressive.
Retour au sommet
.
Quel est le but de la méthode renderToNodeStream ?
La ReactDOMServer#renderToNodeStreamméthode est utilisée pour
générer du code HTML sur le serveur et envoyer le balisage lors de la
demande initiale pour des chargements de page plus rapides. Il aide
également les moteurs de recherche à explorer facilement vos pages
à des fins de référencement. Remarque : N'oubliez pas que cette
méthode n'est pas disponible dans le navigateur, mais uniquement
sur le serveur.
Retour au sommet
.
Qu'est-ce que MobX ?
MobX est une solution de gestion d'state simple, évolutive et
éprouvée pour l'application de la programmation réactive
fonctionnelle (TFRP). Pour l'application reactJs, vous devez installer
les packages ci-dessous,npm install mobx --save
. npm install mobx-react --save
Retour au sommet
.
Quelles sont les différences entre Redux et MobX ?
Voici les principales différences entre Redux et MobX,
318. Sujet 319.Redux 320. MobX
321. Définition 322.C'est une 323.C'est une
bibliothèque javascript bibliothèque pour
pour gérer l'state de gérer de manière
l'application réactive l'state de vos
applications
324.Programmation 325.Il est 326.Il est écrit en
principalement écrit JavaScript (ES5)
en ES6
327. Magasin de 328.Il n'y a qu'un seul 329.Il y a plus d'un
données grand magasin pour le magasin pour le
stockage de données stockage
330.Usage 331. Principalement 332.Utilisé pour des
utilisé pour les applications simples
applications
importantes et
complexes
333.Performance 334.Besoin d'être 335.Fournit de
amélioré meilleures
performances
336.Comment il 337. Utilise JS Object 338.Utilise observable
stocke pour stocker pour stocker les
données
Retour au sommet
.
Dois-je apprendre ES6 avant d'apprendre ReactJS ?
Non, vous n'avez pas besoin d'apprendre es2015/es6 pour apprendre
à réagir. Mais vous pouvez trouver de nombreuses ressources ou
l'écosystème React utilise largement ES6. Voyons quelques-unes des
fonctionnalités ES6 fréquemment utilisées,
○ Déstructuration : pour obtenir des props et les utiliser dans un
composant// in es 5
○ var someData = this.props.someData
○ var dispatch = this.props.dispatch
○
○ // in es6
○ const { someData, dispatch } = this.props
○ Opérateur Spread : aide à transmettre les props dans un

composant// in es 5
○ <SomeComponent someData={this.props.someData}
○
dispatch={this.props.dispatch} />
○
○ // in es6
○ <SomeComponent {...this.props} />
○ Fonctions fléchées : rend la syntaxe compacte// es 5

○ var users = usersList.map(function (user) {
○ return <li>{user.name}</li>
○ })
○ // es 6
○ const users = usersList.map(user => <li>{user.name}</li>);
Retour au sommet
.
Qu'est-ce que le rendu simultané ?
Le rendu simultané rend les applications React plus réactives en
rendant les arborescences de composants sans bloquer le thread
principal de l'interface utilisateur. Il permet à React d'interrompre un
rendu de longue durée pour gérer un événement hautement
prioritaire. c'est-à-dire que lorsque vous avez activé le mode
simultané, React gardera un œil sur les autres tâches qui doivent être
effectuées, et s'il y a quelque chose avec une priorité plus élevée, il
mettra en pause ce qu'il est en train de rendre et laissera l'autre
tâche se terminer en premier. Vous pouvez l'activer de deux
manières,
// 1. Part of an app by wrapping with ConcurrentMode
. <React.unstable_ConcurrentMode>
. <Something />
. </React.unstable_ConcurrentMode>
.
. // 2. Whole app using createRoot
. ReactDOM.unstable_createRoot(domNode).render(<App />);
Retour au sommet
.
Quelle est la différence entre le mode asynchrone et le mode
concurrent ?
Les deux font référence à la même chose. Auparavant, le mode
simultané était appelé "mode asynchrone" par l'équipe React. Le nom
a été changé pour mettre en évidence la capacité de React à
effectuer des travaux sur différents niveaux de priorité. Ainsi, cela
évite la confusion des autres approches du rendu asynchrone.
Retour au sommet
.
Puis-je utiliser des URL javascript dans react16.9 ?
Oui, vous pouvez utiliser javascript: URLs mais cela enregistrera un
avertissement dans la console. Parce que les URL commençant par
javascript : sont dangereuses en incluant une sortie non nettoyée
dans une balise comme <a href>et créent une faille de sécurité.
const companyProfile = {
. website: "javascript: alert('Your website is hacked')",
. };
. // It will log a warning
. <a href={companyProfile.website}>More details</a>
N'oubliez pas que les futures versions généreront une erreur pour les
URL javascript.
Retour au sommet
.
Quel est le but du plugin eslint pour les hooks ?
Le plugin ESLint applique les règles des Hooks pour éviter les
bogues. Il suppose que toute fonction commençant par "use" et une
lettre majuscule juste après est un Hook. En particulier, la règle
impose que,
○ Les appels à Hooks sont soit à l'intérieur d'une fonction
PascalCase (supposée être un composant), soit d'une autre

fonction useSomething (supposée être un Hook personnalisé).
○ Les Hooks sont appelés dans le même ordre sur chaque rendu.
Retour au sommet
.
Quelle est la différence entre impératif et déclaratif dans React ?
Imaginez un simple composant d'interface utilisateur, tel qu'un
bouton "J'aime". Lorsque vous appuyez dessus, il devient bleu s'il
était auparavant gris et gris s'il était auparavant bleu.
La manière impérative de le faire serait:
if( user.likes() ) {
. if( hasBlue() ) {
. removeBlue();
. addGrey();
. } else {
. removeGrey();
. addBlue();
. }
.}
.
Fondamentalement, vous devez vérifier ce qui est actuellement à

l'écran et gérer tous les changements nécessaires pour le redessiner
avec l'state actuel, y compris annuler les modifications de l'state
précédent. Vous pouvez imaginer à quel point cela pourrait être
complexe dans un scénario réel.
En revanche, l'approche déclarative serait :
if( this.state.liked ) {
. return <blueLike />;
. } else {
. return <greyLike />;
. }
Étant donné que l'approche déclarative sépare les préoccupations,

cette partie n'a besoin que de gérer l'apparence de l'interface
utilisateur dans un state spécifique, et est donc beaucoup plus simple
à comprendre.
Retour au sommet
.
Quels sont les avantages de l'utilisation de tapuscrit avec
reactjs ?
Voici quelques-uns des avantages de l'utilisation de tapuscrit avec
Reactjs,
○ Il est possible d'utiliser les dernières fonctionnalités JavaScript
○ Utilisation d'interfaces pour les définitions de types complexes
○ Des IDE tels que VS Code ont été conçus pour TypeScript
○ Évitez les bugs grâce à la facilité de lisibilité et de validation
. Retour au sommet
.
Comment vous assurez-vous que l'utilisateur reste authentifié
lors de l'actualisation de la page lors de l'utilisation de Context
API State Management ?
Lorsqu'un utilisateur se connecte et recharge, pour conserver l'state en

général, nous ajoutons l'action load user dans les Hooks useEffect dans
l'App.js principal. Lors de l'utilisation de Redux, l'action loadUser est
facilement accessible.
App.js
import {loadUser} from '../actions/auth';
store.dispatch(loadUser());
● Mais lors de l'utilisation de l' API Context , pour accéder au contexte
dans App.js, encapsulez AuthState dans index.js afin que App.js

●
puisse accéder au contexte d'authentification. Désormais, chaque fois

que la page se recharge, quel que soit l'itinéraire sur lequel vous vous
trouvez, l'utilisateur sera authentifié car l'action loadUser sera
déclenchée à chaque nouveau rendu.
index.js
import ReactDOM from 'react-dom';
import App from './App';
import AuthState from './context/auth/AuthState'
ReactDOM.render(
<React.StrictMode>
<AuthState>
<App />
</AuthState>
</React.StrictMode>,
document.getElementById('root')
);
App.js
const authContext = useContext(AuthContext);
const { loadUser } = authContext;
useEffect(() => {
loadUser();
},[])
loadUser
const loadUser = async () => {
const token = sessionStorage.getItem('token');
if(!token){
dispatch({
type: ERROR
})
}
setAuthToken(token);
try {
const res = await axios('/api/auth');
dispatch({
type: USER_LOADED,
payload: res.data.data
})
} catch (err) {
console.error(err);
}
}
Retour au sommet
.
Quels sont les avantages de la nouvelle transformation JSX ?
Il y a trois avantages majeurs de la nouvelle transformation JSX,
○ Il est possible d'utiliser JSX sans importer de packages React
○ La sortie compilée peut améliorer légèrement la taille du bundle
○ Les futures améliorations offrent la flexibilité nécessaire pour
réduire le nombre de concepts à apprendre React.

Retour au sommet
.
En quoi la nouvelle transformation JSX est-elle différente de
l'ancienne transformation ?
La nouvelle transformation JSX ne nécessite pas que React soit dans
la portée. c'est-à-dire que vous n'avez pas besoin d'importer le
package React pour des scénarios simples.
Prenons un exemple pour examiner les principales différences entre
l'ancienne et la nouvelle transformation,
Ancienne transformation :
.
. function App() {
. return <h1>Good morning!!</h1>;
.}
Maintenant, la transformation JSX convertit le code ci-dessus en

JavaScript normal comme ci-dessous,
.
. function App() {
. return React.createElement('h1', null, 'Good morning!!');
.}
Nouvelle transformation :
La nouvelle transformation JSX ne nécessite aucune importation
React
function App() {
. return <h1>Good morning!!</h1>;
.}
.
Sous le capot, la transformation JSX se compile en code ci-dessous

import {jsx as _jsx} from 'react/jsx-runtime';
.
. function App() {
. return _jsx('h1', { children: 'Good morning!!' });
.}
Remarque : Vous devez toujours importer React pour utiliser Hooks.
Retour au sommet
.
Comment obtenez-vous un échafaudage redux en utilisant
create-react-app ?
L'équipe Redux a fourni des modèles officiels redux+js ou
redux+typescript pour le projet create-react-app. La configuration du
projet généré comprend,
○ Dépendances Redux Toolkit et React-Redux
○ Créer et configurer le magasin Redux
○ React-Redux <Provider>passant le magasin aux composants
React
○ Petit exemple de "compteur" pour montrer comment ajouter la
logique redux et l'API React-Redux hooks pour interagir avec le

magasin à partir des composants
. Les commandes ci-dessous doivent être exécutées avec l'option de
modèle comme ci-dessous,
○ Modèle Javascript :
. npx create-react-app my-app --template redux
Modèle de dactylographie :
○
. npx create-react-app my-app --template redux-typescript
Retour au sommet
.
Que sont les composants React Server ?
React Server Component est un moyen d'écrire un composant React
qui est rendu côté serveur dans le but d'améliorer les performances
de l'application React. Ces composants nous permettent de charger
des composants depuis le backend.
Remarque : React Server Components est toujours en cours de
développement et n'est pas encore recommandé pour la production.
Retour au sommet
.
.
Qu'est-ce que le forage sur hélice ?
Prop Drilling est le processus par lequel vous transmettez des
données d'un composant de l'arborescence React Component à un
autre en passant par d'autres composants qui n'ont pas besoin des
données mais qui aident uniquement à les transmettre.
Retour au sommet
.
Qu'est-ce que la mutation d'state et comment la prévenir ?
State mutationse produit lorsque vous essayez de mettre à jour
l'state d'un composant sans réellement utiliser setStatela
fonction. Cela peut se produire lorsque vous essayez d'effectuer des
calculs à l'aide d'une variable d'state et que vous enregistrez sans le
savoir le résultat dans la même variable d'state. C'est la raison
principale pour laquelle il est conseillé de renvoyer de nouvelles
instances de variables d'state à partir des réducteurs en utilisant
Object.assign({}, ...) ou la syntaxe spread.
Cela peut entraîner des problèmes inconnus dans l'interface
utilisateur car la valeur de la variable d'state a été mise à jour sans
dire à React de vérifier quels composants ont été affectés par cette
mise à jour et cela peut provoquer des bogues d'interface utilisateur.
Ex:
class A extends React.component {
. super(props);
. this.state = {
. loading: false
. }
. }
.
. let { loading } = this.state;
. loading = (() => true)(); // Trying to perform an operation and directly
saving in a state variable
.}
Comment l'empêcher : assurez-vous que vos variables d'state sont

immuables en appliquant l'immuabilité en utilisant des plugins comme
Immutable.js, en utilisant toujours setStatepour effectuer des mises à
jour et en renvoyant de nouvelles instances dans des réducteurs lors
de l'envoi de valeurs d'state mises à jour.
Retour au sommet
.
Quelle est la différence entre useState et useRef hook ?
○ useState provoque le rendu des composants après les mises à jour
d'state, tandis que useRef ne provoque pas le rendu d'un
composant lorsque la valeur ou l'state change. Essentiellement,
useRef est comme une "boîte" qui peut contenir une valeur
mutable dans sa propriété (.current).
○ useState nous permet de mettre à jour l'state à l'intérieur des
composants. Alors que useRef permet de référencer les éléments
DOM.

React 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

React 1

Transféré par

Droits d'auteur :

Formats disponibles

Réagir de base

manipulations de RealDOM sont coûteuses.

La React.createElement()fonction ci-dessus renvoie un objet :

Et enfin, il rend au DOM en utilisant ReactDOM.render():

Alors qu'un composant peut être déclaré de plusieurs manières

Ensuite, JSX est transpilé dans

créer un composant. Ce sont des fonctions JavaScript pures qui

○ Composants de classe : vous pouvez également utiliser la classe

que React.Componentsauf qu'il gère

Utilisez plutôt la setState()méthode. Il planifie une mise à jour de

Remarque : Vous pouvez affecter directement l'objet d'state soit dans

Alors que dans React, il suit la convention camelCase :

○ En HTML, vous pouvez revenir falsepour empêcher le

Alors que dans React, vous devez

○ En HTML, vous devez invoquer la fonction en ajoutant () Alors que

méthodes ne sont pas liées par défaut. La même chose s'applique

○ Syntaxe des champs de classe publique : si vous n'aimez pas

○ Fonctions fléchées dans les rappels : vous pouvez utiliser les

C'est l'équivalent d'appeler .bind:

En dehors de ces deux approches, vous pouvez également passer des

l'ordre des éléments peut changer. Cela peut avoir un impact

appliquez les clés sur le composant de liste au lieu de lila balise.

n'est pas présent sur les éléments de la liste.

créées à l'aide React.createRef()de la méthode et attachées aux

○ Vous pouvez également utiliser l'approche des rappels de

. Vous pouvez également utiliser des références dans des composants

L'approche recommandée est la suivante :

d'exécution . Ceci est problématique car cela rend le module de

référence sur l'enfant passé, l'utilisateur ne peut pas mettre une

Flow. Flow ne peut pas deviner la magie que le framework fait pour

avec le modèle "rappel de rendu" (par exemple)class

de l'interface utilisateur est restituée dans la représentation du

○ Ensuite, la différence entre la représentation DOM précédente et la

prendre en charge la mise en page dans React.

Dans la plupart des cas, il est recommandé d'utiliser des composants

représentation objet de l'interface

DOM. Cette phase couvre l'initialisation à partir des méthodes , ,

○ Mise à jour : dans cette phase, le composant est mis à jour de

○ Démontage : dans cette dernière phase, le composant n'est pas

. Il convient de mentionner que React a en interne un concept de

secondaire. Cela s'applique aux composants Pure et dans cette

○ Commit React fonctionne avec le DOM et exécute les cycles de

. React 16.3+ Phases (ou une version interactive )

configuration au niveau de l'application dans votre composant

toutes les requêtes AJAX, les mises à jour DOM ou d'state et la

accessoire particulier pour déclencher des transitions d'state.

jour ou non. Par défaut, il renvoie true. Si vous êtes sûr que le

lorsqu'il y a des changements d'props et d'state confirmés

jour le DOM en réponse à des changements de propriété ou

requête réseau sortante ou supprimer tous les écouteurs

l'appel render()et invoqué à chaque rendu. Cela existe pour les

toutes les requêtes AJAX, les mises à jour DOM ou d'state et la

jour ou non. Par défaut, il renvoie true. Si vous êtes sûr que le

rendue ne soit validée dans le DOM. Toute valeur renvoyée par this

jour le DOM en réponse à des changements de propriété ou

demande réseau sortante ou supprimer tous les écouteurs

HOC peut être utilisé pour de nombreux cas d'utilisation :

Ne pas passer d'props :

Les extraits de code ci-dessus révèlent qu'il this.propsn'y a de

Au lieu de cela, passez la fonction elle-même sans parenthèse :

et réexporter MoreComponents.jsles composants dans un fichier

Vous pouvez maintenant importer le module en utilisant la fonction

mémoire en ne créant pas de nœud DOM supplémentaire. Cela n'a