Skip to content

Commit fe1a1d4

Browse files
tddtdd
authored
Merge pull request #179 from MustaphaLimam/patch-2
Update 2018-10-23-react-v-16-6.md
2 parents 3cc7935 + 491561f commit fe1a1d4

File tree

1 file changed

+50
-50
lines changed

1 file changed

+50
-50
lines changed

‎content/blog/2018-10-23-react-v-16-6.md

+50-50
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
---
2-
title: "React v16.6.0: lazy, memo and contextType"
2+
title: "React v16.6.0 : lazy, memo et contextType"
33
author: [sebmarkbage]
44
---
55

6-
Today we're releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.
6+
Nous publions aujourd'hui React 16.6 avec quelques nouvelles fonctionnalités pratiques. Une forme de `PureComponent` / `shouldComponentUpdate` pour les fonctions composants, un moyen de découper le code à l'aide de Suspense et un moyen plus simple d'utiliser `Context` à partir des composants à base de classes.
77

8-
Check out the full [changelog](#changelog) below.
8+
Découvrez le [changelog](#changelog) complet plus bas.
99

1010
## [`React.memo`](/docs/react-api.html#reactmemo) {#reactmemo}
1111

12-
Class components can bail out from rendering when their input props are the same using [`PureComponent`](/docs/react-api.html#reactpurecomponent) or [`shouldComponentUpdate`](/docs/react-component.html#shouldcomponentupdate). Now you can do the same with function components by wrapping them in [`React.memo`](/docs/react-api.html#reactmemo).
12+
Les composants à base de classes peuvent éviter le rendu lorsque les valeurs de leurs props sont les mêmes en utilisant [`PureComponent`](/docs/react-api.html#reactpurecomponent) ou [`shouldComponentUpdate`](/docs/react-component.html#shouldcomponentupdate). Désormais, vous pouvez faire la même chose avec les fonctions composants en les enrobant avec [`React.memo`](/docs/react-api.html#reactmemo).
1313

1414
```js
1515
const MyComponent = React.memo(function MyComponent(props) {
16-
/* only rerenders if props change */
16+
/* le rendu ne se fait que lorsque les props changent */
1717
});
1818
```
1919

20-
## [`React.lazy`](/docs/code-splitting.html#reactlazy): Code-Splitting with `Suspense` {#reactlazy-code-splitting-with-suspense}
20+
## [`React.lazy`](/docs/code-splitting.html#reactlazy) : la découpe de code avec `Suspense` {#reactlazy-code-splitting-with-suspense}
2121

22-
You may have seen [Dan's talk about React Suspense at JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Now you can use the Suspense component to do [code-splitting](/docs/code-splitting.html#reactlazy) by wrapping a dynamic import in a call to `React.lazy()`.
22+
Vous avez peut-être vu [la présentation de Dan sur React Suspense à JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Vous pouvez maintenant utiliser le composant Suspense pour faire de la [découpe de code](/docs/code-splitting.html#reactlazy) en enrobant une importation dynamique avec un appel à `React.lazy()`.
2323

2424
```js
2525
import React, {lazy, Suspense} from 'react';
2626
const OtherComponent = lazy(() => import('./OtherComponent'));
2727

2828
function MyComponent() {
2929
return (
30-
<Suspense fallback={<div>Loading...</div>}>
30+
<Suspense fallback={<div>Chargement…</div>}>
3131
<OtherComponent />
3232
</Suspense>
3333
);
3434
}
3535
```
3636

37-
The Suspense component will also allow library authors to start building data fetching with Suspense support in the future.
37+
Le composant Suspense permettra également aux auteur·e·s de bibliothèques de commencer à construire de la récupération de données prenant en charge Suspense à l'avenir.
3838

39-
> Note: This feature is not yet available for server-side rendering. Suspense support will be added in a later release.
39+
> Note : cette fonctionnalité n'est pas encore disponible pour le rendu côté serveur. La prise en charge de Suspense sera ajoutée dans une version ultérieure.
4040
4141
## [`static contextType`](/docs/context.html#classcontexttype) {#static-contexttype}
4242

43-
In [React 16.3](/blog/2018/03/29/react-v-16-3.html) we introduced the official Context API as a replacement to the previous [Legacy Context](/docs/legacy-context.html) API.
43+
Dans [React 16.3](/blog/2018/03/29/react-v-16-3.html) nous avons introduit l’API de Contexte en remplacement de la précédente API [Legacy Context](/docs/legacy-context.html).
4444

4545
```js
4646
const MyContext = React.createContext();
4747
```
4848

49-
We've heard feedback that adopting the new render prop API can be difficult in class components. So we've added a convenience API to [consume a context value from within a class component](/docs/context.html#classcontexttype).
49+
Nous avons reçu des commentaires selon lesquels l’adoption de la nouvelle API à base de props de rendu peut s’avérer difficile dans les composants à base de classes. Nous avons donc ajouté une API de confort pour [consommer une valeur de contexte depuis un composant à base de classe](/docs/context.html#classcontexttype).
5050

5151
```js
5252
class MyClass extends React.Component {
5353
static contextType = MyContext;
5454
componentDidMount() {
5555
let value = this.context;
56-
/* perform a side-effect at mount using the value of MyContext */
56+
/* réaliser un effet secondaire lors du montage en utilisant la valeur de MyContext */
5757
}
5858
componentDidUpdate() {
5959
let value = this.context;
@@ -65,88 +65,88 @@ class MyClass extends React.Component {
6565
}
6666
render() {
6767
let value = this.context;
68-
/* render something based on the value of MyContext */
68+
/* afficher quelque chose basé sur la valeur de MyContext */
6969
}
7070
}
7171
```
7272

7373
## [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) {#static-getderivedstatefromerror}
7474

75-
React 16 introduced [Error Boundaries](/blog/2017/07/26/error-handling-in-react-16.html) for handling errors thrown in React renders. We already had the `componentDidCatch` lifecycle method which gets fired after an error has already happened. It's great for logging errors to the server. It also lets you show a different UI to the user by calling `setState`.
75+
React 16 a introduit les [Périmètres d’erreurs](/blog/2017/07/26/error-handling-in-react-16.html) pour gérer les erreurs lancées au sein des rendus React. Nous avions déjà la méthode de cycle de vie `componentDidCatch` qui est déclenchée après une erreur. C'est formidable pour la journalisation des erreurs sur le serveur. Ça vous permet également d'afficher une interface utilisateur différente pour l'utilisateur en appelant `setState`.
7676

77-
Before that is fired, we render `null` in place of the tree that threw an error. This sometimes breaks parent components that don't expect their refs to be empty. It also doesn't work to recover from errors on the server since the `Did` lifecycle methods don't fire during server-side rendering.
77+
Avant de la déclencher, nous faisons le rendu de `null` à la place de l'arbre qui a généré une erreur. Ça casse parfois les composants parents qui ne s’attendent pas à ce que leurs refs soient vides. La récupération des erreurs sur le serveur ne fonctionne pas non plus, puisque les méthodes du cycle de vie `Did` ne sont pas déclenchées lors du rendu côté serveur.
7878

79-
We're adding another error method that lets you render the fallback UI before the render completes. See the docs for [`getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror).
79+
Nous ajoutons une autre méthode d'erreur qui vous permet de produire une interface utilisateur de secours avant la fin du rendu. Consultez la documentation de [`getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror).
8080

81-
> Note: `getDerivedStateFromError()` is not yet available for server-side rendering. It is designed to work with server-side rendering in a future release. We're releasing it early so that you can start preparing to use it.
81+
> Note : `getDerivedStateFromError()` n'est pas encore disponible pour le rendu côté serveur. Elle est conçue pour fonctionner avec le rendu côté serveur dans une version ultérieure. Nous la publions tôt pour que vous puissiez commencer à vous préparer à l'utiliser.
8282
83-
## Deprecations in StrictMode {#deprecations-in-strictmode}
83+
## Dépréciations en StrictMode {#deprecations-in-strictmode}
8484

85-
In [16.3](/blog/2018/03/29/react-v-16-3.html#strictmode-component) we introduced the [`StrictMode`](/docs/strict-mode.html) component. It lets you opt-in to early warnings for patterns that might cause problems in the future.
85+
La version [16.3](/blog/2018/03/29/react-v-16-3.html#strictmode-component) a introduit le composant [`StrictMode`](/docs/strict-mode.html). Il vous permet d'activer des alertes précoces pour les approches susceptibles de poser problème à l'avenir.
8686

87-
We've added two more APIs to the list of deprecated APIs in `StrictMode`. If you don't use `StrictMode` you don't have to worry; these warning won't fire for you.
87+
Nous avons ajouté deux API supplémentaires à la liste des API obsolètes en `StrictMode`. Si vous n'utilisez pas `StrictMode` vous n'avez pas à vous inquiéter ; ces avertissements ne se déclencheront pas pour vous.
8888

89-
* __ReactDOM.findDOMNode()__ - This API is often misunderstood and most uses of it are unnecessary. It can also be surprisingly slow in React 16. [See the docs](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) for possible upgrade paths.
90-
* __Legacy Context__ using contextTypes and getChildContext - Legacy context makes React slightly slower and bigger than it needs to be. That's why we strongly want to encourage upgrading to the [new context API](/docs/context.html). Hopefully the addition of the [`contextType`](/docs/context.html#classcontexttype) API makes this a bit easier.
89+
* __ReactDOM.findDOMNode()__ - Cette API est souvent mal comprise et la plupart des utilisations de celle-ci sont inutiles. Elle peut aussi être étonnamment lente dans React 16. [Consultez les docs](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) pour les mécanismes de mise à niveau possibles.
90+
* __Legacy Context__ en utilisant contextTypes et getChildContext - Le Legacy Context rend React légèrement plus lent et plus gros que nécessaire. C’est pourquoi nous souhaitons vivement encourager la mise à niveau vers la [nouvelle API de Contexte](/docs/context.html). Espérons que l’ajout de l’API [`contextType`](/docs/context.html#classcontexttype) rendra ça un peu plus facile.
9191

92-
If you're having trouble upgrading, we'd like to hear your feedback.
92+
Si vous rencontrez des difficultés pour effectuer la mise à niveau, nous aimerions connaître votre avis.
9393

9494
## Installation {#installation}
9595

96-
React v16.6.0 is available on the npm registry.
96+
React v16.6.0 est disponible sur npm.
9797

98-
To install React 16 with Yarn, run:
98+
Pour installer React 16 avec Yarn, exécutez :
9999

100100
```bash
101101
yarn add react@^16.6.0 react-dom@^16.6.0
102102
```
103103

104-
To install React 16 with npm, run:
104+
Pour installer React 16 avec npm, exécutez :
105105

106106
```bash
107107
npm install --save react@^16.6.0 react-dom@^16.6.0
108108
```
109109

110-
We also provide UMD builds of React via a CDN:
110+
Nous fournissons également des versions UMD de React via un CDN:
111111

112112
```html
113113
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
114114
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
115115
```
116116

117-
Refer to the documentation for [detailed installation instructions](/docs/installation.html).
117+
Reportez-vous à la documentation pour les [instructions d'installation détaillées](/docs/installation.html).
118118

119119
## Changelog {#changelog}
120120

121121
### React {#react}
122122

123-
* Add `React.memo()` as an alternative to `PureComponent` for functions. ([@acdlite](https://github.com/acdlite) in [#13748](https://github.com/facebook/react/pull/13748))
124-
* Add `React.lazy()` for code splitting components. ([@acdlite](https://github.com/acdlite) in [#13885](https://github.com/facebook/react/pull/13885))
125-
* `React.StrictMode` now warns about legacy context API. ([@bvaughn](https://github.com/bvaughn) in [#13760](https://github.com/facebook/react/pull/13760))
126-
* `React.StrictMode` now warns about `findDOMNode`. ([@sebmarkbage](https://github.com/sebmarkbage) in [#13841](https://github.com/facebook/react/pull/13841))
127-
* Rename `unstable_AsyncMode` to `unstable_ConcurrentMode`. ([@trueadm](https://github.com/trueadm) in [#13732](https://github.com/facebook/react/pull/13732))
128-
* Rename `unstable_Placeholder` to `Suspense`, and `delayMs` to `maxDuration`. ([@gaearon](https://github.com/gaearon) in [#13799](https://github.com/facebook/react/pull/13799) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13922](https://github.com/facebook/react/pull/13922))
123+
* Ajouter `React.memo()` comme alternative à `PureComponent` pour les fonctions. ([@acdlite](https://github.com/acdlite) dans [#13748](https://github.com/facebook/react/pull/13748))
124+
* Ajouter `React.lazy()` pour la découpe de code les composants. ([@acdlite](https://github.com/acdlite) dans [#13885](https://github.com/facebook/react/pull/13885))
125+
* `React.StrictMode` avertit désormais du recours à l’API Legacy Context ([@bvaughn](https://github.com/bvaughn) dans [#13760](https://github.com/facebook/react/pull/13760))
126+
* `React.StrictMode` avertit désormais du recours à `findDOMNode`. ([@sebmarkbage](https://github.com/sebmarkbage) dans [#13841](https://github.com/facebook/react/pull/13841))
127+
* Renommer `unstable_AsyncMode` en `unstable_ConcurrentMode`. ([@trueadm](https://github.com/trueadm) dans [#13732](https://github.com/facebook/react/pull/13732))
128+
* Renommer `unstable_Placeholder` en `Suspense`, et `delayMs` en `maxDuration`. ([@gaearon](https://github.com/gaearon) dans [#13799](https://github.com/facebook/react/pull/13799) et [@sebmarkbage](https://github.com/sebmarkbage) dans [#13922](https://github.com/facebook/react/pull/13922))
129129

130130
### React DOM {#react-dom}
131131

132-
* Add `contextType` as a more ergonomic way to subscribe to context from a class. ([@bvaughn](https://github.com/bvaughn) in [#13728](https://github.com/facebook/react/pull/13728))
133-
* Add `getDerivedStateFromError` lifecycle method for catching errors in a future asynchronous server-side renderer. ([@bvaughn](https://github.com/bvaughn) in [#13746](https://github.com/facebook/react/pull/13746))
134-
* Warn when `<Context>` is used instead of `<Context.Consumer>`. ([@trueadm](https://github.com/trueadm) in [#13829](https://github.com/facebook/react/pull/13829))
135-
* Fix gray overlay on iOS Safari. ([@philipp-spiess](https://github.com/philipp-spiess) in [#13778](https://github.com/facebook/react/pull/13778))
136-
* Fix a bug caused by overwriting `window.event` in development. ([@sergei-startsev](https://github.com/sergei-startsev) in [#13697](https://github.com/facebook/react/pull/13697))
132+
* Ajouter `contextType` comme moyen plus ergonomique de s’abonner au Contexte depuis une classe ([@bvaughn](https://github.com/bvaughn) dans [#13728](https://github.com/facebook/react/pull/13728))
133+
* Ajouter la méthode de cycle de vie `getDerivedStateFromError` pour détecter les erreurs à l’avenir lors du rendu asynchrone côté serveur. ([@bvaughn](https://github.com/bvaughn) dans [#13746](https://github.com/facebook/react/pull/13746))
134+
* Avertir quand `<Context>` est utilisé à la place de `<Context.Consumer>`. ([@trueadm](https://github.com/trueadm) dans [#13829](https://github.com/facebook/react/pull/13829))
135+
* Correction du calque gris sur iOS Safari. ([@philipp-spiess](https://github.com/philipp-spiess) dans [#13778](https://github.com/facebook/react/pull/13778))
136+
* Corrige un bug causé par un écrasement de `window.event` en développement. ([@sergei-startsev](https://github.com/sergei-startsev) dans [#13697](https://github.com/facebook/react/pull/13697))
137137

138138
### React DOM Server {#react-dom-server}
139139

140-
* Add support for `React.memo()`. ([@alexmckenley](https://github.com/alexmckenley) in [#13855](https://github.com/facebook/react/pull/13855))
141-
* Add support for `contextType`. ([@alexmckenley](https://github.com/alexmckenley) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13889](https://github.com/facebook/react/pull/13889))
140+
* Ajouter la prise en charge de `React.memo()`. ([@alexmckenley](https://github.com/alexmckenley) dans [#13855](https://github.com/facebook/react/pull/13855))
141+
* Ajouter la prise en charge de `contextType`. ([@alexmckenley](https://github.com/alexmckenley) et [@sebmarkbage](https://github.com/sebmarkbage) dans [#13889](https://github.com/facebook/react/pull/13889))
142142

143-
### Scheduler (Experimental) {#scheduler-experimental}
143+
### Planificateur (expérimental) {#scheduler-experimental}
144144

145-
* Rename the package to `scheduler`. ([@gaearon](https://github.com/gaearon) in [#13683](https://github.com/facebook/react/pull/13683))
146-
* Support priority levels, continuations, and wrapped callbacks. ([@acdlite](https://github.com/acdlite) in [#13720](https://github.com/facebook/react/pull/13720) and [#13842](https://github.com/facebook/react/pull/13842))
147-
* Improve the fallback mechanism in non-DOM environments. ([@acdlite](https://github.com/acdlite) in [#13740](https://github.com/facebook/react/pull/13740))
148-
* Schedule `requestAnimationFrame` earlier. ([@acdlite](https://github.com/acdlite) in [#13785](https://github.com/facebook/react/pull/13785))
149-
* Fix the DOM detection to be more thorough. ([@trueadm](https://github.com/trueadm) in [#13731](https://github.com/facebook/react/pull/13731))
150-
* Fix bugs with interaction tracing. ([@bvaughn](https://github.com/bvaughn) in [#13590](https://github.com/facebook/react/pull/13590))
151-
* Add the `envify` transform to the package. ([@mridgway](https://github.com/mridgway) in [#13766](https://github.com/facebook/react/pull/13766))
145+
* Renommer le module en `scheduler`. ([@gaearon](https://github.com/gaearon) dans [#13683](https://github.com/facebook/react/pull/13683))
146+
* Prise en charge des niveaux de priorité, des continuations et des rappels encapsulés. ([@acdlite](https://github.com/acdlite) dans [#13720](https://github.com/facebook/react/pull/13720) et [#13842](https://github.com/facebook/react/pull/13842))
147+
* Améliorer le mécanisme de secours dans les environnements non-DOM. ([@acdlite](https://github.com/acdlite) dans [#13740](https://github.com/facebook/react/pull/13740))
148+
* Planifier `requestAnimationFrame` plus tôt. ([@acdlite](https://github.com/acdlite) dans [#13785](https://github.com/facebook/react/pull/13785))
149+
* Correction de la détection du DOM pour qu'elle soit plus complète. ([@trueadm](https://github.com/trueadm) dans [#13731](https://github.com/facebook/react/pull/13731))
150+
* Correction de bugs avec le traçage d'interaction. ([@bvaughn](https://github.com/bvaughn) dans [#13590](https://github.com/facebook/react/pull/13590))
151+
* Ajouter la transformée `envify` au module. ([@mridgway](https://github.com/mridgway) dans [#13766](https://github.com/facebook/react/pull/13766))
152152

0 commit comments

Comments
 (0)