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
In addition to [Hooks](/reference/react) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
7
+
En plus des [Hooks](/reference/react) et des [composants](/reference/react/components), le module `react` exporte également d'autres API utiles pour la définition des composants. Cette page répertorie toutes les autres API React modernes.
8
+
8
9
9
10
</Intro>
10
11
11
12
---
12
13
13
-
*[`createContext`](/reference/react/createContext)lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
14
-
*[`forwardRef`](/reference/react/forwardRef)lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef)
15
-
*[`lazy`](/reference/react/lazy)lets you defer loading a component's code until it's rendered for the first time.
16
-
*[`memo`](/reference/react/memo)lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo)and[`useCallback`.](/reference/react/useCallback)
17
-
*[`startTransition`](/reference/react/startTransition)lets you mark a state update as non-urgent. Similar to[`useTransition`.](/reference/react/useTransition)
14
+
-[`createContext`](/reference/react/createContext)vous permet de définir et de fournir un contexte aux composants enfants. Utilisé conjointement avec [`useContext`](/reference/react/useContext).
15
+
-[`forwardRef`](/reference/react/forwardRef)permet à votre composant d'exposer un nœud DOM en tant que référence (ref) à son parent. Utilisé conjointement avec [`useRef`](/reference/react/useRef).
16
+
-[`lazy`](/reference/react/lazy)vous permet de différer le chargement du code d'un composant jusqu'à ce qu'il soit rendu pour la première fois.
17
+
-[`memo`](/reference/react/memo)permet à votre composant dd'éviter de recalculer son rendu quand ses props n'ont pas changé. Utilisé conjointement avec [`useMemo`](/reference/react/useMemo)et[`useCallback`](/reference/react/useCallback).
18
+
-[`startTransition`](/reference/react/startTransition)vous permet de marquer une mise à jour d'état comme non urgente. Similaire à[`useTransition`](/reference/react/useTransition).
Call`createContext`outside of any components to create a context.
24
+
Appelez`createContext`en dehors de tout composant afin de créer un contexte.
24
25
25
26
```js
26
27
import { createContext } from'react';
27
28
28
29
constThemeContext=createContext('light');
29
30
```
30
31
31
-
[See more examples below.](#usage)
32
+
[Voir d'autres exemples ci-dessous](#usage).
32
33
33
-
#### Parameters {/*parameters*/}
34
+
#### Paramètres {/*parameters*/}
34
35
35
-
*`defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify`null`. The default value is meant as a "last resort" fallback. It is static and never changes over time.
36
+
*`defaultValue` : la valeur utilisée lorsqu'il n'y a pas de contexte adapté fourni au-dessus du composant qui lit ce contexte. Si vous n'avez pas de valeur par défaut appropriée, indiquez`null`. La valeur par défaut est vue comme un « dernier recours ». Elle est statique et ne change jamais au fil du temps.
36
37
37
-
#### Returns {/*returns*/}
38
+
#### Valeur renvoyée {/*returns*/}
38
39
39
-
`createContext`returns a context object.
40
+
`createContext`renvoie un objet représentant le contexte.
40
41
41
-
**The context object itself does not hold any information.**It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider)in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext)in components below to read it. The context object has a few properties:
42
+
**L'objet contexte lui-même ne contient aucune information.**Il représente _quel_ contexte les autres composants lisent ou fournissent. Vous utiliserez habituellement [`SomeContext.Provider`](#provider)dans les composants au-dessus afin de spécifier la valeur du contexte, et vous appellerez [`useContext(SomeContext)`](/reference/react/useContext)dans les composants en-dessous afin de lire cette valeur. L'objet contexte a quelques propriétés :
42
43
43
-
*`SomeContext.Provider`lets you provide the context value to components.
44
-
*`SomeContext.Consumer`is an alternative and rarely used way to read the context value.
44
+
*`SomeContext.Provider`vous permet de fournir la valeur du contexte aux composants enfants.
45
+
*`SomeContext.Consumer`est une façon alternative rarement utilisée de lire la valeur du contexte.
45
46
46
47
---
47
48
48
49
### `SomeContext.Provider` {/*provider*/}
49
50
50
-
Wrap your components into a context provider to specify the value of this context for all components inside:
51
+
Enveloppez vos composants dans un fournisseur de contexte afin de définir la valeur de ce contexte pour tous les composants enveloppés :
51
52
52
53
```js
53
54
functionApp() {
@@ -63,17 +64,17 @@ function App() {
63
64
64
65
#### Props {/*provider-props*/}
65
66
66
-
*`value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
67
-
67
+
*`value`: la valeur que vous souhaitez passer à tous les composants lisant ce contexte à l'intérieur de ce fournisseur, à quelque profondeur que ce soit. La valeur du contexte peut être de n'importe quel type. Un composant appelant [`useContext(SomeContext)`](/reference/react/useContext) à l'intérieur d'un fournisseur de contexte reçoit la `value` du fournisseur correspondant le plus proche en amont.
68
68
---
69
69
70
70
### `SomeContext.Consumer` {/*consumer*/}
71
71
72
-
Before `useContext` existed, there was an older way to read context:
72
+
Avant l'arrivée de `useContext`, il existait une ancienne façon de lire un contexte :
73
+
73
74
74
75
```js
75
76
functionButton() {
76
-
// 🟡 Legacy way (not recommended)
77
+
// 🟡 Ancienne méthode (déconseillée)
77
78
return (
78
79
<ThemeContext.Consumer>
79
80
{theme=> (
@@ -83,30 +84,30 @@ function Button() {
83
84
);
84
85
}
85
86
```
86
-
87
-
Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
88
-
87
+
Bien que cette ancienne méthode fonctionne toujours, **privilégiez la lecture d'un contexte à l'aide de [`useContext()`](/reference/react/useContext) dans du nouveau code :**
89
88
```js
90
89
functionButton() {
91
-
// ✅ Recommended way
90
+
// ✅ Méthode recommandée
92
91
consttheme=useContext(ThemeContext);
93
92
return<button className={theme} />;
94
93
}
95
94
```
96
95
97
96
#### Props {/*consumer-props*/}
98
97
99
-
*`children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/reference/react/useContext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context from the parent components changes.
98
+
*`children` : une fonction. React appellera cette fonction avec la valeur du contexte actuel, déterminée par le même algorithme que pour `useContext()`, puis affichera le résultat renvoyé par cette fonction. De plus, chaque fois que le contexte des composants parents changera, React réexécutera cette fonction et mettra à jour l'interface utilisateur en conséquence.
100
99
101
100
---
102
101
103
-
## Usage {/*usage*/}
102
+
## Utilisation {/*usage*/}
103
+
104
+
### Création d'un contexte {/*creating-context*/}
105
+
106
+
Le contexte permet aux composants de [transmettre des informations en profondeur](/learn/passing-data-deeply-with-context) sans avoir à passer explicitement des props.
104
107
105
-
### Creating context {/*creating-context*/}
106
108
107
-
Context lets components [pass information deep down](/learn/passing-data-deeply-with-context) without explicitly passing props.
109
+
Pour créer un ou plusieurs contextes, il suffit d'appeler `createContext` en dehors de tout composant.
108
110
109
-
Call `createContext` outside any components to create one or more contexts.
`createContext` returns a <CodeStepstep={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/reference/react/useContext):
119
+
`createContext` renvoie un <CodeStepstep={1}>objet contexte</CodeStep>. Les composants peuvent lire le contexte en le passant à [`useContext()`](/reference/react/useContext) :
By default, the values they receive will be the <CodeStepstep={3}>default values</CodeStep> you have specified when creating the contexts. However, by itself this isn't useful because the default values never change.
133
134
134
-
Context is useful because you can **provide other, dynamic values from your components:**
135
+
Par défaut, les valeurs reçues seront les <CodeStepstep={3}>valeurs par défaut</CodeStep> que vous avez spécifiées lors de la création des contextes. Cependant, ça n'est pas très utile en soi car les valeurs par défaut ne changent jamais.
136
+
137
+
L'utilité du contexte réside dans la possibilité de **fournir des valeurs dynamiques supplémentaires à partir de vos composants** :
138
+
135
139
136
140
```js {8-9,11-12}
137
141
functionApp() {
@@ -150,15 +154,16 @@ function App() {
150
154
}
151
155
```
152
156
153
-
Now the `Page` component and any components inside it, no matter how deep, will "see" the passed context values. If the passed context values change, React will re-render the components reading the context as well.
157
+
Désormais, le composant `Page`, ainsi que tous les composants imbriqués, quel que soit leur niveau de profondeur, auront accès aux valeurs de contexte transmises. Si ces valeurs de contexte changent, React réexécutera les composants qui les lisent.
154
158
155
-
[Read more about reading and providing context and see examples.](/reference/react/useContext)
159
+
[Apprenez-en davantage sur la fourniture et la lecture de contexte au travers d'exemples concrets](/reference/react/useContext).
156
160
157
161
---
158
162
159
-
### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/}
163
+
### Importer et exporter un contexte depuis un fichier {/*importing-and-exporting-context-from-a-file*/}
164
+
165
+
Des composants auront souvent besoin d'accéder au même contexte depuis de multiples fichiers. C'est pourquoi il est courant de déclarer les contextes dans un fichier séparé. Vous pouvez alors utiliser [l'instruction `export`](https://developer.mozilla.org/fr/docs/web/javascript/reference/statements/export) pour rendre le contexte accessible par d'autres fichiers :
160
166
161
-
Often, components in different files will need access to the same context. This is why it's common to declare contexts in a separate file. Then you can use the [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make context available for other files:
Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import)statement to read or provide this context:
176
+
Les composants déclarés dans d'autres fichiers peuvent alors utiliser l'instruction [`import`](https://developer.mozilla.org/fr/docs/web/javascript/reference/statements/import)pour lire ou fournir ce contexte :
172
177
173
178
```js {2}
174
179
// Button.js
@@ -196,22 +201,20 @@ function App() {
196
201
}
197
202
```
198
203
199
-
This works similar to [importing and exporting components.](/learn/importing-and-exporting-components)
204
+
Ça fonctionne de la même manière que [l'importation et l'exportation de composants](/learn/importing-and-exporting-components).
200
205
201
206
---
202
207
203
-
## Troubleshooting {/*troubleshooting*/}
204
-
205
-
### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/}
208
+
## Dépannage {/*troubleshooting*/}
206
209
210
+
### Je ne parviens pas à modifier la valeur du contexte {/*i-cant-find-a-way-to-change-the-context-value*/}
207
211
208
-
Code like this specifies the *default* context value:
212
+
Un code comme celui-ci spécifie la *valeur par défaut* du contexte :
209
213
210
214
```js
211
215
constThemeContext=createContext('light');
212
216
```
213
217
214
-
This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
215
-
216
-
To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
218
+
Cette valeur ne change jamais. React utilise cette valeur uniquement comme une valeur de secours si aucun fournisseur correspondant n'est trouvé au-dessus du composant lecteur.
217
219
220
+
Pour mettre à jour le contexte au fil du temps, [intégrez un état local et enveloppez vos composants avec un fournisseur de contexte](/reference/react/useContext#updating-data-passed-via-context).
0 commit comments