From 53435d27bde8f1599939b151673740e7d5258421 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Tue, 19 Sep 2023 17:23:20 +0200 Subject: [PATCH 1/2] copy(blogs/labs-june-22): first full translation and early review --- TRANSLATORS.md | 1 + ...-what-we-have-been-working-on-june-2022.md | 73 ++++++++++--------- .../blog/2023/03/16/introducing-react-dev.md | 2 +- src/content/blog/index.md | 6 +- src/sidebarBlog.json | 2 +- 5 files changed, 44 insertions(+), 40 deletions(-) diff --git a/TRANSLATORS.md b/TRANSLATORS.md index cb85558bc..dd8228ecb 100644 --- a/TRANSLATORS.md +++ b/TRANSLATORS.md @@ -133,6 +133,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
  • Blog : React Canaries
  • Blog : React Labs mars 2023
  • Blog : Découvrez react.dev
    • +
  • Blog : React Labs juin 2022
  • Avertissement : prop ARIA invalide
  • Avertissement : règles des Hooks
  • Avertissement : props à traitement spécial
    • diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 0d9e8e260..a9f338f81 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -2,78 +2,79 @@ title: "React Labs: What We've Been Working On – June 2022" --- -June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Xuan Huang](https://twitter.com/Huxpro) +Le 15 juin 2022 par [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Xuan Huang](https://twitter.com/Huxpro) --- -[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring. +[React 18](/blog/2022/03/29/react-v18) a pris des années, mais il était porteur de précieuses leçons pour l'équipe React. Sa sortie était l'aboutissement de nombreuses années de recherche, en explorant de nouvelles voies. Certaines de ces tentatives ont réussi ; mais bien davantage se sont révélées des impasses qui nous ont toutefois fourni de nouvelles pistes. Une des leçons que nous en avons tirées, c'est qu'il est frustrant pour la communauté d'attendre la sortie de nouvelles fonctionnalités sans que nous communiquions sur nos travaux. --- -We typically have a number of projects being worked on at any time, ranging from the more experimental to the clearly defined. Looking ahead, we’d like to start regularly sharing more about what we’ve been working on with the community across these projects. +Nous avons généralement un certain nombre de projets en cours à tout instant, qui vont des plus expérimentaux à ceux déjà clairement spécifiés. À partir de maintenant, nous souhaitons partager régulièrement avec la communauté des informations sur nos travaux en cours au sein de ces projets. -To set expectations, this is not a roadmap with clear timelines. Many of these projects are under active research and are difficult to put concrete ship dates on. They may possibly never even ship in their current iteration depending on what we learn. Instead, we want to share with you the problem spaces we’re actively thinking about, and what we’ve learned so far. +Évitons toutefois les attentes infondées : il ne s'agit pas d'une feuille de route avec une chronologie définie. Nombre de ces projets sont en phase de recherche active et ne permettent pas la définition d'une date concrète de sortie. Ils pourraient même ne jamais voir le jour sous leur forme actuelle, selon les enseignements qu'on en tirera. En revanche, nous souhaitons vous partager les problématiques qui nous occupent en ce moment, et ce que nous avons appris jusqu'ici. -## Server Components {/*server-components*/} +## Composants Serveur {/*server-components*/} -We announced an [experimental demo of React Server Components](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback. +Nous avons annoncé une [démo expérimentale des React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) (RSC) en décembre 2020. Depuis lors, nous avons travaillé à en finaliser les dépendances dans React 18, et à implémenter les évolutions inspirées par leur expérimentation. -In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +Nous avons notamment abandonné l'idée de versions dédiées de bibliothèques d'E/S (ex. react-fetch), pour plutôt adopter un modèle à base d'async/await pour une meilleure compatibilité. Ça ne bloque pas en soit la sortie des RSC parce que vous pouvez aussi utiliser des routeurs pour le chargement de données. Autre évolution : nous avons délaissé l'approche à base d'extension de fichiers au profit [d'annotations](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). -We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable. +Nous collaborons avec Vercel et Shopify pour unifier la prise en charge de *bundlers* pour viser une sémantique partagée avec Webpack et Vite. D'ici la sortie, nous souhaitons nous assurer que la sémantique des RSC sera la même à travers tout l'écosystème de React. C'est le principal point bloquant pour arriver à une version stable. -## Asset Loading {/*asset-loading*/} +## Chargement de ressources {/*asset-loading*/} -Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more. -We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments. +À l'heure actuelle, les ressources telles que les scripts, styles externes, fontes et images sont généralement pré-chargées ou chargées au moyen de systèmes extérieurs. Ça peut s'avérer délicat à coordonner entre des environnements tels que le streaming, les composants serveur et d'autres encore. -We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts. +Nous explorons la possibilité d'ajouter des API pour précharger ou charger des ressources externes dédoublonnées au travers de React, pour fonctionner dans tous les environnements React. -## Static Server Rendering Optimizations {/*static-server-rendering-optimizations*/} +Nous travaillons également à les prendre en charge dans Suspense, de sorte que vous pourriez avoir des images, CSS et fontes qui bloquent l'affichage le temps de leur chargement, mais qui ne bloquent pas le streaming ou les rendus concurrents. Ça peut aider à éviter [« l'effet popcorn »](https://twitter.com/sebmarkbage/status/1516852731251724293) qui découle de l'apparition éparpillée d'éléments visuels et des décalages visuels à répétition qui les accompagnent. -Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great ways to get performance for cacheable pages, but we think we can add features to improve performance of dynamic Server Side Rendering (SSR) – especially when most but not all of the content is cacheable. We're exploring ways to optimize server rendering utilizing compilation and static passes. +## Optimisations du rendu côté serveur {/*static-server-rendering-optimizations*/} -## React Optimizing Compiler {/*react-compiler*/} +La génération de site statique *(SSG pour Static Site Generation, NdT)* et la regénération statique incrémentale *(ISR pour Incremental Static Regeneration, NdT)* sont deux super façons d'améliorer la performance de pages qui peuvent être mises en cache, mais nous pensons pouvoir ajouter des fonctionnalités pour améliorer la performance de rendu côté serveur dynamique *(SSR pour Server Side Rendering, NdT)* — en particulier lorsque l'essentiel mais pas l'intégralité du contenu peut être mis en cache. Nous explorons plusieurs approches d'optimisation du rendu côté serveur qui reposent sur de la compilation et des passes statiques. -We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model. +## Compilateur optimisant pour React {/*react-compiler*/} -Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks. +Nous avons donné un [premier aperçu](https://www.youtube.com/watch?v=lGEMwh32soc) de React Forget à la React Conf 2021. C'est un compilateur qui génère automatiquement l'équivalent d'appels à `useMemo` et `useCallback` pour minimiser le coût des nouveaux rendus, tout en maintenant le modèle de programmation de React. -We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released. +Nous avons récemment terminé une réécriture de ce compilateur afin qu'il soit plus fiable et plus malin. Cette nouvelle architecture nous permet d'analyser et de mémoïser des motifs complexes tels que le recours à des [mutations locales](/learn/keeping-components-pure#local-mutation-your-components-little-secret), ce qui ouvre la voie à de nombreuses nouvelles opportunités d'optimisation en phase de compilation, bien au-delà de simplement équivaloir à des appels judicieux de Hooks de mémoïsation. -## Offscreen {/*offscreen*/} +Nous travaillons aussi sur un bac à sable permettant d'explorer plusieurs aspects du compilateur. Même si l'objectif premier du bac à sable est de faciliter le développement du compilateur, nous pensons qu'il vous permettra aussi de l'essayer plus simplement et de bâtir votre intuition quant à ses capacités. Il permet de mieux saisir le fonctionnement interne du compilateur, et affiche en temps réel la sortie du compilateur au fil de votre saisie. Nous le livrerons en même temps que le compilateur lui-même. -Today, if you want to hide and show a component, you have two options. One is to add or remove it from the tree completely. The problem with this approach is that the state of your UI is lost each time you unmount, including state stored in the DOM, like scroll position. +## Hors-écran {/*offscreen*/} -The other option is to keep the component mounted and toggle the appearance visually using CSS. This preserves the state of your UI, but it comes at a performance cost, because React must keep rendering the hidden component and all of its children whenever it receives new updates. +Aujourd'hui, si vous souhaitez masquer puis afficher un composant, vous avez deux options. La première consiste à l'ajouter ou le retirer totalement de l'arbre. Le souci de cette approche, c'est que l'état de votre UI est perdu à chaque démontage, y compris l'état stocké dans le DOM, tel que la position de défilement. -Offscreen introduces a third option: hide the UI visually, but deprioritize its content. The idea is similar in spirit to the `content-visibility` CSS property: when content is hidden, it doesn't need to stay in sync with the rest of the UI. React can defer the rendering work until the rest of the app is idle, or until the content becomes visible again. +L'autre approche consiste à conserver le composant monté, mais à basculer sa visibilité avec CSS. Ça préserve l'état de votre UI mais ça nuit aux performances, car React doit continuer à faire le rendu du composant masqué et de tous ses enfants dès qu'une mise à jour est déclenchée. -Offscreen is a low level capability that unlocks high level features. Similar to React's other concurrent features like `startTransition`, in most cases you won't interact with the Offscreen API directly, but instead via an opinionated framework to implement patterns like: +Le hors-écran nous propose une troisième voie : masquer l'UI visuellement, mais en déprioriser le contenu. L'idée est similaire à la propriété CSS `content-visibility` : lorsque le contenu est masqué, il n'a pas besoin de rester en phase avec le reste de l'UI. React peut différer son travail de rendu jusqu'à ce que le reste de l'appli soit au repos, ou jusqu'à ce que le contenu redevienne visible. -* **Instant transitions.** Some routing frameworks already prefetch data to speed up subsequent navigations, like when hovering over a link. With Offscreen, they'll also be able to prerender the next screen in the background. -* **Reusable state.** Similarly, when navigating between routes or tabs, you can use Offscreen to preserve the state of the previous screen so you can switch back and pick up where you left off. -* **Virtualized list rendering.** When displaying large lists of items, virtualized list frameworks will prerender more rows than are currently visible. You can use Offscreen to prerender the hidden rows at a lower priority than the visible items in the list. -* **Backgrounded content.** We're also exploring a related feature for deprioritizing content in the background without hiding it, like when displaying a modal overlay. +Le hors-écran est une capacité de bas niveau qui ouvre la voie à plusieurs fonctionnalités de plus haut niveau. À l'instar d'autres fonctionnalités concurrentes de React telles que `startTransition`, vous n'aurez la plupart du temps pas à interagir directement avec l'API de gestion hors-écran, ce sera plutôt traité au niveau framework, selon leur stratégie, pour permettre des choses comme : -## Transition Tracing {/*transition-tracing*/} +* Des **transition instantanées**. Certains frameworks de routage préchargent déjà les données pour accélérer les navigations ultérieures, par exemple au survol d'un lien. Avec le hors-écran, ils pourraient même précalculer en arrière-plan le rendu du prochain écran. +* Un **état réutilisable**. Dans le même esprit, lors de la navigation entre des routes ou des onglets, vous pourriez tirer parti du hors-écran pour préserver l'état de l'écran précédent afin de pouvoir revenir exactement là où vous en étiez. +* Du **rendu virtualisé de liste**. Lors de l'affichage de grandes listes d'éléments, les systèmes de listes virtualisées précalculent le rendu de lignes supplémentaires à celles actuellement visibles. Le hors-écran permettrait de faire ces calculs anticipés avec une priorité inférieure à celle des éléments visibles de la liste. +* Du **contenu d'arrière-plan**. Nous explorons une possibilité associée de dépriorisation du contenu en arrière-plan sans avoir à le masquer, comme dans le cas de boîtes de dialogue modales. -Currently, React has two profiling tools. The [original Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code. +## Pistage des transitions {/*transition-tracing*/} -We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it. +React propose actuellement deux outils de profilage. Le [Profiler d'origine](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) affiche un résumé de tous les commits durant la session de profilage. Pour chaque commit, il affiche également tous les composants qui ont fait un rendu, et le temps que ça leur a pris. Nous avons aussi une version beta d'un[Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) arrivé dans React 18 qui indique quand les composants planifient des ises à jour et quand React les traite. Ce deux outils aident les développeurs à identifier l'origine des problèmes de performances dans leur code. -We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/facebook/react/pull/20037) because of these issues. +Nous avons réalisé que pour les développeurs, simplement savoir quels commits ou composant sont lents, sans davantage de contexte, n'est pas très utile. Ils préfèreraient savoir quelle est la véritable cause des commits lents. Les développeurs veulent également pouvoir pister le travail résultant d'interactions spécifiques (ex. un clic sur un bouton, le chargement initial ou une navigation) pour repérer les régressions de performances éventuelles et comprendre pourquoi l'interaction est lente et comment y remédier. -We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via `startTransition`) that solves these problems. +Nous avions déjà essayé de répondre à ce besoin en ajoutant une [API de pistage d'interaction](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mais sa conception avait des problèmes de fond qui en réduisaient la précision et pouvaient même rater la fin d'une interaction. En conséquence, nous avons finalement [retiré cette API](https://github.com/facebook/react/pull/20037). -## New React Docs {/*new-react-docs*/} +Nous travaillons sur une nouvelle version de l'API de pistage d'interactions (appelée pour le moment *Transition Tracing* parce qu'elle est déclenchée par `startTransition`) qui résout ces problèmes. -Last year, we announced the beta version of the new React documentation website ([later shipped as react.dev](/blog/2023/03/16/introducing-react-dev)) of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation. +## Nouvelles docs React {/*new-react-docs*/} -We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. [Synchronizing with Effects](/learn/synchronizing-with-effects) is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the [feedback](https://github.com/reactjs/reactjs.org/issues/3308) and contributions to the ongoing documentation rewrite. We’d specifically like to thank [Harish Kumar](https://github.com/harish-sethuraman) for submitting and reviewing many improvements to the new website implementation. +Nous avons annoncé 'année dernière une version beta du nouveau site web de documentation de React ([finalement livrée en tant que react.dev](/blog/2023/03/16/introducing-react-dev)). Ces nouveaux contenus pédagogiques sont basés sur les Hooks et comprennent de nouveaux diagrammeset illustrations, ainsi que de nombreux exemples et défis interactifs. Nous avons mis ce chantier en pause le temps de nous concentrer sur la sortie de React 18, mais maintenant que celui-ci est sorti, nous avons repris le travail pour boucler et sortir la nouvelle documentation. -*Thanks to [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this blog post!* +Nous sommes en train d'écrire une section très détaillée sur les Effets, puisque vous nous avez souvent dit que c'était un des sujets les plus délicats à maîtriser pour les utilisateurs de React tant novices que chevronnés. La première page de la série s'appelle [Synchroniser grâce aux Effets](/learn/synchronizing-with-effects), et vous en verrez d'autres dans les prochaines semaines. Lorsque nous avons commencé cette section sur les Effets, nous avons réalisé que de nombreuses approches usuelles utilisant les Effets peuvent être simplifiées en ajoutant une nouvelle primitive à React. Nous avons partagé nos premières réflexions à ce sujet dans la [RFC pour useEvent](https://github.com/reactjs/rfcs/pull/220). Elle en est aux premiers stades de la recherche, et nous itérons sur le concept. Nous apprécions les commentaires de la communauté dans la RFC jusqu'ici, ainsi que les [retours](https://github.com/reactjs/reactjs.org/issues/3308) et contributions sur le chantier en cours de la nouvelle documentation. Nous aimerions notamment remercier [Harish Kumar](https://github.com/harish-sethuraman) pour avoir envoyé ou revu de nombreuses améliorations à l'implémentation du nouveau site web. + +*Merci à [Sophie Alpert](https://twitter.com/sophiebits) pour avoir révisé ce billet !* diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 92cf4664d..47b66eabb 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -2,7 +2,7 @@ title: "Découvrez react.dev" --- -16 mars 2023 par [Dan Abramov](https://twitter.com/dan_abramov) et [Rachel Nabors](https://twitter.com/rachelnabors) +Le 16 mars 2023 par [Dan Abramov](https://twitter.com/dan_abramov) et [Rachel Nabors](https://twitter.com/rachelnabors) --- diff --git a/src/content/blog/index.md b/src/content/blog/index.md index d8b26642c..c709cb870 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -30,8 +30,10 @@ Nous sommes enchantés d'annoncer aujourd'hui la sortie de react.dev, le nouveau - -React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring... + + +React 18 a pris des années, mais il était porteur de précieuses leçons pour l'équipe React. Sa sortie était l'aboutissement de nombreuses années de recherche, en explorant de nouvelles voies. Certaines de ces tentatives ont réussi ; mais bien davantage se sont révélées des impasses qui nous ont toutefois fourni de nouvelles pistes. Une des leçons que nous en avons tirées, c'est qu'il est frustrant pour la communauté d'attendre la sortie de nouvelles fonctionnalités sans que nous communiquions sur nos travaux… + diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 65a2ce453..c8e1f4a27 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -33,7 +33,7 @@ "path": "/blog/2023/03/16/introducing-react-dev" }, { - "title": "React Labs: What We've Been Working On – June 2022", + "title": "React Labs : ce sur quoi nous bossons – juin 2022", "titleForHomepage": "React Labs : juin 2022", "icon": "labs", "date": "15 juin 2022", From 13a58c7f552c347d959f63e0759b8eed39be0afc Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Tue, 19 Sep 2023 17:26:30 +0200 Subject: [PATCH 2/2] copy(blogs/labs-june-22): final review pass --- .../15/react-labs-what-we-have-been-working-on-june-2022.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index a9f338f81..7ecbd4084 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -63,9 +63,9 @@ Le hors-écran est une capacité de bas niveau qui ouvre la voie à plusieurs fo ## Pistage des transitions {/*transition-tracing*/} -React propose actuellement deux outils de profilage. Le [Profiler d'origine](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) affiche un résumé de tous les commits durant la session de profilage. Pour chaque commit, il affiche également tous les composants qui ont fait un rendu, et le temps que ça leur a pris. Nous avons aussi une version beta d'un[Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) arrivé dans React 18 qui indique quand les composants planifient des ises à jour et quand React les traite. Ce deux outils aident les développeurs à identifier l'origine des problèmes de performances dans leur code. +React propose actuellement deux outils de profilage. Le [profileur d'origine](https://fr.legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) affiche un résumé de tous les commits durant la session de profilage. Pour chaque commit, il affiche également tous les composants qui ont fait un rendu, et le temps que ça leur a pris. Nous avons aussi une version beta d'un [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) arrivé dans React 18 qui indique quand les composants planifient des mises à jour et quand React les traite. Ces deux outils aident les développeurs à identifier l'origine des problèmes de performances dans leur code. -Nous avons réalisé que pour les développeurs, simplement savoir quels commits ou composant sont lents, sans davantage de contexte, n'est pas très utile. Ils préfèreraient savoir quelle est la véritable cause des commits lents. Les développeurs veulent également pouvoir pister le travail résultant d'interactions spécifiques (ex. un clic sur un bouton, le chargement initial ou une navigation) pour repérer les régressions de performances éventuelles et comprendre pourquoi l'interaction est lente et comment y remédier. +Nous avons réalisé que pour les développeurs, simplement savoir quels commits ou composants sont lents, sans davantage de contexte, n'est pas très utile. Ils préfèreraient savoir quelle est la véritable cause des commits lents. Les développeurs veulent également pouvoir pister le travail résultant d'interactions spécifiques (ex. un clic sur un bouton, le chargement initial ou une navigation) pour repérer les régressions de performances éventuelles et comprendre pourquoi l'interaction est lente et comment y remédier. Nous avions déjà essayé de répondre à ce besoin en ajoutant une [API de pistage d'interaction](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mais sa conception avait des problèmes de fond qui en réduisaient la précision et pouvaient même rater la fin d'une interaction. En conséquence, nous avons finalement [retiré cette API](https://github.com/facebook/react/pull/20037). @@ -73,7 +73,7 @@ Nous travaillons sur une nouvelle version de l'API de pistage d'interactions (ap ## Nouvelles docs React {/*new-react-docs*/} -Nous avons annoncé 'année dernière une version beta du nouveau site web de documentation de React ([finalement livrée en tant que react.dev](/blog/2023/03/16/introducing-react-dev)). Ces nouveaux contenus pédagogiques sont basés sur les Hooks et comprennent de nouveaux diagrammeset illustrations, ainsi que de nombreux exemples et défis interactifs. Nous avons mis ce chantier en pause le temps de nous concentrer sur la sortie de React 18, mais maintenant que celui-ci est sorti, nous avons repris le travail pour boucler et sortir la nouvelle documentation. +Nous avons annoncé l'année dernière une version beta du nouveau site web de documentation de React ([finalement livrée en tant que react.dev](/blog/2023/03/16/introducing-react-dev)). Ces nouveaux contenus pédagogiques sont basés sur les Hooks et comprennent de nouveaux diagrammes et illustrations, ainsi que de nombreux exemples et défis interactifs. Nous avons mis ce chantier en pause le temps de nous concentrer sur la sortie de React 18, mais maintenant que celui-ci est sorti, nous avons repris le travail pour boucler et sortir la nouvelle documentation. Nous sommes en train d'écrire une section très détaillée sur les Effets, puisque vous nous avez souvent dit que c'était un des sujets les plus délicats à maîtriser pour les utilisateurs de React tant novices que chevronnés. La première page de la série s'appelle [Synchroniser grâce aux Effets](/learn/synchronizing-with-effects), et vous en verrez d'autres dans les prochaines semaines. Lorsque nous avons commencé cette section sur les Effets, nous avons réalisé que de nombreuses approches usuelles utilisant les Effets peuvent être simplifiées en ajoutant une nouvelle primitive à React. Nous avons partagé nos premières réflexions à ce sujet dans la [RFC pour useEvent](https://github.com/reactjs/rfcs/pull/220). Elle en est aux premiers stades de la recherche, et nous itérons sur le concept. Nous apprécions les commentaires de la communauté dans la RFC jusqu'ici, ainsi que les [retours](https://github.com/reactjs/reactjs.org/issues/3308) et contributions sur le chantier en cours de la nouvelle documentation. Nous aimerions notamment remercier [Harish Kumar](https://github.com/harish-sethuraman) pour avoir envoyé ou revu de nombreuses améliorations à l'implémentation du nouveau site web.