You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/StrictMode.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: <StrictMode>
5
5
6
6
<Intro>
7
7
8
-
`<StrictMode>` vous permet de détecter des bugs courants dans vos composants pendant le développement.
8
+
`<StrictMode>` vous permet de détecter des bugs courants dans vos composants pendant la phase de développement.
9
9
10
10
11
11
```js
@@ -89,7 +89,7 @@ Le mode strict active les vérifications suivantes en mode de développement :
89
89
- Vos composants [exécuteront les Effets une fois supplémentaire](#fixing-bugs-found-by-re-running-effects-in-development) afin de détecter les bugs causés par l'absence de nettoyage d'Effet.
90
90
- Vos composants [seront contrôlés pour l'utilisation d'API dépréciées](#fixing-deprecation-warnings-enabled-by-strict-mode).
91
91
92
-
**Ces vérifications ne fonctionnent qu'en phase de développement et n'ont aucun impact sur le*build* de production.**
92
+
**Ces vérifications ne sont effectuées qu'en phase de développement et n'ont aucun impact sur votre*build* de production.**
93
93
94
94
</Note>
95
95
@@ -134,7 +134,7 @@ Les composants qui ne respectent pas cette règle peuvent se comporter de façon
134
134
135
135
Si une fonction est pure, l'exécuter deux fois ne change pas son comportement, car une telle fonction produit le même résultat à chaque fois. Cependant, si une fonction est impure (elle modifie par exemple la donnée qu'elle reçoit), l'exécuter deux fois devrait se remarquer (c'est ce qui la rend impure !). Ça vous aide à détecter et corriger les bugs plus rapidement.
136
136
137
-
**Voici un exemple pour illustrer comment le double rendu en mode strict vous aide à trouver des bugs plus rapidement.**
137
+
**Voici un exemple qui illustre comment le double rendu en mode strict vous aide à détecter des bugs plus tôt.**
138
138
139
139
Ce composant `StoryTray` prend un tableau de `stories` et ajoute à la fin un élément « Créer une histoire » :
140
140
@@ -212,9 +212,9 @@ li {
212
212
213
213
</Sandpack>
214
214
215
-
Il y a une erreur dans le code ci-dessus. Il est cependant facile de passer à côté car l'affichage initial semble correct.
215
+
Il y a une erreur dans le code ci-dessus. Il est cependant facile de passer à côté, dans la mesure où l'affichage initial semble correct.
216
216
217
-
Cette erreur devient bien plus notable si le composant `StoryTray` fait son rendu plusieurs fois. Par exemple, faisons un nouveau rendu de `StoryTray` avec une couleur de fond différente à chaque fois que vous le survolez :
217
+
Cette erreur devient bien plus facile à remarquer lorsque le composant `StoryTray` fait son rendu plusieurs fois. Par exemple, faisons un nouveau rendu de `StoryTray` avec une couleur de fond différente à chaque fois que vous le survolez :
items.push({ id:'create', label:'Créer une histoire' });
311
311
```
312
312
313
-
Ça rendrait [la fonction `StoryTray` pure](/learn/keeping-components-pure). À chaque appel, elle ne modifierait que la copie du tableau et n'affecterait aucun objet ou variable externe. Ça résout le bug, mais vous avez dû faire en sorte que le composant fasse plus souvent son rendu avant qu'il ne devienne évident que son comportement n'était pas correct.
313
+
Ça rendrait [la fonction `StoryTray` pure](/learn/keeping-components-pure). À chaque appel, elle ne modifierait que la copie du tableau et n'affecterait aucun objet ou variable externe. Ça résout le bug, mais vous avez dû faire en sorte que le composant fasse plus souvent son rendu pour mettre en évidence le souci dans son comportement.
314
314
315
-
**Dans cet exemple, le bug n'était pas évident. Enrobons maintenant le code original (et buggué) dans un `<StrictMode>` :**
315
+
**Dans cet exemple, le bug ne sautait pas aux yeux. Enrobons maintenant le code original (avec son bug) dans un composant`<StrictMode>` :**
316
316
317
317
<Sandpack>
318
318
@@ -393,7 +393,7 @@ li {
393
393
394
394
</Sandpack>
395
395
396
-
**Le mode strict appelle *toujours* votre fonction de rendu deux fois, afin que vous puissiez voir le problème immédiatement** (« Créer une histoire » apparaît deux fois). Ça vous permet de détecter ce genre d'erreur plus tôt dans le processus. Lorsque vous corrigez votre composant pour qu'il fasse des rendus corrects en mode strict, vous corrigez *également* de nombreux bugs potentiels en production, telle que la fonctionnalité de survol précédente :
396
+
**Le mode strict appelle *toujours* votre fonction de rendu deux fois, afin que vous puissiez voir le problème immédiatement** (« Créer une histoire » apparaît deux fois). Ça vous permet de détecter ce genre d'erreur plus tôt dans le processus de développement. Lorsque vous corrigez votre composant pour qu'il fasse des rendus corrects en mode strict, vous corrigez *également* de nombreux bugs potentiels en production, telle que la fonctionnalité de survol précédente :
397
397
398
398
<Sandpack>
399
399
@@ -658,7 +658,7 @@ Vous remarquerez que le nombre de connexions ouvertes ne cesse de grandir. Dans
658
658
659
659
Maintenant que votre Effet « fait le nettoyage » et supprime les connexions obsolètes, la fuite est réparée. Remarquez cependant que le problème n'est devenu visible qu'une fois de nouvelles fonctionnalités ajoutées (la liste déroulante).
660
660
661
-
**Dans l'exemple original, le bug n'était pas évident. Enrobez maintenant le code original (et buggué) dans un `<StrictMode>` :**
661
+
**Dans l'exemple original, le bug ne sautait pas aux yeux. Enrobez maintenant le code original (et buggué) dans un composant`<StrictMode>` :**
662
662
663
663
<Sandpack>
664
664
@@ -823,7 +823,7 @@ Sans le mode strict, il était facile de passer à côté du fait que l'Effet n
823
823
React alerte si certains composants quelque part à l'intérieur de l'arbre de `<StrictMode>` utilisent l'une de ces API dépréciées :
824
824
825
825
* [`findDOMNode`](/reference/react-dom/findDOMNode). [Voir les alternatives](/reference/react-dom/findDOMNode#alternatives).
826
-
* Les méthodes de cycle de vie `UNSAFE_` des classes telle que [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [Voir les alternatives](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles).
826
+
* Les méthodes de cycle de vie `UNSAFE_` des composants à base de classes, telles que [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [Voir les alternatives](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles).
827
827
* Les anciens contextes ([`childContextTypes`](/reference/react/Component#static-childcontexttypes), [`contextTypes`](/reference/react/Component#static-contexttypes) et [`getChildContext`](/reference/react/Component#getchildcontext)). [Voir les alternatives](/reference/react/createContext).
828
828
* Les anciennes refs textuelles ([`this.refs`](/reference/react/Component#refs)). [Voir les alternatives](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage).
0 commit comments