From 5a716fdfa813fbcc3541b1152286cb33914e7766 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Mon, 4 Mar 2019 13:45:50 +0100 Subject: [PATCH 01/10] :construction: Traduction des "Custom Hooks" --- content/docs/hooks-custom.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index ac9dad6da..d3a5a0d55 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -1,6 +1,6 @@ --- id: hooks-custom -title: Building Your Own Hooks +title: Construire vos propres Hooks permalink: docs/hooks-custom.html next: hooks-reference.html prev: hooks-rules.html @@ -8,9 +8,9 @@ prev: hooks-rules.html *Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. -Building your own Hooks lets you extract component logic into reusable functions. +Construire vos propres Hooks vous permet d'extraire la logique d'un composant sous forme de fonctions réutilisables. -When we were learning about [using the Effect Hook](/docs/hooks-effect.html#example-using-hooks-1), we saw this component from a chat application that displays a message indicating whether a friend is online or offline: +Lorsque nous apprenions à utiliser [les effets](/docs/hooks-effect.html#example-using-hooks-1), nous avons vu ce composant afficher un message dans l'application chat indiquant si un ami est en ligne ou hors-ligne. ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -30,13 +30,14 @@ function FriendStatus(props) { }); if (isOnline === null) { - return 'Loading...'; + return 'Chargement...'; } - return isOnline ? 'Online' : 'Offline'; + return isOnline ? 'En ligne' : 'Hors-ligne'; } ``` -Now let's say that our chat application also has a contact list, and we want to render names of online users with a green color. We could copy and paste similar logic above into our `FriendListItem` component but it wouldn't be ideal: +Disons maintenant que notre application chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. +Nous pouvons copier et coller une logique smilaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal. ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -63,15 +64,15 @@ function FriendListItem(props) { } ``` -Instead, we'd like to share this logic between `FriendStatus` and `FriendListItem`. +Nous aimerions plutôt partager cette logique entre `FriendStatus` et `FriendListItem` -Traditionally in React, we've had two popular ways to share stateful logic between components: [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html). We will now look at how Hooks solve many of the same problems without forcing you to add more components to the tree. +Traditionnellement en React, nous avions deux manières populaires de partager une logique d'état entre des composants : les [render props](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks peuvent résoudre la majeure partie de ces problèmes sans vous obliger à ajouter plus de composants dans l'arbre. -## Extracting a Custom Hook {#extracting-a-custom-hook} +## Extraire un Hook personnalisé {#extracting-a-custom-hook} -When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too! +Lorsque nous souhaitons partager de la logique entre deux fonctions JavaScript, nous la déplaçons dans une troisième fonction. Les composants et les Hooks sont des fonctions, ça fonctionne donc aussi pour elles ! -**A custom Hook is a JavaScript function whose name starts with "`use`" and that may call other Hooks.** For example, `useFriendStatus` below is our first custom Hook: +**Un Hook personnalisé est une fonction JavaScript dont le nom commence par "`use`" et qui peut appeler d'autres Hooks.** Par exemple, `useFriendStatus` ci-dessous est notre premier Hook personnalisé : ```js{3} import React, { useState, useEffect } from 'react'; From 1cf31fa13fc0126444908282105a4a49969866aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Mon, 4 Mar 2019 20:57:31 +0100 Subject: [PATCH 02/10] =?UTF-8?q?:construction:=20Premi=C3=A8re=20passe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-custom.md | 63 ++++++++++++++++++------------------ 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index d3a5a0d55..6c9be410c 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -36,8 +36,7 @@ function FriendStatus(props) { } ``` -Disons maintenant que notre application chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. -Nous pouvons copier et coller une logique smilaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal. +Disons maintenant que notre application chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. Nous pouvons copier et coller une logique smilaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal. ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -64,7 +63,7 @@ function FriendListItem(props) { } ``` -Nous aimerions plutôt partager cette logique entre `FriendStatus` et `FriendListItem` +Nous aimerions plutôt partager cette logique entre `FriendStatus` et `FriendListItem`. Traditionnellement en React, nous avions deux manières populaires de partager une logique d'état entre des composants : les [render props](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks peuvent résoudre la majeure partie de ces problèmes sans vous obliger à ajouter plus de composants dans l'arbre. @@ -95,11 +94,11 @@ function useFriendStatus(friendID) { } ``` -There's nothing new inside of it -- the logic is copied from the components above. Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. +Il n'y a rien de nouveau à l'intérieur -- la logique provient des composants au dessus. De la même manière que dans un composant, assurez-vous d'appeler les autres Hooks sans conditions au niveau racine de votre Hook personnalisé. -Unlike a React component, a custom Hook doesn't need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it's just like a normal function. Its name should always start with `use` so that you can tell at a glance that the [rules of Hooks](/docs/hooks-rules.html) apply to it. +Contrairement à un composant React, un Hook personnalisé n'a pas besoin d'une signature particulière. Nous pouvons décider s'il a besoin d'accepter des arguments et ce qu'il doit renvoyer. En d'autres termes, c'est une simple fonction. Son nom doit toujours commencer par `use` pour qu'au premier coup d'oeil vous sachiez que les [règles des Hooks](/docs/hooks-rules.html) s'appliquent. -The purpose of our `useFriendStatus` Hook is to subscribe us to a friend's status. This is why it takes `friendID` as an argument, and returns whether this friend is online: +L'objectif de notre Hook `useFriendStatus` est de nous inscrire au statut d'un ami. C'est pourquoi il accepte `friendID` en argument et il nous renvoie si notre ami est en ligne : ```js function useFriendStatus(friendID) { @@ -111,22 +110,22 @@ function useFriendStatus(friendID) { } ``` -Now let's see how we can use our custom Hook. +Voyons voir comment nous pouvons utiliser notre Hook personnalisé. -## Using a Custom Hook {#using-a-custom-hook} +## Utiliser un Hook personnalisé {#using-a-custom-hook} -In the beginning, our stated goal was to remove the duplicated logic from the `FriendStatus` and `FriendListItem` components. Both of them want to know whether a friend is online. +Au commencement, notre but était de supprime la logique dupliquée entre les composants `FriendStatus` et `FriendListItem`. Les deux veulent savoir si un ami est en ligne. -Now that we've extracted this logic to a `useFriendStatus` hook, we can *just use it:* +Maintenant que nous avons extrait cette logique dans un hook `useFriendStatus`, nous pouvons *simplement l'utiliser :* ```js{2} function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { - return 'Loading...'; + return 'Chargement...'; } - return isOnline ? 'Online' : 'Offline'; + return isOnline ? 'Hors-ligne' : 'En ligne'; } ``` @@ -142,19 +141,19 @@ function FriendListItem(props) { } ``` -**Is this code equivalent to the original examples?** Yes, it works in exactly the same way. If you look closely, you'll notice we didn't make any changes to the behavior. All we did was to extract some common code between two functions into a separate function. **Custom Hooks are a convention that naturally follows from the design of Hooks, rather than a React feature.** +**Ce code est-il équivalent aux exemples originaux ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons réalisé aucun changement de comportement. Tout ce que nous avons fait est de déplacer du code commun à deux fonction dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plus qu'une fonctionnalité React.** -**Do I have to name my custom Hooks starting with “`use`”?** Please do. This convention is very important. Without it, we wouldn't be able to automatically check for violations of [rules of Hooks](/docs/hooks-rules.html) because we couldn't tell if a certain function contains calls to Hooks inside of it. +**Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne seriont pas capable de vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions dire si une fonction contient des appels aux Hooks. -**Do two components using the same Hook share state?** No. Custom Hooks are a mechanism to reuse *stateful logic* (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated. +**Est-ce que deux composants utilisant le même Hook partage le même état?** Non. Les Hooks personnalisés sont un mécanisme de réutiliser d'une *logique d'état* (comme la mise en place d'une souscription et la mémorisation d'une valeur courante), mais chaque fois que l'on utilise un Hook personnalisé, tout état ou effet à l'intérieur est complétement isolé. -**How does a custom Hook get isolated state?** Each *call* to a Hook gets isolated state. Because we call `useFriendStatus` directly, from React's point of view our component just calls `useState` and `useEffect`. And as we [learned](/docs/hooks-state.html#tip-using-multiple-state-variables) [earlier](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), we can call `useState` and `useEffect` many times in one component, and they will be completely independent. +**Comment l'état d'un Hook personnalisé est-il isolé?** Chaque *appel* à un Hook se voit attribuer un état isolé. Parce que nous appelons `useFriendStatus` directement, d'un point de vue React, notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et il seront complétement indépendant. -### Tip: Pass Information Between Hooks {#tip-pass-information-between-hooks} +### Astuce: Passer de l'Information Entre les Hooks {#tip-pass-information-between-hooks} -Since Hooks are functions, we can pass information between them. +Comme les Hooks sont des fonctions, nous pouvons passer de l'information entre elles. -To illustrate this, we'll use another component from our hypothetical chat example. This is a chat message recipient picker that displays whether the currently selected friend is online: +Pour illustrer cela, nous allons utiliser un autre composant de notre hypothétique exemple de chat. Ceci est une liste de destinataire qui affiche si l'ami sélectionné est en ligne ou non : ```js{8-9,13} const friendList = [ @@ -185,43 +184,43 @@ function ChatRecipientPicker() { } ``` -We keep the currently chosen friend ID in the `recipientID` state variable, and update it if the user chooses a different friend in the `` de la liste. -Because the `useState` Hook call gives us the latest value of the `recipientID` state variable, we can pass it to our custom `useFriendStatus` Hook as an argument: +Parce que l'appel au Hook `useState` nous renvoie la dernière valeur de la variable d'état `recipientID`, nous pouvons la passer en argument à notre Hook personnalisés `useFriendStatus` : ```js const [recipientID, setRecipientID] = useState(1); const isRecipientOnline = useFriendStatus(recipientID); ``` -This lets us know whether the *currently selected* friend is online. If we pick a different friend and update the `recipientID` state variable, our `useFriendStatus` Hook will unsubscribe from the previously selected friend, and subscribe to the status of the newly selected one. +Cela nous permet de savoir si l'ami *actuellement sélectionné* est en ligne ou non. Si nous choisissons un ami différent et mettons à jour la variable d'état `recipientID`, notre Hook `useFriendStatus` va se désinscrire de l'ami précédemment sélectionné et s'inscrire au statut du nouveau sélectionné. ## `useYourImagination()` {#useyourimagination} -Custom Hooks offer the flexibility of sharing logic that wasn't possible in React components before. You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. What's more, you can build Hooks that are just as easy to use as React's built-in features. +Les Hooks personnalisés vous offre la souplesse de partage de la logique qui n'état pas possible avant avec les composants React. Vous pouvez écrire des Hooks personnalisés qui couvrent un large panel de cas d'utilisation comme la gestion des formulaires, des animations, des inscriptions déclaratives, des minuteurs et bien plus. De plus, vous pouvez construire des Hooks qui sont aussi simple à utiliser que des fonctionnalités intégrées à React. -Try to resist adding abstraction too early. Now that function components can do more, it's likely that the average function component in your codebase will become longer. This is normal -- don't feel like you *have to* immediately split it into Hooks. But we also encourage you to start spotting cases where a custom Hook could hide complex logic behind a simple interface, or help untangle a messy component. +Essayez de résister d'abstraire trop tôt. Maintenant que nos fonctions composants peuvent faire plus, il est probable que la moyenne de fonction composant dans votre base de code grossise. C'est normal -- ne vous sentez pas *obligé* de les séparer en Hooks. Mais nous vous encourageons à commencer à chercher des cas où un Hook personnalisé pourrait caché une logique complexe derrière une simple interface, ou aider à démêler un composant compliqué. -For example, maybe you have a complex component that contains a lot of local state that is managed in an ad-hoc way. `useState` doesn't make centralizing the update logic any easier so might you prefer to write it as a [Redux](https://redux.js.org/) reducer: +Par exemple, peut-être que vous avez un composant compliqué qui contient beaucoup d'état local géré d'une manière ad-hoc. `useState` ne permet pas de simplifier la centralisation d'une logique de mise à jour. Dans ce cas vous pourriez préférer l'écriture d'un reducer [Redux](https://redux.js.org/) : ```js function todosReducer(state, action) { switch (action.type) { - case 'add': + case 'ajouter': return [...state, { text: action.text, completed: false }]; - // ... other actions ... + // ... autres actions ... default: return state; } } ``` -Reducers are very convenient to test in isolation, and scale to express complex update logic. You can further break them apart into smaller reducers if necessary. However, you might also enjoy the benefits of using React local state, or might not want to install another library. +Les reducers sont très pratiques pour tester en isolation et s'adapte à l'expression de logique de mise à jour complexe. Plus tard, si besoin vous pouvez les séparer dans des reducers plus petit. Cependant, vous pourriez aussi bénéficier de l'utilisation de l'état local de React, ou vous pourriez ne pas vouloir installer une autre bibliothèque. -So what if we could write a `useReducer` Hook that lets us manage the *local* state of our component with a reducer? A simplified version of it might look like this: +Et si nous pouvions écrire un Hook `useReducer` qui nous permettrait de gérer l'état *local* de notre composant avec un reducer ? Une version simplifiée pourrait ressembler à ceci : ```js function useReducer(reducer, initialState) { @@ -236,18 +235,18 @@ function useReducer(reducer, initialState) { } ``` -Now we could use it in our component, and let the reducer drive its state management: +Maintenant que nous pouvons l'utiliser dans un composant et que le reducer commande sa gestion d'état : ```js{2} function Todos() { const [todos, dispatch] = useReducer(todosReducer, []); function handleAddClick(text) { - dispatch({ type: 'add', text }); + dispatch({ type: 'ajouter', text }); } // ... } ``` -The need to manage local state with a reducer in a complex component is common enough that we've built the `useReducer` Hook right into React. You'll find it together with other built-in Hooks in the [Hooks API reference](/docs/hooks-reference.html). +Le besion de gestion d'un état local avec un reducer dans un composant complexe est assez commun, donc nous avons directement intégré le Hook `useReducer` dans React. Vous le trouverez avec d'autres Hooks intégrés dans la [référence de l'API des Hooks](/docs/hooks-reference.html). From 1026f57cf3b2d8db8f01cbeda4070c994df2a88f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Tue, 5 Mar 2019 20:14:53 +0100 Subject: [PATCH 03/10] :recycle: Reformule et corrige certaines phrases --- content/docs/hooks-custom.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 6c9be410c..44372b4b7 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -10,7 +10,7 @@ prev: hooks-rules.html Construire vos propres Hooks vous permet d'extraire la logique d'un composant sous forme de fonctions réutilisables. -Lorsque nous apprenions à utiliser [les effets](/docs/hooks-effect.html#example-using-hooks-1), nous avons vu ce composant afficher un message dans l'application chat indiquant si un ami est en ligne ou hors-ligne. +Lorsque nous apprenions à utiliser [les effets](/docs/hooks-effect.html#example-using-hooks-1), nous avons vu ce composant d'une application de chat qui affiche un message lorsqu'un ami est en ligne ou hors-ligne. ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -Disons maintenant que notre application chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. Nous pouvons copier et coller une logique smilaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal. +Disons maintenant que notre application de chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. Nous pouvons copier et coller une logique smilaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal : ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -65,11 +65,11 @@ function FriendListItem(props) { Nous aimerions plutôt partager cette logique entre `FriendStatus` et `FriendListItem`. -Traditionnellement en React, nous avions deux manières populaires de partager une logique d'état entre des composants : les [render props](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks peuvent résoudre la majeure partie de ces problèmes sans vous obliger à ajouter plus de composants dans l'arbre. +Traditionnellement en React, nous avions deux manières populaires de partager une logique d'état entre des composants : les [render props](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks règlent la majeure partie de ces problèmes sans vous obliger à ajouter plus de composants dans l'arbre. ## Extraire un Hook personnalisé {#extracting-a-custom-hook} -Lorsque nous souhaitons partager de la logique entre deux fonctions JavaScript, nous la déplaçons dans une troisième fonction. Les composants et les Hooks sont des fonctions, ça fonctionne donc aussi pour elles ! +Lorsque nous souhaitons partager de la logique entre deux fonctions JavaScript, nous la séparons dans une troisième fonction. Les composants et les Hooks sont des fonctions, ça fonctionne donc aussi pour elles ! **Un Hook personnalisé est une fonction JavaScript dont le nom commence par "`use`" et qui peut appeler d'autres Hooks.** Par exemple, `useFriendStatus` ci-dessous est notre premier Hook personnalisé : @@ -114,7 +114,7 @@ Voyons voir comment nous pouvons utiliser notre Hook personnalisé. ## Utiliser un Hook personnalisé {#using-a-custom-hook} -Au commencement, notre but était de supprime la logique dupliquée entre les composants `FriendStatus` et `FriendListItem`. Les deux veulent savoir si un ami est en ligne. +Au commencement, notre but était de supprimer la logique dupliquée entre les composants `FriendStatus` et `FriendListItem`. Les deux veulent savoir si un ami est en ligne. Maintenant que nous avons extrait cette logique dans un hook `useFriendStatus`, nous pouvons *simplement l'utiliser :* @@ -143,17 +143,17 @@ function FriendListItem(props) { **Ce code est-il équivalent aux exemples originaux ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons réalisé aucun changement de comportement. Tout ce que nous avons fait est de déplacer du code commun à deux fonction dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plus qu'une fonctionnalité React.** -**Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne seriont pas capable de vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions dire si une fonction contient des appels aux Hooks. +**Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne serions pas capable de vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions dire si une fonction contient des appels aux Hooks. -**Est-ce que deux composants utilisant le même Hook partage le même état?** Non. Les Hooks personnalisés sont un mécanisme de réutiliser d'une *logique d'état* (comme la mise en place d'une souscription et la mémorisation d'une valeur courante), mais chaque fois que l'on utilise un Hook personnalisé, tout état ou effet à l'intérieur est complétement isolé. +**Est-ce que deux composants utilisant le même Hook partagent le même état?** Non. Les Hooks personnalisés sont un mécanisme de réutilisation de *logique d'état* (comme la mise en place d'une souscription et la mémorisation d'une valeur courante), mais chaque fois que l'on utilise un Hook personnalisé, tout état ou effet à l'intérieur est complétement isolé. -**Comment l'état d'un Hook personnalisé est-il isolé?** Chaque *appel* à un Hook se voit attribuer un état isolé. Parce que nous appelons `useFriendStatus` directement, d'un point de vue React, notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et il seront complétement indépendant. +**Comment l'état d'un Hook personnalisé est-il isolé?** Chaque *appel* à un Hook se voit attribuer un état isolé. Parce que nous appelons `useFriendStatus` directement, d'un point de vue React, notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et ils seront complétement indépendant. ### Astuce: Passer de l'Information Entre les Hooks {#tip-pass-information-between-hooks} Comme les Hooks sont des fonctions, nous pouvons passer de l'information entre elles. -Pour illustrer cela, nous allons utiliser un autre composant de notre hypothétique exemple de chat. Ceci est une liste de destinataire qui affiche si l'ami sélectionné est en ligne ou non : +Pour illustrer cela, nous allons utiliser un autre composant de notre hypothétique exemple de chat. Ceci est une liste de destinataire qui affiche si l'ami sélectionné est en ligne : ```js{8-9,13} const friendList = [ @@ -193,15 +193,15 @@ Parce que l'appel au Hook `useState` nous renvoie la dernière valeur de la vari const isRecipientOnline = useFriendStatus(recipientID); ``` -Cela nous permet de savoir si l'ami *actuellement sélectionné* est en ligne ou non. Si nous choisissons un ami différent et mettons à jour la variable d'état `recipientID`, notre Hook `useFriendStatus` va se désinscrire de l'ami précédemment sélectionné et s'inscrire au statut du nouveau sélectionné. +Cela nous permet de savoir si l'ami *actuellement sélectionné* est en ligne. Si nous choisissons un ami différent et mettons à jour la variable d'état `recipientID`, notre Hook `useFriendStatus` va se désinscrire de l'ami précédemment sélectionné et s'inscrire au statut du nouveau sélectionné. ## `useYourImagination()` {#useyourimagination} -Les Hooks personnalisés vous offre la souplesse de partage de la logique qui n'état pas possible avant avec les composants React. Vous pouvez écrire des Hooks personnalisés qui couvrent un large panel de cas d'utilisation comme la gestion des formulaires, des animations, des inscriptions déclaratives, des minuteurs et bien plus. De plus, vous pouvez construire des Hooks qui sont aussi simple à utiliser que des fonctionnalités intégrées à React. +Les Hooks personnalisés vous offre la souplesse de partager de la logique, ce qui n'était pas possible avant avec les composants React. Vous pouvez écrire des Hooks personnalisés qui couvrent un large panel de cas d'utilisation comme la gestion des formulaires, des animations, des inscriptions déclaratives, des minuteurs et bien plus. De plus, vous pouvez construire des Hooks qui sont aussi simple à utiliser que des fonctionnalités intégrées à React. -Essayez de résister d'abstraire trop tôt. Maintenant que nos fonctions composants peuvent faire plus, il est probable que la moyenne de fonction composant dans votre base de code grossise. C'est normal -- ne vous sentez pas *obligé* de les séparer en Hooks. Mais nous vous encourageons à commencer à chercher des cas où un Hook personnalisé pourrait caché une logique complexe derrière une simple interface, ou aider à démêler un composant compliqué. +Essayez de résister d'abstraire trop tôt. Maintenant que nos fonctions composants peuvent faire plus, il est probable que la moyenne de fonction composant dans votre base de code grossisse. C'est normal -- ne vous sentez pas *obligé* de les séparer en Hooks. Mais nous vous encourageons à commencer à chercher des cas où un Hook personnalisé pourrait cacher une logique complexe derrière une simple interface, ou aider à démêler un composant compliqué. -Par exemple, peut-être que vous avez un composant compliqué qui contient beaucoup d'état local géré d'une manière ad-hoc. `useState` ne permet pas de simplifier la centralisation d'une logique de mise à jour. Dans ce cas vous pourriez préférer l'écriture d'un reducer [Redux](https://redux.js.org/) : +Par exemple, peut-être que vous avez un composant complexe qui contient beaucoup d'état local géré de manière ad-hoc. `useState` ne permet pas de simplifier la centralisation de la logique de mise à jour. Dans ce cas vous pourriez préférer l'écriture d'un reducer [Redux](https://redux.js.org/) : ```js function todosReducer(state, action) { @@ -218,7 +218,7 @@ function todosReducer(state, action) { } ``` -Les reducers sont très pratiques pour tester en isolation et s'adapte à l'expression de logique de mise à jour complexe. Plus tard, si besoin vous pouvez les séparer dans des reducers plus petit. Cependant, vous pourriez aussi bénéficier de l'utilisation de l'état local de React, ou vous pourriez ne pas vouloir installer une autre bibliothèque. +Les reducers sont très pratiques pour tester en isolation et sont adaptés à l'expression de logique de mise à jour complexe. Plus tard, si besoin vous pouvez les séparer dans des reducers plus petit. Cependant, vous pourriez aussi bénéficier de l'utilisation de l'état local de React, ou vous pourriez ne pas vouloir installer une autre bibliothèque. Et si nous pouvions écrire un Hook `useReducer` qui nous permettrait de gérer l'état *local* de notre composant avec un reducer ? Une version simplifiée pourrait ressembler à ceci : @@ -235,7 +235,7 @@ function useReducer(reducer, initialState) { } ``` -Maintenant que nous pouvons l'utiliser dans un composant et que le reducer commande sa gestion d'état : +Nous pouvons maintenant l'utiliser dans un composant et laisser le reducer commander sa gestion d'état : ```js{2} function Todos() { @@ -249,4 +249,4 @@ function Todos() { } ``` -Le besion de gestion d'un état local avec un reducer dans un composant complexe est assez commun, donc nous avons directement intégré le Hook `useReducer` dans React. Vous le trouverez avec d'autres Hooks intégrés dans la [référence de l'API des Hooks](/docs/hooks-reference.html). +Le besion de gérer un état local avec un reducer dans un composant complexe est assez commun, nous avons donc intégré le Hook `useReducer` directement dans React. Vous le trouverez ainsi que d'autres Hooks dans la [référence de l'API des Hooks](/docs/hooks-reference.html). From 49a748fbc2255b11005d5029ea0579e735aa1fa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Tue, 5 Mar 2019 20:17:33 +0100 Subject: [PATCH 04/10] :pencil2: Corrige une typo --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 44372b4b7..e4f36e72d 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -Disons maintenant que notre application de chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. Nous pouvons copier et coller une logique smilaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal : +Disons maintenant que notre application de chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. Nous pouvons copier et coller une logique similaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal : ```js{4-15} import React, { useState, useEffect } from 'react'; From 3ef5120165b29ef43e30d60d61b3ea5770e5c621 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Tue, 5 Mar 2019 20:22:58 +0100 Subject: [PATCH 05/10] :pencil2: Corrige une typo --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index e4f36e72d..ce114b93a 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -141,7 +141,7 @@ function FriendListItem(props) { } ``` -**Ce code est-il équivalent aux exemples originaux ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons réalisé aucun changement de comportement. Tout ce que nous avons fait est de déplacer du code commun à deux fonction dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plus qu'une fonctionnalité React.** +**Ce code est-il équivalent aux exemples originaux ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons réalisé aucun changement de comportement. Tout ce que nous avons fait est de déplacer du code commun à deux fonctions dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plus qu'une fonctionnalité React.** **Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne serions pas capable de vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions dire si une fonction contient des appels aux Hooks. From 3a7e479074a4b35f5026e5965283f8f33a82434a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Tue, 5 Mar 2019 20:26:00 +0100 Subject: [PATCH 06/10] :pencil2: Corrige une typo --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index ce114b93a..c3436ac28 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -147,7 +147,7 @@ function FriendListItem(props) { **Est-ce que deux composants utilisant le même Hook partagent le même état?** Non. Les Hooks personnalisés sont un mécanisme de réutilisation de *logique d'état* (comme la mise en place d'une souscription et la mémorisation d'une valeur courante), mais chaque fois que l'on utilise un Hook personnalisé, tout état ou effet à l'intérieur est complétement isolé. -**Comment l'état d'un Hook personnalisé est-il isolé?** Chaque *appel* à un Hook se voit attribuer un état isolé. Parce que nous appelons `useFriendStatus` directement, d'un point de vue React, notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et ils seront complétement indépendant. +**Comment l'état d'un Hook personnalisé est-il isolé?** Chaque *appel* à un Hook se voit attribuer un état isolé. Parce que nous appelons `useFriendStatus` directement, d'un point de vue React notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et ils seront complétement indépendant. ### Astuce: Passer de l'Information Entre les Hooks {#tip-pass-information-between-hooks} From d4acd64c31c0db92ea7932c158fa2f8f0c53f127 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Tue, 5 Mar 2019 20:29:12 +0100 Subject: [PATCH 07/10] :recycle: Reformule --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index c3436ac28..1d85c3035 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -197,7 +197,7 @@ Cela nous permet de savoir si l'ami *actuellement sélectionné* est en ligne. S ## `useYourImagination()` {#useyourimagination} -Les Hooks personnalisés vous offre la souplesse de partager de la logique, ce qui n'était pas possible avant avec les composants React. Vous pouvez écrire des Hooks personnalisés qui couvrent un large panel de cas d'utilisation comme la gestion des formulaires, des animations, des inscriptions déclaratives, des minuteurs et bien plus. De plus, vous pouvez construire des Hooks qui sont aussi simple à utiliser que des fonctionnalités intégrées à React. +Les Hooks personnalisés vous offre la souplesse de partager de la logique, ce qui n'était pas possible avant avec les composants React. Vous pouvez écrire des Hooks personnalisés qui couvrent un large panel de cas d'utilisation comme la gestion des formulaires, des animations, des inscriptions déclaratives, des minuteurs et bien plus. De plus, vous pouvez construire des Hooks qui sont aussi simple à utiliser que des fonctionnalités de React. Essayez de résister d'abstraire trop tôt. Maintenant que nos fonctions composants peuvent faire plus, il est probable que la moyenne de fonction composant dans votre base de code grossisse. C'est normal -- ne vous sentez pas *obligé* de les séparer en Hooks. Mais nous vous encourageons à commencer à chercher des cas où un Hook personnalisé pourrait cacher une logique complexe derrière une simple interface, ou aider à démêler un composant compliqué. From 5b6387343a5d7e64f17f317812248fdc29e8891a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Tue, 5 Mar 2019 20:31:43 +0100 Subject: [PATCH 08/10] :recycle: Reformule --- content/docs/hooks-custom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 1d85c3035..264fc2c27 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -199,7 +199,7 @@ Cela nous permet de savoir si l'ami *actuellement sélectionné* est en ligne. S Les Hooks personnalisés vous offre la souplesse de partager de la logique, ce qui n'était pas possible avant avec les composants React. Vous pouvez écrire des Hooks personnalisés qui couvrent un large panel de cas d'utilisation comme la gestion des formulaires, des animations, des inscriptions déclaratives, des minuteurs et bien plus. De plus, vous pouvez construire des Hooks qui sont aussi simple à utiliser que des fonctionnalités de React. -Essayez de résister d'abstraire trop tôt. Maintenant que nos fonctions composants peuvent faire plus, il est probable que la moyenne de fonction composant dans votre base de code grossisse. C'est normal -- ne vous sentez pas *obligé* de les séparer en Hooks. Mais nous vous encourageons à commencer à chercher des cas où un Hook personnalisé pourrait cacher une logique complexe derrière une simple interface, ou aider à démêler un composant compliqué. +Essayez de résister d'abstraire trop tôt. Maintenant que nos fonctions composants peuvent faire plus, il est probable que la moyenne de fonction composant dans votre base de code grossisse. C'est normal -- ne vous sentez pas *obligé* de les séparer en Hooks. Mais nous vous encourageons de commencer à repérer des cas où un Hook personnalisé pourrait cacher une logique complexe derrière une simple interface, ou aider à démêler un composant compliqué. Par exemple, peut-être que vous avez un composant complexe qui contient beaucoup d'état local géré de manière ad-hoc. `useState` ne permet pas de simplifier la centralisation de la logique de mise à jour. Dans ce cas vous pourriez préférer l'écriture d'un reducer [Redux](https://redux.js.org/) : From f12e260fcad5cfeb5e2b98365b5845e1687189e1 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Wed, 6 Mar 2019 22:23:40 +0100 Subject: [PATCH 09/10] Apply suggestions from code review Co-Authored-By: charlyx --- content/docs/hooks-custom.md | 60 ++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 264fc2c27..8bc311f89 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -6,11 +6,11 @@ next: hooks-reference.html prev: hooks-rules.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +Les *Hooks* sont une nouveauté de React 16.8. Ils permettent de bénéficier d’un état local et d'autres fonctionnalités de React sans avoir à écrire de classes. Construire vos propres Hooks vous permet d'extraire la logique d'un composant sous forme de fonctions réutilisables. -Lorsque nous apprenions à utiliser [les effets](/docs/hooks-effect.html#example-using-hooks-1), nous avons vu ce composant d'une application de chat qui affiche un message lorsqu'un ami est en ligne ou hors-ligne. +Lorsque nous apprenions à utiliser [le Hook d’effet](/docs/hooks-effect.html#example-using-hooks-1), nous avons vu ce composant d'une application de chat qui affiche un message selon qu’un ami est en ligne ou hors-ligne. ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -Disons maintenant que notre application de chat posséde aussi une liste de contact et que nous souhaitons afficher les noms des utilisateurs en ligne en vert. Nous pouvons copier et coller une logique similaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal : +Disons maintenant que notre application de chat possède aussi une liste de contacts et que nous souhaitons afficher en vert les noms des utilisateurs qui sont en ligne. Nous pourrions copier et coller une logique similaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal : ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -65,11 +65,11 @@ function FriendListItem(props) { Nous aimerions plutôt partager cette logique entre `FriendStatus` et `FriendListItem`. -Traditionnellement en React, nous avions deux manières populaires de partager une logique d'état entre des composants : les [render props](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks règlent la majeure partie de ces problèmes sans vous obliger à ajouter plus de composants dans l'arbre. +Traditionnellement en React, nous avions deux manières répandues de partager une logique d'état entre des composants : les [props de rendu](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks règlent la majeure partie de ces problèmes sans vous obliger à ajouter des composants dans l'arbre. ## Extraire un Hook personnalisé {#extracting-a-custom-hook} -Lorsque nous souhaitons partager de la logique entre deux fonctions JavaScript, nous la séparons dans une troisième fonction. Les composants et les Hooks sont des fonctions, ça fonctionne donc aussi pour elles ! +Lorsque nous souhaitons partager de la logique entre deux fonctions JavaScript, nous l'extrayons dans une troisième fonction. Les composants et les Hooks sont des fonctions, ça fonctionne donc aussi pour eux ! **Un Hook personnalisé est une fonction JavaScript dont le nom commence par "`use`" et qui peut appeler d'autres Hooks.** Par exemple, `useFriendStatus` ci-dessous est notre premier Hook personnalisé : @@ -94,11 +94,11 @@ function useFriendStatus(friendID) { } ``` -Il n'y a rien de nouveau à l'intérieur -- la logique provient des composants au dessus. De la même manière que dans un composant, assurez-vous d'appeler les autres Hooks sans conditions au niveau racine de votre Hook personnalisé. +Il n'y a rien de nouveau à l'intérieur ; la logique provient des composants vus plus haut. Comme lorsque vous êtes dans un composant, assurez-vous d'appeler les autres Hooks de façon inconditionnelle et au niveau racine de votre Hook personnalisé. -Contrairement à un composant React, un Hook personnalisé n'a pas besoin d'une signature particulière. Nous pouvons décider s'il a besoin d'accepter des arguments et ce qu'il doit renvoyer. En d'autres termes, c'est une simple fonction. Son nom doit toujours commencer par `use` pour qu'au premier coup d'oeil vous sachiez que les [règles des Hooks](/docs/hooks-rules.html) s'appliquent. +Contrairement à un composant React, un Hook personnalisé n'a pas besoin d'avoir une signature particulière. Nous pouvons décider s'il a besoin d'accepter des arguments et ce qu'il doit éventuellement renvoyer. En d'autres termes, c'est une simple fonction. Son nom doit toujours commencer par `use` pour qu'au premier coup d'œil vous sachiez que les [règles des Hooks](/docs/hooks-rules.html) lui sont applicables. -L'objectif de notre Hook `useFriendStatus` est de nous inscrire au statut d'un ami. C'est pourquoi il accepte `friendID` en argument et il nous renvoie si notre ami est en ligne : +L'objectif de notre Hook `useFriendStatus` est de nous abonner au statut d'un ami. C'est pourquoi il prend `friendID` comme argument et nous renvoie si notre ami est en ligne : ```js function useFriendStatus(friendID) { @@ -110,11 +110,11 @@ function useFriendStatus(friendID) { } ``` -Voyons voir comment nous pouvons utiliser notre Hook personnalisé. +Voyons maintenant comment nous pouvons utiliser notre Hook personnalisé. ## Utiliser un Hook personnalisé {#using-a-custom-hook} -Au commencement, notre but était de supprimer la logique dupliquée entre les composants `FriendStatus` et `FriendListItem`. Les deux veulent savoir si un ami est en ligne. +À la base, notre but était de supprimer la logique dupliquée entre les composants `FriendStatus` et `FriendListItem`. Les deux veulent savoir si un ami est en ligne. Maintenant que nous avons extrait cette logique dans un hook `useFriendStatus`, nous pouvons *simplement l'utiliser :* @@ -125,7 +125,7 @@ function FriendStatus(props) { if (isOnline === null) { return 'Chargement...'; } - return isOnline ? 'Hors-ligne' : 'En ligne'; + return isOnline ? 'En ligne' : 'Hors-ligne'; } ``` @@ -141,19 +141,19 @@ function FriendListItem(props) { } ``` -**Ce code est-il équivalent aux exemples originaux ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons réalisé aucun changement de comportement. Tout ce que nous avons fait est de déplacer du code commun à deux fonctions dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plus qu'une fonctionnalité React.** +**Ce code est-il équivalent aux exemples de départ ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons en rien changé le comportement. Tout ce que nous avons fait, c’est déplacer du code commun à deux fonctions dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plutôt qu'une véritable fonctionnalité de React.** -**Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne serions pas capable de vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions dire si une fonction contient des appels aux Hooks. +**Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne pourrions pas vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions être sûrs qu’une fonction contient des appels à des Hooks. -**Est-ce que deux composants utilisant le même Hook partagent le même état?** Non. Les Hooks personnalisés sont un mécanisme de réutilisation de *logique d'état* (comme la mise en place d'une souscription et la mémorisation d'une valeur courante), mais chaque fois que l'on utilise un Hook personnalisé, tout état ou effet à l'intérieur est complétement isolé. +**Est-ce que deux composants utilisant le même Hook partagent le même état ?** Non. Les Hooks personnalisés sont un mécanisme de réutilisation de *logique à état* (comme la mise en place d'un abonnement et la mémorisation de sa valeur courante), mais chaque fois qu'on utilise un Hook personnalisé, tous les états et effets qu’il utilise sont totalement isolés. -**Comment l'état d'un Hook personnalisé est-il isolé?** Chaque *appel* à un Hook se voit attribuer un état isolé. Parce que nous appelons `useFriendStatus` directement, d'un point de vue React notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et ils seront complétement indépendant. +**Comment l'état d'un Hook personnalisé est-il isolé ?** Chaque *appel* à un Hook se voit attribuer un état isolé. Comme nous appelons `useFriendStatus` directement, du point de vue de React notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et ils seront complètement indépendants. -### Astuce: Passer de l'Information Entre les Hooks {#tip-pass-information-between-hooks} +### Astuce: passer de l'Information entre les Hooks {#tip-pass-information-between-hooks} -Comme les Hooks sont des fonctions, nous pouvons passer de l'information entre elles. +Comme les Hooks sont des fonctions, nous pouvons passer de l'information entre eux. -Pour illustrer cela, nous allons utiliser un autre composant de notre hypothétique exemple de chat. Ceci est une liste de destinataire qui affiche si l'ami sélectionné est en ligne : +Pour illustrer ça, nous allons utiliser un autre composant de notre hypothétique exemple de chat. Voici un sélecteur de destinataire de message qui affiche si l'ami sélectionné est en ligne : ```js{8-9,13} const friendList = [ @@ -184,29 +184,29 @@ function ChatRecipientPicker() { } ``` -Nous gardons l'ID de l'ami choisi dans la variable d'état `recipientID`, et nous la mettons à jour si l'utilisateur choisi un ami différent dans le `` de la liste. -Parce que l'appel au Hook `useState` nous renvoie la dernière valeur de la variable d'état `recipientID`, nous pouvons la passer en argument à notre Hook personnalisés `useFriendStatus` : +Puisque l'appel au Hook `useState` nous renvoie la dernière valeur de la variable d'état `recipientID`, nous pouvons la passer en argument à notre Hook personnalisé `useFriendStatus` : ```js const [recipientID, setRecipientID] = useState(1); const isRecipientOnline = useFriendStatus(recipientID); ``` -Cela nous permet de savoir si l'ami *actuellement sélectionné* est en ligne. Si nous choisissons un ami différent et mettons à jour la variable d'état `recipientID`, notre Hook `useFriendStatus` va se désinscrire de l'ami précédemment sélectionné et s'inscrire au statut du nouveau sélectionné. +Nous pouvons ainsi savoir si l'ami *actuellement sélectionné* est en ligne. Si nous sélectionnons un autre ami et mettons à jour la variable d'état `recipientID`, notre Hook `useFriendStatus` va se désabonner de l'ami précédemment sélectionné et s'abonner au statut de son remplaçant. ## `useYourImagination()` {#useyourimagination} -Les Hooks personnalisés vous offre la souplesse de partager de la logique, ce qui n'était pas possible avant avec les composants React. Vous pouvez écrire des Hooks personnalisés qui couvrent un large panel de cas d'utilisation comme la gestion des formulaires, des animations, des inscriptions déclaratives, des minuteurs et bien plus. De plus, vous pouvez construire des Hooks qui sont aussi simple à utiliser que des fonctionnalités de React. +Les Hooks personnalisés offrent une souplesse de partage de logique qui n'était pas possible avec les composants React auparavant. Vous pouvez écrire des Hooks personnalisés qui couvrent un large éventail de cas d'usage tels que la gestion de formulaires, les animations, les abonnements déclaratifs, les horloges et probablement de nombreux autres auxquels nous n'avons pas pensé. Qui plus est, vous pouvez construire des Hooks qui sont aussi simples à utiliser que les fonctionnalités fournies par React. -Essayez de résister d'abstraire trop tôt. Maintenant que nos fonctions composants peuvent faire plus, il est probable que la moyenne de fonction composant dans votre base de code grossisse. C'est normal -- ne vous sentez pas *obligé* de les séparer en Hooks. Mais nous vous encourageons de commencer à repérer des cas où un Hook personnalisé pourrait cacher une logique complexe derrière une simple interface, ou aider à démêler un composant compliqué. +Essayez de résister à la tentation de faire des extractions prématurées de Hooks. À présent que les fonctions composants peuvent en faire plus, il est probable que les fonctions composants de votre base de code grossissent, en moyenne. C'est normal : ne vous sentez pas *obligé·e* d’en extraire des Hooks. Ceci dit, nous vous encourageons tout de même à commencer à repérer des cas où un Hook personnalisé pourrait masquer une logique complexe derrière une interface simple, ou aider à démêler un composant dont le code est incompréhensible. -Par exemple, peut-être que vous avez un composant complexe qui contient beaucoup d'état local géré de manière ad-hoc. `useState` ne permet pas de simplifier la centralisation de la logique de mise à jour. Dans ce cas vous pourriez préférer l'écriture d'un reducer [Redux](https://redux.js.org/) : +Par exemple, peut-être avez-vous un composant complexe qui contient beaucoup d'états locaux gérés de manière *ad hoc*. `useState` ne facilite pas la centralisation de la logique de mise à jour, du coup vous préféreriez peut-être la ré-écrire sous forme de réducteur [Redux](https://redux.js.org/) : ```js function todosReducer(state, action) { switch (action.type) { - case 'ajouter': + case 'add': return [...state, { text: action.text, completed: false @@ -218,9 +218,9 @@ function todosReducer(state, action) { } ``` -Les reducers sont très pratiques pour tester en isolation et sont adaptés à l'expression de logique de mise à jour complexe. Plus tard, si besoin vous pouvez les séparer dans des reducers plus petit. Cependant, vous pourriez aussi bénéficier de l'utilisation de l'état local de React, ou vous pourriez ne pas vouloir installer une autre bibliothèque. +Les réducteurs sont très pratiques à tester en isolation, et permettent d'exprimer lisiblement des logiques de mise à jour complexes. Vous pouvez toujours les découper en réducteurs plus petits si besoin. Cependant, vous pourriez aussi apprécier la gestion d'état local de React, ou ne pas vouloir installer une autre bibliothèque. -Et si nous pouvions écrire un Hook `useReducer` qui nous permettrait de gérer l'état *local* de notre composant avec un reducer ? Une version simplifiée pourrait ressembler à ceci : +Et si nous pouvions écrire un Hook `useReducer` qui nous permettrait de gérer l'état *local* de notre composant à l'aide d’un réducteur ? Une version simplifiée pourrait ressembler à ceci : ```js function useReducer(reducer, initialState) { @@ -235,18 +235,18 @@ function useReducer(reducer, initialState) { } ``` -Nous pouvons maintenant l'utiliser dans un composant et laisser le reducer commander sa gestion d'état : +Nous pourrions maintenant l'utiliser dans notre composant, et laisser le réducteur piloter sa gestion d'état : ```js{2} function Todos() { const [todos, dispatch] = useReducer(todosReducer, []); function handleAddClick(text) { - dispatch({ type: 'ajouter', text }); + dispatch({ type: 'add', text }); } // ... } ``` -Le besion de gérer un état local avec un reducer dans un composant complexe est assez commun, nous avons donc intégré le Hook `useReducer` directement dans React. Vous le trouverez ainsi que d'autres Hooks dans la [référence de l'API des Hooks](/docs/hooks-reference.html). +Le besoin de gérer un état local avec un réducteur dans un composant complexe est si fréquent que nous avons intégré le Hook `useReducer` directement dans React. Vous le trouverez avec d'autres Hooks prédéfinis dans la [référence de l'API des Hooks](/docs/hooks-reference.html). From a4dcbc5060390dc336fec43ff9d402cad072dc95 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 7 Mar 2019 00:30:39 +0100 Subject: [PATCH 10/10] Final tweaks --- content/docs/hooks-custom.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/hooks-custom.md b/content/docs/hooks-custom.md index 8bc311f89..52169755f 100644 --- a/content/docs/hooks-custom.md +++ b/content/docs/hooks-custom.md @@ -36,7 +36,7 @@ function FriendStatus(props) { } ``` -Disons maintenant que notre application de chat possède aussi une liste de contacts et que nous souhaitons afficher en vert les noms des utilisateurs qui sont en ligne. Nous pourrions copier et coller une logique similaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal : +Disons maintenant que notre application de chat possède aussi une liste de contacts et que nous souhaitons afficher en vert les noms des utilisateurs qui sont en ligne. Nous pourrions copier et coller une logique similaire à celle ci-dessus dans notre composant `FriendListItem` mais ça ne serait pas idéal : ```js{4-15} import React, { useState, useEffect } from 'react'; @@ -65,13 +65,13 @@ function FriendListItem(props) { Nous aimerions plutôt partager cette logique entre `FriendStatus` et `FriendListItem`. -Traditionnellement en React, nous avions deux manières répandues de partager une logique d'état entre des composants : les [props de rendu](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks règlent la majeure partie de ces problèmes sans vous obliger à ajouter des composants dans l'arbre. +Traditionnellement en React, nous avions deux manières répandues de partager une logique d'état entre des composants : les [props de rendu](/docs/render-props.html) et les [composants d'ordre supérieur](/docs/higher-order-components.html). Nous allons voir comment les Hooks règlent la majeure partie de ces problèmes sans vous obliger à ajouter des composants dans l'arbre. ## Extraire un Hook personnalisé {#extracting-a-custom-hook} -Lorsque nous souhaitons partager de la logique entre deux fonctions JavaScript, nous l'extrayons dans une troisième fonction. Les composants et les Hooks sont des fonctions, ça fonctionne donc aussi pour eux ! +Lorsque nous souhaitons partager de la logique entre deux fonctions JavaScript, nous l'extrayons dans une troisième fonction. Les composants et les Hooks sont des fonctions, ça fonctionne donc aussi pour eux ! -**Un Hook personnalisé est une fonction JavaScript dont le nom commence par "`use`" et qui peut appeler d'autres Hooks.** Par exemple, `useFriendStatus` ci-dessous est notre premier Hook personnalisé : +**Un Hook personnalisé est une fonction JavaScript dont le nom commence par "`use`" et qui peut appeler d'autres Hooks.** Par exemple, `useFriendStatus` ci-dessous est notre premier Hook personnalisé : ```js{3} import React, { useState, useEffect } from 'react'; @@ -116,7 +116,7 @@ Voyons maintenant comment nous pouvons utiliser notre Hook personnalisé. À la base, notre but était de supprimer la logique dupliquée entre les composants `FriendStatus` et `FriendListItem`. Les deux veulent savoir si un ami est en ligne. -Maintenant que nous avons extrait cette logique dans un hook `useFriendStatus`, nous pouvons *simplement l'utiliser :* +Maintenant que nous avons extrait cette logique dans un hook `useFriendStatus`, nous pouvons *simplement l'utiliser :* ```js{2} function FriendStatus(props) { @@ -141,19 +141,19 @@ function FriendListItem(props) { } ``` -**Ce code est-il équivalent aux exemples de départ ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons en rien changé le comportement. Tout ce que nous avons fait, c’est déplacer du code commun à deux fonctions dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plutôt qu'une véritable fonctionnalité de React.** +**Ce code est-il équivalent aux exemples de départ ?** Oui, il fonctionne exactement de la même manière. Si vous regardez de plus près, vous remarquerez que nous n'avons en rien changé le comportement. Tout ce que nous avons fait, c’est déplacer du code commun à deux fonctions dans une fonction séparée. **Les Hooks personnalisés sont une convention qui découle naturellement du principe des Hooks, plutôt qu'une véritable fonctionnalité de React.** -**Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne pourrions pas vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions être sûrs qu’une fonction contient des appels à des Hooks. +**Dois-je nommer mes Hooks personnalisés en commençant par "`use`" ?** Oui, s'il vous plaît. Cette convention est très importante. Sans elle, nous ne pourrions pas vérifier automatiquement les violations des [règles des Hooks](/docs/hooks-rules.html) car nous ne pourrions être sûrs qu’une fonction contient des appels à des Hooks. **Est-ce que deux composants utilisant le même Hook partagent le même état ?** Non. Les Hooks personnalisés sont un mécanisme de réutilisation de *logique à état* (comme la mise en place d'un abonnement et la mémorisation de sa valeur courante), mais chaque fois qu'on utilise un Hook personnalisé, tous les états et effets qu’il utilise sont totalement isolés. **Comment l'état d'un Hook personnalisé est-il isolé ?** Chaque *appel* à un Hook se voit attribuer un état isolé. Comme nous appelons `useFriendStatus` directement, du point de vue de React notre composant appelle simplement `useState` et `useEffect`. Et comme nous l'avons [appris](/docs/hooks-state.html#tip-using-multiple-state-variables) [précédemment](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns), nous pouvons appeler `useState` et `useEffect` plusieurs fois dans un composant et ils seront complètement indépendants. -### Astuce: passer de l'Information entre les Hooks {#tip-pass-information-between-hooks} +### Astuce: passer de l'information entre les Hooks {#tip-pass-information-between-hooks} Comme les Hooks sont des fonctions, nous pouvons passer de l'information entre eux. -Pour illustrer ça, nous allons utiliser un autre composant de notre hypothétique exemple de chat. Voici un sélecteur de destinataire de message qui affiche si l'ami sélectionné est en ligne : +Pour illustrer ça, nous allons utiliser un autre composant de notre hypothétique exemple de chat. Voici un sélecteur de destinataire de message qui affiche si l'ami sélectionné est en ligne : ```js{8-9,13} const friendList = [ @@ -186,7 +186,7 @@ function ChatRecipientPicker() { Nous gardons l'ID de l'ami sélectionné dans la variable d'état `recipientID`, et nous la mettons à jour si l'utilisateur sélectionne un ami différent dans le `