Merge pull request #555 from reactjs/copy/PureComponent

Translation of the "PureComponent" page

TRANSLATORS.md

@@ -104,6 +104,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis 
           <li><a href="https://fr.react.dev/reference/react/createFactory"><code>createFactory</code></a></li>
           <li><a href="https://fr.react.dev/reference/react/createRef"><code>createRef</code></a></li>
           <li><a href="https://fr.react.dev/reference/react/isValidElement"><code>isValidElement</code></a></li>
+          <li><a href="https://fr.react.dev/reference/react/PureComponent"><code>PureComponent</code></a></li>
         </ul>
       </td>
     </tr>

src/content/reference/react/PureComponent.md

@@ -4,18 +4,18 @@ title: PureComponent
 
 <Pitfall>
 
-We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
+Nous vous conseillons de définir vos composants au moyen de fonctions plutôt que de classes. [Voyez comment migrer](#alternatives).
 
 </Pitfall>
 
 <Intro>
 
-`PureComponent` is similar to [`Component`](/reference/react/Component) but it skips re-renders for same props and state. Class components are still supported by React, but we don't recommend using them in new code.
+`PureComponent` est similaire à [`Component`](/reference/react/Component), mais évite un nouveau rendu lorsque les props et l'état local sont identiques. Les composants à base de classes restent pris en charge par React, mais nous les déconseillons pour tout nouveau code.
 
 ```js
 class Greeting extends PureComponent {
   render() {
-    return <h1>Hello, {this.props.name}!</h1>;
+    return <h1>Salut {this.props.name} !</h1>;
   }
 }
 ```
@@ -26,46 +26,45 @@ class Greeting extends PureComponent {
 
 ---
 
-## Reference {/*reference*/}
+## Référence {/*reference*/}
 
 ### `PureComponent` {/*purecomponent*/}
 
-To skip re-rendering a class component for same props and state, extend `PureComponent` instead of [`Component`:](/reference/react/Component)
+Pour éviter un rendu superflu de composant à base de classe lorsque ses props et son état sont identiques, héritez de `PureComponent` plutôt que de [`Component`](/reference/react/Component) :
 
 ```js
 import { PureComponent } from 'react';
 
 class Greeting extends PureComponent {
   render() {
-    return <h1>Hello, {this.props.name}!</h1>;
+    return <h1>Salut {this.props.name} !</h1>;
   }
 }
 ```
 
-`PureComponent` is a subclass of `Component` and supports [all the `Component` APIs.](/reference/react/Component#reference) Extending `PureComponent` is equivalent to defining a custom [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) method that shallowly compares props and state.
+`PureComponent` est une sous-classe de `Component` et prend en charge [toute l'API de `Component`](/reference/react/Component#reference).  Hériter de `PureComponent` revient à définir votre propre méthode [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) en effectuant une comparaison de surface des props et de l'état.
 
-
-[See more examples below.](#usage)
+[Voir d'autres exemples ci-dessous](#usage).
 
 ---
 
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
 
-### Skipping unnecessary re-renders for class components {/*skipping-unnecessary-re-renders-for-class-components*/}
+### Éviter les rendus superflus de composants à base de classes {/*skipping-unnecessary-re-renders-for-class-components*/}
 
-React normally re-renders a component whenever its parent re-renders. As an optimization, you can create a component that React will not re-render when its parent re-renders so long as its new props and state are the same as the old props and state. [Class components](/reference/react/Component) can opt into this behavior by extending `PureComponent`:
+React refait en temps normal le rendu d'un composant dès que son parent refait son rendu.  Dans une optique d'optimisation, vous pouvez créer un composant dont le nouveau rendu du composant parent ne déclenchera pas un nouveau rendu de lui-même par React, du moment que ses nouvelles props et son état ne diffèrent pas de leurs valeurs précédentes. Les [composants à base de classes](/reference/react/Component) peuvent adopter ce comportement en étendant `PureComponent` :
 
 ```js {1}
 class Greeting extends PureComponent {
   render() {
-    return <h1>Hello, {this.props.name}!</h1>;
+    return <h1>Salut {this.props.name} !</h1>;
   }
 }
 ```
 
-A React component should always have [pure rendering logic.](/learn/keeping-components-pure) This means that it must return the same output if its props, state, and context haven't changed. By using `PureComponent`, you are telling React that your component complies with this requirement, so React doesn't need to re-render as long as its props and state haven't changed. However, your component will still re-render if a context that it's using changes.
+Un composant React devrait toujours avoir une [logique de rendu pure](/learn/keeping-components-pure).  Ça signifie qu'il devrait toujours renvoyer le même résultat si ses props, son état et son contexte n'ont pas changé.  En utilisant `PureComponent`, vous dites à React que votre composant obéit à cette exigence, de sorte que React n'a pas besoin d'en refaire le rendu tant que ses props et son état n'ont pas changé.  En revanche, votre composant refera bien son rendu si un contexte qu'il utilise change.
 
-In this example, notice that the `Greeting` component re-renders whenever `name` is changed (because that's one of its props), but not when `address` is changed (because it's not passed to `Greeting` as a prop):
+Dans cet exemple, voyez comme le composant `Greeting` refait son rendu dès que `name` change (car c'est une de ses props), mais pas quand `address` change (car elle n'est pas passée comme prop à `Greeting`) :
 
 <Sandpack>
 
@@ -74,8 +73,8 @@ import { PureComponent, useState } from 'react';
 
 class Greeting extends PureComponent {
   render() {
-    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
-    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
+    console.log("Greeting a refait son rendu à", new Date().toLocaleTimeString());
+    return <h3>Salut{this.props.name && ' '}{this.props.name} !</h3>;
   }
 }
 
@@ -85,11 +84,11 @@ export default function MyApp() {
   return (
     <>
       <label>
-        Name{': '}
+        Nom :{' '}
         <input value={name} onChange={e => setName(e.target.value)} />
       </label>
       <label>
-        Address{': '}
+        Adresse :{' '}
         <input value={address} onChange={e => setAddress(e.target.value)} />
       </label>
       <Greeting name={name} />
@@ -109,17 +108,17 @@ label {
 
 <Pitfall>
 
-We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
+Nous vous conseillons de définir vos composants au moyen de fonctions plutôt que de classes. [Voyez comment migrer](#alternatives).
 
 </Pitfall>
 
 ---
 
 ## Alternatives {/*alternatives*/}
 
-### Migrating from a `PureComponent` class component to a function {/*migrating-from-a-purecomponent-class-component-to-a-function*/}
+### Migrer d'un composant à base de classe `PureComponent` vers une fonction {/*migrating-from-a-purecomponent-class-component-to-a-function*/}
 
-We recommend using function components instead of [class components](/reference/react/Component) in new code. If you have some existing class components using `PureComponent`, here is how you can convert them. This is the original code:
+Nous vous recommandons d'utiliser des fonctions composants pour tout nouveau code, plutôt que des [composants à base de classes](/reference/react/Component). Si vous avez des composants à base de classes existants qui utilisent `PureComponent`, voici comment les convertir.  Prenons le code original suivant :
 
 <Sandpack>
 
@@ -128,8 +127,8 @@ import { PureComponent, useState } from 'react';
 
 class Greeting extends PureComponent {
   render() {
-    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
-    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
+    console.log("Greeting a refait son rendu à", new Date().toLocaleTimeString());
+    return <h3>Salut{this.props.name && ' '}{this.props.name} !</h3>;
   }
 }
 
@@ -139,11 +138,11 @@ export default function MyApp() {
   return (
     <>
       <label>
-        Name{': '}
+        Nom :{' '}
         <input value={name} onChange={e => setName(e.target.value)} />
       </label>
       <label>
-        Address{': '}
+        Adresse :{' '}
         <input value={address} onChange={e => setAddress(e.target.value)} />
       </label>
       <Greeting name={name} />
@@ -161,16 +160,16 @@ label {
 
 </Sandpack>
 
-When you [convert this component from a class to a function,](/reference/react/Component#alternatives) wrap it in [`memo`:](/reference/react/memo)
+Lorsque vous [convertissez ce composant d'une classe vers une fonction](/reference/react/Component#alternatives), enrobez-le dans [`memo`](/reference/react/memo) :
 
 <Sandpack>
 
 ```js
 import { memo, useState } from 'react';
 
 const Greeting = memo(function Greeting({ name }) {
-  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
-  return <h3>Hello{name && ', '}{name}!</h3>;
+  console.log("Greeting a refait son rendu à", new Date().toLocaleTimeString());
+  return <h3>Salut{name && ' '}{name} !</h3>;
 });
 
 export default function MyApp() {
@@ -179,11 +178,11 @@ export default function MyApp() {
   return (
     <>
       <label>
-        Name{': '}
+        Nom :{' '}
         <input value={name} onChange={e => setName(e.target.value)} />
       </label>
       <label>
-        Address{': '}
+        Adresse :{' '}
         <input value={address} onChange={e => setAddress(e.target.value)} />
       </label>
       <Greeting name={name} />
@@ -203,6 +202,6 @@ label {
 
 <Note>
 
-Unlike `PureComponent`, [`memo`](/reference/react/memo) does not compare the new and the old state. In function components, calling the [`set` function](/reference/react/useState#setstate) with the same state [already prevents re-renders by default,](/reference/react/memo#updating-a-memoized-component-using-state) even without `memo`.
+Contrairement à `PureComponent`, [`memo`](/reference/react/memo) ne compare pas l'ancien et le nouvel état. Dans les fonctions composants, appeler une [fonction `set`](/reference/react/useState#setstate) avec un même état [évite déjà par défaut un nouveau rendu](/reference/react/memo#updating-a-memoized-component-using-state), même sans `memo`.
 
 </Note>