From 99738983c57aaa85a5c507c9c0d83a382ec75119 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 11:04:36 -0300 Subject: [PATCH 1/6] Translate `react-labs-what-we-have-been-working-on-june-2022.md` to pt-br --- ...-what-we-have-been-working-on-june-2022.md | 75 +++++++++---------- 1 file changed, 37 insertions(+), 38 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 134990991..76a3c38cf 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 @@ -1,82 +1,81 @@ --- -title: "React Labs: What We've Been Working On – June 2022" -author: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, and Xuan Huang +title: "React Labs: Em que Estamos Trabalhando – Junho de 2022" +author: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, e Xuan Huang date: 2022/06/15 -description: 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. +description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novas descobertas. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. --- -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) +15 de junho de 2022 por [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), e [Xuan Huang](https://twitter.com/Huxpro) --- -[React 18](/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) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novas descobertas. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. --- -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. +Normalmente, temos vários projetos em andamento a qualquer momento, variando do mais experimental ao claramente definido. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que estamos trabalhando com a comunidade nesses projetos. -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. +Para definir expectativas, este não é um roteiro com prazos claros. Muitos desses projetos estão em pesquisa ativa e é difícil estabelecer datas de lançamento concretas. Eles podem nunca até ser lançados em sua iteração atual, dependendo do que aprendermos. Em vez disso, queremos compartilhar com você os espaços de problema que estamos pensando ativamente e o que aprendemos até agora. -## Server Components {/*server-components*/} +## Componentes do Servidor {/*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. +Anunciamos uma [demonstração experimental dos Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18 e trabalhado em mudanças inspiradas pelo feedback experimental. -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). +Em particular, estamos abandonando a ideia de ter bibliotecas de I/O bifurcadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC porque você também pode usar roteadores para busca de dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](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. +Estamos trabalhando juntos com a Vercel e Shopify para unificar o suporte a empacotadores para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos ter certeza de que as semânticas dos RSCs sejam as mesmas em todo o ecossistema do React. Esse é o principal bloqueador para alcançar a estabilidade. -## Asset Loading {/*asset-loading*/} +## Carregamento de Ativos {/*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. +Atualmente, ativos como scripts, estilos externos, fontes e imagens geralmente são pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação em novos ambientes, como streaming, Componentes do Servidor e mais. Estamos considerando adicionar APIs para pré-carregar e carregar ativos externos deduplicados por meio de APIs do React que funcionem em todos os ambientes do React. -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. +Também estamos analisando a possibilidade de fazer com que esses suportem Suspense, para que você possa ter imagens, CSS e fontes que bloqueiem a exibição até que sejam carregadas, mas não bloqueiem o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) conforme os visuais surgem e o layout muda. -## Static Server Rendering Optimizations {/*static-server-rendering-optimizations*/} +## Otimizações de Renderização Estática no Servidor {/*static-server-rendering-optimizations*/} -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. +A Geração de Sites Estáticos (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas em cache, mas achamos que podemos adicionar recursos para melhorar o desempenho da Renderização Dinâmica do Lado do Servidor (SSR) – especialmente quando a maior parte, mas não todo o conteúdo é armazenável em cache. Estamos explorando maneiras de otimizar a renderização no servidor utilizando compilação e passes estáticos. -## React Optimizing Compiler {/*react-compiler*/} +## Compilador Otimizador do React {/*react-compiler*/} -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. +Demos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas de `useMemo` e `useCallback` para minimizar o custo da re-renderização, enquanto mantém o modelo de programação do React. -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. +Recentemente, terminamos uma reescrita do compilador para torná-lo mais confiável e capaz. Essa nova arquitetura nos permite analisar e memorar padrões mais complexos, como o uso de [mutations locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação, além de ser equivalente a Hooks de memorização. -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. +Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, achamos que tornará mais fácil testar e desenvolver a intuição sobre o que o compilador faz. Ele revela várias descobertas sobre como funciona internamente, e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será enviado junto com o compilador quando for liberado. ## Offscreen {/*offscreen*/} -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. +Hoje, se você quiser esconder e mostrar um componente, você tem duas opções. Uma é adicionar ou remover totalmente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido toda vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. -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. +A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas vem com um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. -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. +Offscreen introduz uma terceira opção: esconder a UI visualmente, mas rebaixar sua prioridade. A ideia é semelhante em espírito à propriedade CSS `content-visibility`: quando o conteúdo está oculto, não precisa estar em sincronia com o restante da UI. O React pode adiar o trabalho de renderização até que o restante do aplicativo esteja ocioso ou até que o conteúdo se torne visível novamente. -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: +Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá diretamente com a API Offscreen, mas sim por meio de um framework opinativo para implementar padrões como: -* **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. +* **Transições instantâneas.** Alguns frameworks de roteamento já pré-buscam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, eles também poderão pré-renderizar a próxima tela em segundo plano. +* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, para que possa voltar e retomar de onde parou. +* **Renderização de listas virtualizadas.** Ao exibir grandes listas de itens, frameworks de listas virtualizadas pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas em uma prioridade menor do que os itens visíveis da lista. +* **Conteúdo em segundo plano.** Estamos também explorando um recurso relacionado para rebaixar a prioridade de conteúdos em segundo plano sem ocultá-los, como ao exibir uma sobreposição modal. -## Transition Tracing {/*transition-tracing*/} +## Rastreando Transições {/*transition-tracing*/} -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. +Atualmente, o React possui duas ferramentas de perfilagem. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilagem. Para cada commit, ele também mostra todos os componentes que renderizaram e o tempo que levou para eles renderizarem. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzida no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambos os profilers ajudam os desenvolvedores a identificar problemas de desempenho em seu código. -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. +Percebemos que os desenvolvedores não acham útil saber sobre commits lentos individuais ou componentes fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E os desenvolvedores querem poder rastrear interações específicas (por exemplo, um clique em botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigi-la. -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. +Tentamos resolver essa questão criando uma [API de Rastreio de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas teve algumas falhas de design fundamentais que reduziram a precisão do rastreamento de por que uma interação estava lenta e, às vezes, resultaram em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) devido a esses problemas. -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. +Estamos trabalhando em uma nova versão da API de Rastreio de Interações (provisoriamente chamada de Rastreio de Transições, porque é iniciada via `startTransition`) que resolve esses problemas. -## New React Docs {/*new-react-docs*/} +## Novos Docs do React {/*new-react-docs*/} -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. +No ano passado, anunciamos a versão beta do novo site de documentação do React ([posteriormente lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). O novo material de aprendizado ensina Hooks primeiro e possui novos diagramas, ilustrações, bem como muitos exemplos e desafios interativos. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. -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/react.dev/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. +Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que este é um dos tópicos mais desafiadores tanto para novos quanto para usuários experientes do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e haverá mais a seguir nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeito podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas reflexões iniciais sobre isso no [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especificamente a [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na nova implementação do site. -*Thanks to [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this blog post!* +*Obrigado a [Sophie Alpert](https://twitter.com/sophiebits) por revisar este post do blog!* \ No newline at end of file From cacd02b8c0660f30869a00e541026739d77e606d Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 11:08:27 -0300 Subject: [PATCH 2/6] Translate `react-labs-what-we-have-been-working-on-june-2022.md` to pt-br --- ...-what-we-have-been-working-on-june-2022.md | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 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 76a3c38cf..e5271a927 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 @@ -1,8 +1,8 @@ --- -title: "React Labs: Em que Estamos Trabalhando – Junho de 2022" +title: "React Labs: No que Estamos Trabalhando – Junho de 2022" author: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, e Xuan Huang date: 2022/06/15 -description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novas descobertas. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. +description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de diversos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novas percepções. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão desses caminhos que estamos explorando. --- 15 de junho de 2022 por [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), e [Xuan Huang](https://twitter.com/Huxpro) @@ -11,71 +11,71 @@ description: O React 18 levou anos para ser desenvolvido e trouxe lições valio -[React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novas descobertas. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. +[React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de diversos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novas percepções. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão desses caminhos que estamos explorando. --- -Normalmente, temos vários projetos em andamento a qualquer momento, variando do mais experimental ao claramente definido. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que estamos trabalhando com a comunidade nesses projetos. +Normalmente, temos vários projetos em andamento ao mesmo tempo, que variam do mais experimental ao claramente definido. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que estamos trabalhando com a comunidade em relação a esses projetos. -Para definir expectativas, este não é um roteiro com prazos claros. Muitos desses projetos estão em pesquisa ativa e é difícil estabelecer datas de lançamento concretas. Eles podem nunca até ser lançados em sua iteração atual, dependendo do que aprendermos. Em vez disso, queremos compartilhar com você os espaços de problema que estamos pensando ativamente e o que aprendemos até agora. +Para definir expectativas, este não é um roteiro com prazos claros. Muitos desses projetos estão em pesquisa ativa e são difíceis de determinar datas concretas de lançamento. Eles podem, possivelmente, nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com vocês os espaços problemáticos que estamos pensando ativamente e o que já aprendemos até agora. ## Componentes do Servidor {/*server-components*/} -Anunciamos uma [demonstração experimental dos Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18 e trabalhado em mudanças inspiradas pelo feedback experimental. +Anunciamos uma [demonstração experimental dos Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, estamos finalizando suas dependências no React 18 e trabalhando em mudanças inspiradas pelo feedback experimental. -Em particular, estamos abandonando a ideia de ter bibliotecas de I/O bifurcadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC porque você também pode usar roteadores para busca de dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo de async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC, pois você também pode usar roteadores para busca de dados. Outra mudança é que estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). -Estamos trabalhando juntos com a Vercel e Shopify para unificar o suporte a empacotadores para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos ter certeza de que as semânticas dos RSCs sejam as mesmas em todo o ecossistema do React. Esse é o principal bloqueador para alcançar a estabilidade. +Estamos trabalhando junto com a Vercel e a Shopify para unificar o suporte ao empacotador para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos garantir que as semânticas do RSC sejam as mesmas em todo o ecossistema React. Este é o maior bloqueio para alcançar estabilidade. -## Carregamento de Ativos {/*asset-loading*/} +## Carregamento de Recursos {/*asset-loading*/} -Atualmente, ativos como scripts, estilos externos, fontes e imagens geralmente são pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação em novos ambientes, como streaming, Componentes do Servidor e mais. Estamos considerando adicionar APIs para pré-carregar e carregar ativos externos deduplicados por meio de APIs do React que funcionem em todos os ambientes do React. +Atualmente, recursos como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode tornar complicado coordenar entre novos ambientes como streaming, Componentes do Servidor e mais. Estamos analisando a adição de APIs para pré-carregar e carregar recursos externos deduplicados através de APIs do React que funcionem em todos os ambientes do React. -Também estamos analisando a possibilidade de fazer com que esses suportem Suspense, para que você possa ter imagens, CSS e fontes que bloqueiem a exibição até que sejam carregadas, mas não bloqueiem o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) conforme os visuais surgem e o layout muda. +Estamos também avaliando como fazer com que esses suportem Suspense, para que você possa ter imagens, CSS e fontes que bloqueiem a exibição até que sejam carregadas, mas não bloqueiem o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) à medida que os visuais aparecem e o layout muda. -## Otimizações de Renderização Estática no Servidor {/*static-server-rendering-optimizations*/} +## Otimizações de Renderização de Servidor Estático {/*static-server-rendering-optimizations*/} -A Geração de Sites Estáticos (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas em cache, mas achamos que podemos adicionar recursos para melhorar o desempenho da Renderização Dinâmica do Lado do Servidor (SSR) – especialmente quando a maior parte, mas não todo o conteúdo é armazenável em cache. Estamos explorando maneiras de otimizar a renderização no servidor utilizando compilação e passes estáticos. +A Geração de Site Estático (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas que podem ser armazenadas em cache, mas acreditamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maior parte, mas não todo o conteúdo é armazenável em cache. Estamos explorando maneiras de otimizar a renderização do servidor utilizando compilações e passes estáticos. ## Compilador Otimizador do React {/*react-compiler*/} -Demos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas de `useMemo` e `useCallback` para minimizar o custo da re-renderização, enquanto mantém o modelo de programação do React. +Demos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas `useMemo` e `useCallback` para minimizar o custo da re-renderização, mantendo o modelo de programação do React. -Recentemente, terminamos uma reescrita do compilador para torná-lo mais confiável e capaz. Essa nova arquitetura nos permite analisar e memorar padrões mais complexos, como o uso de [mutations locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação, além de ser equivalente a Hooks de memorização. +Recentemente, concluímos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memorizar padrões mais complexos, como o uso de [mut ações locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação, além de estar à altura dos Hooks de memorização. -Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, achamos que tornará mais fácil testar e desenvolver a intuição sobre o que o compilador faz. Ele revela várias descobertas sobre como funciona internamente, e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será enviado junto com o compilador quando for liberado. +Estamos também trabalhando em um playground para explorar muitos aspectos do compilador. Enquanto o objetivo do playground é facilitar o desenvolvimento do compilador, acreditamos que tornará mais fácil experimentá-lo e criar intuição sobre o que o compilador faz. Ele revela várias percepções sobre como funciona internamente e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será lançado junto com o compilador quando ele for liberado. ## Offscreen {/*offscreen*/} -Hoje, se você quiser esconder e mostrar um componente, você tem duas opções. Uma é adicionar ou remover totalmente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido toda vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. +Hoje, se você quiser esconder e mostrar um componente, você tem duas opções. Uma é adicioná-lo ou removê-lo completamente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido sempre que você desmonta, incluindo estados armazenados no DOM, como a posição de rolagem. -A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas vem com um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. +A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas vem com um custo de desempenho, pois o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. -Offscreen introduz uma terceira opção: esconder a UI visualmente, mas rebaixar sua prioridade. A ideia é semelhante em espírito à propriedade CSS `content-visibility`: quando o conteúdo está oculto, não precisa estar em sincronia com o restante da UI. O React pode adiar o trabalho de renderização até que o restante do aplicativo esteja ocioso ou até que o conteúdo se torne visível novamente. +Offscreen introduz uma terceira opção: esconder a UI visualmente, mas despriorizar seu conteúdo. A ideia é semelhante ao `content-visibility` da propriedade CSS: quando o conteúdo está oculto, ele não precisa ficar sincronizado com o resto da UI. O React pode adiar o trabalho de renderização até que o restante do aplicativo esteja ocioso, ou até que o conteúdo se torne visível novamente. -Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá diretamente com a API Offscreen, mas sim por meio de um framework opinativo para implementar padrões como: +Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá com a API Offscreen diretamente, mas sim por meio de um framework opinativo para implementar padrões como: * **Transições instantâneas.** Alguns frameworks de roteamento já pré-buscam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, eles também poderão pré-renderizar a próxima tela em segundo plano. -* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, para que possa voltar e retomar de onde parou. -* **Renderização de listas virtualizadas.** Ao exibir grandes listas de itens, frameworks de listas virtualizadas pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas em uma prioridade menor do que os itens visíveis da lista. -* **Conteúdo em segundo plano.** Estamos também explorando um recurso relacionado para rebaixar a prioridade de conteúdos em segundo plano sem ocultá-los, como ao exibir uma sobreposição modal. +* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, permitindo que você volte e retome de onde parou. +* **Renderização de lista virtualizada.** Ao exibir grandes listas de itens, frameworks de lista virtualizada pré-renderizarão mais linhas do que as atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. +* **Conteúdo em segundo plano.** Estamos também explorando um recurso relacionado para despriorizar conteúdo em segundo plano sem escondê-lo, como ao exibir um overlay modal. -## Rastreando Transições {/*transition-tracing*/} +## Rastreio de Transições {/*transition-tracing*/} -Atualmente, o React possui duas ferramentas de perfilagem. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilagem. Para cada commit, ele também mostra todos os componentes que renderizaram e o tempo que levou para eles renderizarem. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzida no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambos os profilers ajudam os desenvolvedores a identificar problemas de desempenho em seu código. +Atualmente, o React tem duas ferramentas de perfilamento. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilamento. Para cada commit, ele também mostra todos os componentes que renderizaram e a quantidade de tempo que levou para eles renderizarem. Também temos uma versão beta do [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzida no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambas essas ferramentas ajudam os desenvolvedores a identificar problemas de desempenho em seu código. -Percebemos que os desenvolvedores não acham útil saber sobre commits lentos individuais ou componentes fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E os desenvolvedores querem poder rastrear interações específicas (por exemplo, um clique em botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigi-la. +Percebemos que os desenvolvedores não acham tão útil saber sobre commits individuais lentos ou componentes fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E que os desenvolvedores querem poder rastrear interações específicas (por exemplo, um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigir isso. -Tentamos resolver essa questão criando uma [API de Rastreio de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas teve algumas falhas de design fundamentais que reduziram a precisão do rastreamento de por que uma interação estava lenta e, às vezes, resultaram em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) devido a esses problemas. +Tentamos resolver esse problema anteriormente criando uma [API de Rastreio de Interação](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas ela tinha algumas falhas de design fundamentais que reduziriam a precisão de rastreamento do porquê uma interação foi lenta e, às vezes, resultava em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) devido a esses problemas. -Estamos trabalhando em uma nova versão da API de Rastreio de Interações (provisoriamente chamada de Rastreio de Transições, porque é iniciada via `startTransition`) que resolve esses problemas. +Estamos trabalhando em uma nova versão para a API de Rastreio de Interação (provisoriamente chamada de Rastreio de Transições porque é iniciada via `startTransition`) que resolve esses problemas. -## Novos Docs do React {/*new-react-docs*/} +## Novos Documentos do React {/*new-react-docs*/} -No ano passado, anunciamos a versão beta do novo site de documentação do React ([posteriormente lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). O novo material de aprendizado ensina Hooks primeiro e possui novos diagramas, ilustrações, bem como muitos exemplos e desafios interativos. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. +No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). O novo material de aprendizado ensina Hooks primeiro e possui novos diagramas, ilustrações, além de muitos exemplos interativos e desafios. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. -Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que este é um dos tópicos mais desafiadores tanto para novos quanto para usuários experientes do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e haverá mais a seguir nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeito podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas reflexões iniciais sobre isso no [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especificamente a [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na nova implementação do site. +Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que esse é um dos tópicos mais desafiadores tanto para novos quanto para experientes usuários do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e mais virão nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeitos podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas reflexões iniciais sobre isso no [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial, e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, bem como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especificamente [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na implementação do novo site. *Obrigado a [Sophie Alpert](https://twitter.com/sophiebits) por revisar este post do blog!* \ No newline at end of file From 9bce834e664ca00984257cbe85da7f6ef0945ad4 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 11:37:01 -0300 Subject: [PATCH 3/6] Translate `react-labs-what-we-have-been-working-on-june-2022.md` to pt-br --- ...-what-we-have-been-working-on-june-2022.md | 61 ++++++++++--------- 1 file changed, 31 insertions(+), 30 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 e5271a927..9ecf5275b 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 @@ -1,8 +1,8 @@ --- -title: "React Labs: No que Estamos Trabalhando – Junho de 2022" +title: "React Labs: No que temos trabalhado – Junho de 2022" author: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, e Xuan Huang date: 2022/06/15 -description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de diversos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novas percepções. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão desses caminhos que estamos explorando. +description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. --- 15 de junho de 2022 por [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), e [Xuan Huang](https://twitter.com/Huxpro) @@ -11,71 +11,72 @@ description: O React 18 levou anos para ser desenvolvido e trouxe lições valio -[React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de diversos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novas percepções. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão desses caminhos que estamos explorando. +[O React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. --- -Normalmente, temos vários projetos em andamento ao mesmo tempo, que variam do mais experimental ao claramente definido. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que estamos trabalhando com a comunidade em relação a esses projetos. +Geralmente temos vários projetos em andamento a qualquer momento, variando de experimentais a claramente definidos. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que temos trabalhado com a comunidade em relação a esses projetos. -Para definir expectativas, este não é um roteiro com prazos claros. Muitos desses projetos estão em pesquisa ativa e são difíceis de determinar datas concretas de lançamento. Eles podem, possivelmente, nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com vocês os espaços problemáticos que estamos pensando ativamente e o que já aprendemos até agora. +Para definir expectativas, isso não é um roteiro com prazos claros. Muitos desses projetos estão sob pesquisa ativa e é difícil estabelecer datas de lançamento concretas. Eles podem nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com vocês os espaços de problemas que estamos pensando ativamente e o que aprendemos até agora. ## Componentes do Servidor {/*server-components*/} -Anunciamos uma [demonstração experimental dos Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, estamos finalizando suas dependências no React 18 e trabalhando em mudanças inspiradas pelo feedback experimental. +Anunciamos uma [demonstração experimental dos Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18 e trabalhado em mudanças inspiradas pelo feedback experimental. -Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo de async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC, pois você também pode usar roteadores para busca de dados. Outra mudança é que estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso não bloqueia tecnicamente o lançamento de RSC porque você também pode usar roteadores para busca de dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). -Estamos trabalhando junto com a Vercel e a Shopify para unificar o suporte ao empacotador para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos garantir que as semânticas do RSC sejam as mesmas em todo o ecossistema React. Este é o maior bloqueio para alcançar estabilidade. +Estamos trabalhando juntos com a Vercel e a Shopify para unificar o suporte a empacotadores para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos garantir que as semânticas de RSCs sejam as mesmas em todo o ecossistema React. Este é o principal bloqueador para alcançar a estabilidade. ## Carregamento de Recursos {/*asset-loading*/} -Atualmente, recursos como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode tornar complicado coordenar entre novos ambientes como streaming, Componentes do Servidor e mais. Estamos analisando a adição de APIs para pré-carregar e carregar recursos externos deduplicados através de APIs do React que funcionem em todos os ambientes do React. +Atualmente, recursos como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação entre novos ambientes como streaming, Componentes do Servidor e mais. +Estamos analisando a adição de APIs para pré-carregar e carregar recursos externos deduplicados através das APIs do React que funcionem em todos os ambientes do React. -Estamos também avaliando como fazer com que esses suportem Suspense, para que você possa ter imagens, CSS e fontes que bloqueiem a exibição até que sejam carregadas, mas não bloqueiem o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) à medida que os visuais aparecem e o layout muda. +Estamos também considerando que esses recursos suportem Suspense para que você possa ter imagens, CSS e fontes que bloqueiem a exibição até serem carregados, mas que não bloqueiem o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) à medida que os visuais aparecem e o layout muda. ## Otimizações de Renderização de Servidor Estático {/*static-server-rendering-optimizations*/} -A Geração de Site Estático (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas que podem ser armazenadas em cache, mas acreditamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maior parte, mas não todo o conteúdo é armazenável em cache. Estamos explorando maneiras de otimizar a renderização do servidor utilizando compilações e passes estáticos. +A Geração de Sites Estáticos (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas em cache, mas achamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maior parte, mas não todo o conteúdo é cacheável. Estamos explorando maneiras de otimizar a renderização do servidor utilizando compilação e passes estáticos. ## Compilador Otimizador do React {/*react-compiler*/} -Demos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas `useMemo` e `useCallback` para minimizar o custo da re-renderização, mantendo o modelo de programação do React. +Nós demos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas `useMemo` e `useCallback` para minimizar o custo de re-renderização, enquanto retém o modelo de programação do React. -Recentemente, concluímos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memorizar padrões mais complexos, como o uso de [mut ações locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação, além de estar à altura dos Hooks de memorização. +Recentemente, finalizamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memoizar padrões mais complexos, como o uso de [mutações locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação além de estar apenas no mesmo nível que Hooks de memoização. -Estamos também trabalhando em um playground para explorar muitos aspectos do compilador. Enquanto o objetivo do playground é facilitar o desenvolvimento do compilador, acreditamos que tornará mais fácil experimentá-lo e criar intuição sobre o que o compilador faz. Ele revela várias percepções sobre como funciona internamente e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será lançado junto com o compilador quando ele for liberado. +Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, achamos que tornará mais fácil experimentá-lo e desenvolver intuições sobre o que o compilador faz. Ele revela vários insights sobre como funciona internamente e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será lançado junto com o compilador quando for disponibilizado. ## Offscreen {/*offscreen*/} -Hoje, se você quiser esconder e mostrar um componente, você tem duas opções. Uma é adicioná-lo ou removê-lo completamente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido sempre que você desmonta, incluindo estados armazenados no DOM, como a posição de rolagem. +Hoje, se você quiser esconder e mostrar um componente, tem duas opções. Uma é adicioná-lo ou removê-lo da árvore completamente. O problema com essa abordagem é que o estado da sua interface de usuário é perdido sempre que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. -A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas vem com um custo de desempenho, pois o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. +A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua interface de usuário, mas tem um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. -Offscreen introduz uma terceira opção: esconder a UI visualmente, mas despriorizar seu conteúdo. A ideia é semelhante ao `content-visibility` da propriedade CSS: quando o conteúdo está oculto, ele não precisa ficar sincronizado com o resto da UI. O React pode adiar o trabalho de renderização até que o restante do aplicativo esteja ocioso, ou até que o conteúdo se torne visível novamente. +Offscreen introduz uma terceira opção: esconder a interface visualmente, mas depriorizar seu conteúdo. A ideia é similar ao espírito da propriedade CSS `content-visibility`: quando o conteúdo está oculto, ele não precisa ficar em sincronia com o resto da interface. O React pode adiar o trabalho de renderização até que o restante do aplicativo esteja ocioso ou até que o conteúdo se torne visível novamente. -Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá com a API Offscreen diretamente, mas sim por meio de um framework opinativo para implementar padrões como: +Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outras funcionalidades concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá diretamente com a API Offscreen, mas sim por meio de uma estrutura opinativa para implementar padrões como: -* **Transições instantâneas.** Alguns frameworks de roteamento já pré-buscam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, eles também poderão pré-renderizar a próxima tela em segundo plano. -* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, permitindo que você volte e retome de onde parou. -* **Renderização de lista virtualizada.** Ao exibir grandes listas de itens, frameworks de lista virtualizada pré-renderizarão mais linhas do que as atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. -* **Conteúdo em segundo plano.** Estamos também explorando um recurso relacionado para despriorizar conteúdo em segundo plano sem escondê-lo, como ao exibir um overlay modal. +* **Transições instantâneas.** Algumas estruturas de roteamento já pré-buscam dados para acelerar navegações subsequentes, como quando você passa o mouse sobre um link. Com Offscreen, elas também poderão pré-renderizar a próxima tela em segundo plano. +* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, assim você pode voltar e retomar de onde parou. +* **Renderização de listas virtualizadas.** Ao exibir grandes listas de itens, frameworks de listas virtualizadas pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. +* **Conteúdo em segundo plano.** Também estamos explorando um recurso relacionado para depriorizar conteúdo em segundo plano sem escondê-lo, como ao exibir uma sobreposição modal. ## Rastreio de Transições {/*transition-tracing*/} -Atualmente, o React tem duas ferramentas de perfilamento. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilamento. Para cada commit, ele também mostra todos os componentes que renderizaram e a quantidade de tempo que levou para eles renderizarem. Também temos uma versão beta do [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzida no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambas essas ferramentas ajudam os desenvolvedores a identificar problemas de desempenho em seu código. +Atualmente, o React possui duas ferramentas de perfilamento. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilamento. Para cada commit, ele também mostra todos os componentes que renderizaram e o tempo que levou para renderizá-los. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzido no React 18 que mostra quando os componentes programam atualizações e quando o React trabalha nessas atualizações. Ambas as ferramentas de perfilamento ajudam os desenvolvedores a identificar problemas de desempenho em seu código. -Percebemos que os desenvolvedores não acham tão útil saber sobre commits individuais lentos ou componentes fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E que os desenvolvedores querem poder rastrear interações específicas (por exemplo, um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigir isso. +Percebemos que os desenvolvedores não acham útil saber sobre commits lentos ou componentes individuais fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E que os desenvolvedores querem ser capazes de rastrear interações específicas (por exemplo, um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigir isso. -Tentamos resolver esse problema anteriormente criando uma [API de Rastreio de Interação](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas ela tinha algumas falhas de design fundamentais que reduziriam a precisão de rastreamento do porquê uma interação foi lenta e, às vezes, resultava em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) devido a esses problemas. +Anteriormente, tentamos resolver esse problema criando uma [API de Rastreio de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas ela tinha alguns defeitos de design fundamentais que reduziram a precisão do rastreamento sobre por que uma interação foi lenta e às vezes resultaram em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) devido a esses problemas. -Estamos trabalhando em uma nova versão para a API de Rastreio de Interação (provisoriamente chamada de Rastreio de Transições porque é iniciada via `startTransition`) que resolve esses problemas. +Estamos trabalhando em uma nova versão para a API de Rastreio de Interações (provisoriamente chamada de Rastreio de Transições porque é iniciada via `startTransition`) que resolve esses problemas. -## Novos Documentos do React {/*new-react-docs*/} +## Novos Docs do React {/*new-react-docs*/} -No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). O novo material de aprendizado ensina Hooks primeiro e possui novos diagramas, ilustrações, além de muitos exemplos interativos e desafios. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. +No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). O novo material de aprendizagem ensina Hooks primeiro e possui novos diagramas, ilustrações, além de muitos exemplos interativos e desafios. Fizemos uma pausa nesse trabalho para nos concentrar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. -Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que esse é um dos tópicos mais desafiadores tanto para novos quanto para experientes usuários do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e mais virão nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeitos podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas reflexões iniciais sobre isso no [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial, e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, bem como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especificamente [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na implementação do novo site. +Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que esse é um dos tópicos mais desafiadores tanto para novos usuários quanto para usuários experientes do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e haverá mais nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeitos podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas ideias iniciais sobre isso na [RFC useEvent](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre a RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especialmente a [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na nova implementação do site. -*Obrigado a [Sophie Alpert](https://twitter.com/sophiebits) por revisar este post do blog!* \ No newline at end of file +*Agradecimentos a [Sophie Alpert](https://twitter.com/sophiebits) por revisar este post no blog!* \ No newline at end of file From fcfa4f44ca93135bf7e5981c016c728d59441fed Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 14:16:06 -0300 Subject: [PATCH 4/6] Translate `react-labs-what-we-have-been-working-on-june-2022.md` to pt-br --- ...-what-we-have-been-working-on-june-2022.md | 67 +++++++++---------- 1 file changed, 33 insertions(+), 34 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 9ecf5275b..686fa8240 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 @@ -1,8 +1,8 @@ --- -title: "React Labs: No que temos trabalhado – Junho de 2022" +title: "React Labs: No que estamos trabalhando – Junho de 2022" author: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, e Xuan Huang date: 2022/06/15 -description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. +description: O React 18 levou anos para ser desenvolvido, e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de muitos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade aguardar novas funcionalidades sem ter informações sobre esses caminhos que estamos explorando. --- 15 de junho de 2022 por [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), e [Xuan Huang](https://twitter.com/Huxpro) @@ -11,72 +11,71 @@ description: O React 18 levou anos para ser desenvolvido e trouxe lições valio -[O React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. +[React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido, e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de muitos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade aguardar novas funcionalidades sem ter informações sobre esses caminhos que estamos explorando. --- -Geralmente temos vários projetos em andamento a qualquer momento, variando de experimentais a claramente definidos. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que temos trabalhado com a comunidade em relação a esses projetos. +Normalmente, temos vários projetos em andamento a qualquer momento, variando dos mais experimentais aos claramente definidos. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que estamos trabalhando com a comunidade em relação a esses projetos. -Para definir expectativas, isso não é um roteiro com prazos claros. Muitos desses projetos estão sob pesquisa ativa e é difícil estabelecer datas de lançamento concretas. Eles podem nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com vocês os espaços de problemas que estamos pensando ativamente e o que aprendemos até agora. +Para definir expectativas, este não é um roteiro com prazos claros. Muitos desses projetos estão sob pesquisa ativa e são difíceis de definir datas concretas de lançamento. Eles podem nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com você os espaços problemáticos nos quais estamos pensando ativamente, e o que aprendemos até agora. ## Componentes do Servidor {/*server-components*/} -Anunciamos uma [demonstração experimental dos Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18 e trabalhado em mudanças inspiradas pelo feedback experimental. +Anunciamos uma [demonstração experimental dos Componentes do Servidor React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18, e trabalhando em mudanças inspiradas pelo feedback experimental. -Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso não bloqueia tecnicamente o lançamento de RSC porque você também pode usar roteadores para busca de dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch), e adotando um modelo async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC porque você também pode usar roteadores para busca de dados. Outra mudança é que estamos nos afastando da abordagem de extensão de arquivo em favor de [anotação de limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). -Estamos trabalhando juntos com a Vercel e a Shopify para unificar o suporte a empacotadores para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos garantir que as semânticas de RSCs sejam as mesmas em todo o ecossistema React. Este é o principal bloqueador para alcançar a estabilidade. +Estamos trabalhando junto com a Vercel e a Shopify para unificar o suporte a bundlers para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos garantir que as semânticas dos RSCs sejam as mesmas em todo o ecossistema React. Este é o principal bloqueio para alcançar a estabilidade. -## Carregamento de Recursos {/*asset-loading*/} +## Carregamento de Asset {/*asset-loading*/} -Atualmente, recursos como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação entre novos ambientes como streaming, Componentes do Servidor e mais. -Estamos analisando a adição de APIs para pré-carregar e carregar recursos externos deduplicados através das APIs do React que funcionem em todos os ambientes do React. +Atualmente, assets como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação em novos ambientes como streaming, Componentes do Servidor, e mais. Estamos analisando a adição de APIs para pré-carregar e carregar assets externos deduplicados através de APIs do React que funcionam em todos os ambientes React. -Estamos também considerando que esses recursos suportem Suspense para que você possa ter imagens, CSS e fontes que bloqueiem a exibição até serem carregados, mas que não bloqueiem o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) à medida que os visuais aparecem e o layout muda. +Estamos também pensando em ter suporte a Suspense para que você possa ter imagens, CSS e fontes que bloqueiam a exibição até serem carregadas, mas não bloqueiam o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) enquanto os visuais aparecem e a disposição muda. -## Otimizações de Renderização de Servidor Estático {/*static-server-rendering-optimizations*/} +## Otimizações de Renderização Estática do Servidor {/*static-server-rendering-optimizations*/} -A Geração de Sites Estáticos (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas em cache, mas achamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maior parte, mas não todo o conteúdo é cacheável. Estamos explorando maneiras de otimizar a renderização do servidor utilizando compilação e passes estáticos. +A Geração de Sites Estáticos (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas armazenáveis em cache, mas achamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maior parte do conteúdo é armazenável em cache, mas não todo. Estamos explorando maneiras de otimizar a renderização do servidor utilizando passes de compilação e estáticos. ## Compilador Otimizador do React {/*react-compiler*/} -Nós demos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas `useMemo` e `useCallback` para minimizar o custo de re-renderização, enquanto retém o modelo de programação do React. +Demos uma [prévia antecipada](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente às chamadas `useMemo` e `useCallback` para minimizar o custo de re-renderização, enquanto mantém o modelo de programação do React. -Recentemente, finalizamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memoizar padrões mais complexos, como o uso de [mutações locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação além de estar apenas no mesmo nível que Hooks de memoização. +Recentemente, terminamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memorizar padrões mais complexos, como o uso de [mutations locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação além de apenas estar no mesmo nível que os Hooks de memorização. -Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, achamos que tornará mais fácil experimentá-lo e desenvolver intuições sobre o que o compilador faz. Ele revela vários insights sobre como funciona internamente e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será lançado junto com o compilador quando for disponibilizado. +Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Enquanto o objetivo do playground é facilitar o desenvolvimento do compilador, acreditamos que ele tornará mais fácil testá-lo e construir uma intuição sobre o que o compilador faz. Ele revela vários insights sobre como ele funciona internamente e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será lançado junto com o compilador quando for lançado. ## Offscreen {/*offscreen*/} -Hoje, se você quiser esconder e mostrar um componente, tem duas opções. Uma é adicioná-lo ou removê-lo da árvore completamente. O problema com essa abordagem é que o estado da sua interface de usuário é perdido sempre que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. +Hoje, se você quiser esconder e mostrar um componente, tem duas opções. Uma é adicionar ou remover completamente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido toda vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. -A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua interface de usuário, mas tem um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. +A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas tem um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. -Offscreen introduz uma terceira opção: esconder a interface visualmente, mas depriorizar seu conteúdo. A ideia é similar ao espírito da propriedade CSS `content-visibility`: quando o conteúdo está oculto, ele não precisa ficar em sincronia com o resto da interface. O React pode adiar o trabalho de renderização até que o restante do aplicativo esteja ocioso ou até que o conteúdo se torne visível novamente. +Offscreen introduz uma terceira opção: esconder a UI visualmente, mas depriorizar seu conteúdo. A ideia é semelhante em espírito à propriedade CSS `content-visibility`: quando o conteúdo está oculto, não precisa ficar sincronizado com o restante da UI. O React pode adiar o trabalho de renderização até que o restante do app esteja ocioso, ou até que o conteúdo se torne visível novamente. -Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outras funcionalidades concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá diretamente com a API Offscreen, mas sim por meio de uma estrutura opinativa para implementar padrões como: +Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá diretamente com a API Offscreen, mas sim por meio de uma estrutura opinativa para implementar padrões como: -* **Transições instantâneas.** Algumas estruturas de roteamento já pré-buscam dados para acelerar navegações subsequentes, como quando você passa o mouse sobre um link. Com Offscreen, elas também poderão pré-renderizar a próxima tela em segundo plano. -* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, assim você pode voltar e retomar de onde parou. -* **Renderização de listas virtualizadas.** Ao exibir grandes listas de itens, frameworks de listas virtualizadas pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. -* **Conteúdo em segundo plano.** Também estamos explorando um recurso relacionado para depriorizar conteúdo em segundo plano sem escondê-lo, como ao exibir uma sobreposição modal. +* **Transições instantâneas.** Algumas estruturas de roteamento já pré-buscam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, elas também poderão pré-renderizar a próxima tela em segundo plano. +* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior para que possa voltar e retomar de onde parou. +* **Renderização de listas virtualizadas.** Ao exibir listas grandes de itens, estruturas de listas virtualizadas pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. +* **Conteúdo em segundo plano.** Também estamos explorando um recurso relacionado para depriorizar conteúdo em segundo plano sem ocultá-lo, como ao exibir uma sobreposição modal. -## Rastreio de Transições {/*transition-tracing*/} +## Rastreamento de Transições {/*transition-tracing*/} -Atualmente, o React possui duas ferramentas de perfilamento. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilamento. Para cada commit, ele também mostra todos os componentes que renderizaram e o tempo que levou para renderizá-los. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzido no React 18 que mostra quando os componentes programam atualizações e quando o React trabalha nessas atualizações. Ambas as ferramentas de perfilamento ajudam os desenvolvedores a identificar problemas de desempenho em seu código. +Atualmente, o React possui duas ferramentas de profiling. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de profiling. Para cada commit, ele também mostra todos os componentes que foram renderizados e o tempo que levou para eles renderizarem. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzido no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambas essas ferramentas ajudam os desenvolvedores a identificar problemas de desempenho em seu código. -Percebemos que os desenvolvedores não acham útil saber sobre commits lentos ou componentes individuais fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E que os desenvolvedores querem ser capazes de rastrear interações específicas (por exemplo, um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigir isso. +Percebemos que os desenvolvedores não consideram útil saber sobre commits ou componentes lentos individuais fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E os desenvolvedores querem ser capazes de rastrear interações específicas (por exemplo, um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigi-la. -Anteriormente, tentamos resolver esse problema criando uma [API de Rastreio de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas ela tinha alguns defeitos de design fundamentais que reduziram a precisão do rastreamento sobre por que uma interação foi lenta e às vezes resultaram em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) devido a esses problemas. +Tentamos resolver esse problema criando uma [API de Rastreamento de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas tinha algumas falhas de design fundamentais que reduziam a precisão de rastreamento de por que uma interação era lenta e, às vezes, resultava em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) por causa desses problemas. -Estamos trabalhando em uma nova versão para a API de Rastreio de Interações (provisoriamente chamada de Rastreio de Transições porque é iniciada via `startTransition`) que resolve esses problemas. +Estamos trabalhando em uma nova versão para a API de Rastreamento de Interações (provisoriamente chamada de Rastreamento de Transições porque é iniciada via `startTransition`) que resolve esses problemas. -## Novos Docs do React {/*new-react-docs*/} +## Novos Documentos do React {/*new-react-docs*/} -No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). O novo material de aprendizagem ensina Hooks primeiro e possui novos diagramas, ilustrações, além de muitos exemplos interativos e desafios. Fizemos uma pausa nesse trabalho para nos concentrar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. +No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)) do novo site de documentação do React. O novo material de aprendizado ensina Hooks primeiro e possui novos diagramas, ilustrações, assim como muitos exemplos interativos e desafios. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 está disponível, estamos trabalhando ativamente para finalizar e lançar a nova documentação. -Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que esse é um dos tópicos mais desafiadores tanto para novos usuários quanto para usuários experientes do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e haverá mais nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeitos podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas ideias iniciais sobre isso na [RFC useEvent](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre a RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especialmente a [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na nova implementação do site. +Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que é um dos tópicos mais desafiadores tanto para novos quanto para experientes usuários do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e mais virão nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeito podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas ideias iniciais sobre isso no [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Ele está atualmente em pesquisa inicial, e ainda estamos iterando na ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e contribuições para a reescrita da documentação em andamento. Gostaríamos de agradecer especialmente [Harish Kumar](https://github.com/harish-sethuraman) por enviar e revisar muitas melhorias na implementação do novo site. -*Agradecimentos a [Sophie Alpert](https://twitter.com/sophiebits) por revisar este post no blog!* \ No newline at end of file +*​Agradecimentos a [Sophie Alpert](https://twitter.com/sophiebits) pela revisão deste post do blog!* \ No newline at end of file From 25238205e3aa3d14d0e0e987e5a32b28a505c028 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 14:18:07 -0300 Subject: [PATCH 5/6] Translate `react-labs-what-we-have-been-working-on-june-2022.md` to pt-br --- ...-what-we-have-been-working-on-june-2022.md | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 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 686fa8240..537460960 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 @@ -1,8 +1,8 @@ --- -title: "React Labs: No que estamos trabalhando – Junho de 2022" +title: "React Labs: No que Estamos Trabalhando – Junho de 2022" author: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, e Xuan Huang date: 2022/06/15 -description: O React 18 levou anos para ser desenvolvido, e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de muitos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade aguardar novas funcionalidades sem ter informações sobre esses caminhos que estamos explorando. +description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e de exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. --- 15 de junho de 2022 por [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), e [Xuan Huang](https://twitter.com/Huxpro) @@ -11,71 +11,71 @@ description: O React 18 levou anos para ser desenvolvido, e trouxe lições vali -[React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido, e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de muitos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos mais foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade aguardar novas funcionalidades sem ter informações sobre esses caminhos que estamos explorando. +[React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e de exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. --- -Normalmente, temos vários projetos em andamento a qualquer momento, variando dos mais experimentais aos claramente definidos. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que estamos trabalhando com a comunidade em relação a esses projetos. +Normalmente, temos vários projetos em andamento a qualquer momento, variando dos mais experimentais aos claramente definidos. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que temos trabalhado com a comunidade nesses projetos. -Para definir expectativas, este não é um roteiro com prazos claros. Muitos desses projetos estão sob pesquisa ativa e são difíceis de definir datas concretas de lançamento. Eles podem nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com você os espaços problemáticos nos quais estamos pensando ativamente, e o que aprendemos até agora. +Para estabelecer expectativas, esto não é um roteiro com prazos claros. Muitos desses projetos estão em pesquisa ativa e é difícil definir datas concretas de lançamento. Eles podem até nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com você os espaços de problemas que estamos pensando ativamente e o que aprendemos até agora. ## Componentes do Servidor {/*server-components*/} -Anunciamos uma [demonstração experimental dos Componentes do Servidor React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18, e trabalhando em mudanças inspiradas pelo feedback experimental. +Anunciamos uma [demonstração experimental de Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18 e trabalhando em mudanças inspiradas pelo feedback experimental. -Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch), e adotando um modelo async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC porque você também pode usar roteadores para busca de dados. Outra mudança é que estamos nos afastando da abordagem de extensão de arquivo em favor de [anotação de limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC, pois você também pode usar roteadores para buscar dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). -Estamos trabalhando junto com a Vercel e a Shopify para unificar o suporte a bundlers para semânticas compartilhadas tanto no Webpack quanto no Vite. Antes do lançamento, queremos garantir que as semânticas dos RSCs sejam as mesmas em todo o ecossistema React. Este é o principal bloqueio para alcançar a estabilidade. +Estamos trabalhando juntos com Vercel e Shopify para unificar o suporte de empacotadores para semânticas compartilhadas em both Webpack e Vite. Antes do lançamento, queremos garantir que as semânticas dos RSC sejam as mesmas em todo o ecossistema React. Este é o principal bloqueador para alcançar estabilidade. -## Carregamento de Asset {/*asset-loading*/} +## Carregamento de Ativos {/*asset-loading*/} -Atualmente, assets como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação em novos ambientes como streaming, Componentes do Servidor, e mais. Estamos analisando a adição de APIs para pré-carregar e carregar assets externos deduplicados através de APIs do React que funcionam em todos os ambientes React. +Atualmente, ativos como scripts, estilos externos, fontes e imagens costumam ser pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação em novos ambientes, como streaming, Componentes do Servidor e mais. Estamos analisando a adição de APIs para pré-carregar e carregar ativos externos deduplicados por meio de APIs do React que funcionam em todos os ambientes React. -Estamos também pensando em ter suporte a Suspense para que você possa ter imagens, CSS e fontes que bloqueiam a exibição até serem carregadas, mas não bloqueiam o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) enquanto os visuais aparecem e a disposição muda. +Também estamos explorando a possibilidade de que isso suporte Suspense, para que você possa ter imagens, CSS e fontes que bloqueiam a exibição até serem carregadas, mas não bloqueiam o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) à medida que os visuais aparecem e o layout muda. -## Otimizações de Renderização Estática do Servidor {/*static-server-rendering-optimizations*/} +## Otimizações de Renderização de Servidor Estático {/*static-server-rendering-optimizations*/} -A Geração de Sites Estáticos (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas armazenáveis em cache, mas achamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maior parte do conteúdo é armazenável em cache, mas não todo. Estamos explorando maneiras de otimizar a renderização do servidor utilizando passes de compilação e estáticos. +A Geração de Site Estático (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas cacheáveis, mas acreditamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maioria, mas não todo o conteúdo, é cacheável. Estamos explorando maneiras de otimizar a renderização do servidor utilizando compilações e passagens estáticas. ## Compilador Otimizador do React {/*react-compiler*/} -Demos uma [prévia antecipada](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente às chamadas `useMemo` e `useCallback` para minimizar o custo de re-renderização, enquanto mantém o modelo de programação do React. +Fizemos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas `useMemo` e `useCallback` para minimizar o custo de re-renderizações, enquanto mantém o modelo de programação do React. -Recentemente, terminamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memorizar padrões mais complexos, como o uso de [mutations locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação além de apenas estar no mesmo nível que os Hooks de memorização. +Recentemente, terminamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memoizar padrões mais complexos, como o uso de [mutação local](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação, além de apenas estar à altura das Hooks de memoização. -Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Enquanto o objetivo do playground é facilitar o desenvolvimento do compilador, acreditamos que ele tornará mais fácil testá-lo e construir uma intuição sobre o que o compilador faz. Ele revela vários insights sobre como ele funciona internamente e renderiza ao vivo as saídas do compilador à medida que você digita. Isso será lançado junto com o compilador quando for lançado. +Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, acreditamos que tornará mais fácil experimentá-lo e construir intuição sobre o que o compilador faz. Ele revela vários insights sobre como funciona nos bastidores e renderiza os outputs do compilador em tempo real à medida que você digita. Isso será lançado juntamente com o compilador quando for liberado. ## Offscreen {/*offscreen*/} -Hoje, se você quiser esconder e mostrar um componente, tem duas opções. Uma é adicionar ou remover completamente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido toda vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. +Hoje, se você quer esconder e mostrar um componente, tem duas opções. Uma é adicionar ou remover completamente da árvore. O problema com essa abordagem é que o estado da sua UI se perde cada vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. -A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas tem um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. +A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas vem com um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. -Offscreen introduz uma terceira opção: esconder a UI visualmente, mas depriorizar seu conteúdo. A ideia é semelhante em espírito à propriedade CSS `content-visibility`: quando o conteúdo está oculto, não precisa ficar sincronizado com o restante da UI. O React pode adiar o trabalho de renderização até que o restante do app esteja ocioso, ou até que o conteúdo se torne visível novamente. +Offscreen introduz uma terceira opção: ocultar a UI visualmente, mas despriorizar seu conteúdo. A ideia é semelhante em espírito à propriedade CSS `content-visibility`: quando o conteúdo está oculto, não precisa estar sincronizado com o resto da UI. O React pode adiar o trabalho de renderização até que o resto do aplicativo esteja ocioso, ou até que o conteúdo se torne visível novamente. -Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá diretamente com a API Offscreen, mas sim por meio de uma estrutura opinativa para implementar padrões como: +Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos, você não interagirá diretamente com a API Offscreen, mas sim por meio de um framework opinativo para implementar padrões como: -* **Transições instantâneas.** Algumas estruturas de roteamento já pré-buscam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, elas também poderão pré-renderizar a próxima tela em segundo plano. -* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior para que possa voltar e retomar de onde parou. -* **Renderização de listas virtualizadas.** Ao exibir listas grandes de itens, estruturas de listas virtualizadas pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. -* **Conteúdo em segundo plano.** Também estamos explorando um recurso relacionado para depriorizar conteúdo em segundo plano sem ocultá-lo, como ao exibir uma sobreposição modal. +* **Transições instantâneas.** Alguns frameworks de roteamento já pré-buscam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, eles também poderão pré-renderizar a próxima tela em segundo plano. +* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, para que você possa voltar e retomar de onde parou. +* **Renderização de lista virtualizada.** Ao exibir grandes listas de itens, frameworks de lista virtualizada pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. +* **Conteúdo em segundo plano.** Também estamos explorando um recurso relacionado para despriorizar o conteúdo em segundo plano sem ocultá-lo, como ao exibir uma sobreposição modal. -## Rastreamento de Transições {/*transition-tracing*/} +## Rastreio de Transições {/*transition-tracing*/} -Atualmente, o React possui duas ferramentas de profiling. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de profiling. Para cada commit, ele também mostra todos os componentes que foram renderizados e o tempo que levou para eles renderizarem. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzido no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambas essas ferramentas ajudam os desenvolvedores a identificar problemas de desempenho em seu código. +Atualmente, o React possui duas ferramentas de perfilização. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilização. Para cada commit, também mostra todos os componentes que renderizaram e o quanto de tempo levou para eles serem renderizados. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzido no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambas as ferramentas de perfilização ajudam os desenvolvedores a identificar problemas de desempenho em seu código. -Percebemos que os desenvolvedores não consideram útil saber sobre commits ou componentes lentos individuais fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E os desenvolvedores querem ser capazes de rastrear interações específicas (por exemplo, um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigi-la. +Percebemos que os desenvolvedores não acham útil saber sobre commits individuais lentos ou componentes fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E que os desenvolvedores querem ser capazes de rastrear interações específicas (por exemplo, um clique de botão, uma carga inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigi-la. -Tentamos resolver esse problema criando uma [API de Rastreamento de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas tinha algumas falhas de design fundamentais que reduziam a precisão de rastreamento de por que uma interação era lenta e, às vezes, resultava em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) por causa desses problemas. +Anteriormente, tentamos resolver esse problema criando uma [API de Rastreio de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas tinha alguns defeitos de design fundamentais que reduziram a precisão do rastreamento do porquê uma interação foi lenta e às vezes resultou em interações que nunca terminavam. Acabamos [removendo esta API](https://github.com/facebook/react/pull/20037) por causa desses problemas. -Estamos trabalhando em uma nova versão para a API de Rastreamento de Interações (provisoriamente chamada de Rastreamento de Transições porque é iniciada via `startTransition`) que resolve esses problemas. +Estamos trabalhando em uma nova versão para a API de Rastreio de Interações (provisoriamente chamada de Rastreio de Transições, pois é iniciada via `startTransition`) que resolve esses problemas. -## Novos Documentos do React {/*new-react-docs*/} +## Novos Docs do React {/*new-react-docs*/} -No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)) do novo site de documentação do React. O novo material de aprendizado ensina Hooks primeiro e possui novos diagramas, ilustrações, assim como muitos exemplos interativos e desafios. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 está disponível, estamos trabalhando ativamente para finalizar e lançar a nova documentação. +No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). Os novos materiais de aprendizado ensinam Hooks primeiro e possuem novos diagramas, ilustrações, além de muitos exemplos e desafios interativos. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. -Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que é um dos tópicos mais desafiadores tanto para novos quanto para experientes usuários do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e mais virão nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeito podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos algumas ideias iniciais sobre isso no [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Ele está atualmente em pesquisa inicial, e ainda estamos iterando na ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e contribuições para a reescrita da documentação em andamento. Gostaríamos de agradecer especialmente [Harish Kumar](https://github.com/harish-sethuraman) por enviar e revisar muitas melhorias na implementação do novo site. +Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que este é um dos tópicos mais desafiadores tanto para novos quanto para experientes usuários do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e há mais por vir nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeitos podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos alguns pensamentos iniciais sobre isso na [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial, e ainda estamos iterando na ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e contribuições para a reescrita da documentação em andamento. Gostaríamos de agradecer especificamente a [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na nova implementação do site. -*​Agradecimentos a [Sophie Alpert](https://twitter.com/sophiebits) pela revisão deste post do blog!* \ No newline at end of file +*Obrigado a [Sophie Alpert](https://twitter.com/sophiebits) por revisar este post do blog!* \ No newline at end of file From a54f2beb0da1d7802891e6006b3bcbc7e14c040c Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 14:20:09 -0300 Subject: [PATCH 6/6] Translate `react-labs-what-we-have-been-working-on-june-2022.md` to pt-br --- ...-what-we-have-been-working-on-june-2022.md | 59 ++++++++++--------- 1 file changed, 30 insertions(+), 29 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 537460960..db41930a5 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 @@ -1,8 +1,8 @@ --- -title: "React Labs: No que Estamos Trabalhando – Junho de 2022" +title: "React Labs: No Que Estamos Trabalhando – Junho de 2022" author: Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbage, e Xuan Huang date: 2022/06/15 -description: O React 18 levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e de exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. +description: O React 18 levou anos para ser desenvolvido, e com isso trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de muitos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter visibilidade sobre esses caminhos que estamos explorando. --- 15 de junho de 2022 por [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), e [Xuan Huang](https://twitter.com/Huxpro) @@ -11,71 +11,72 @@ description: O React 18 levou anos para ser desenvolvido e trouxe lições valio -[React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido e trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e de exploração de vários caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter uma visão sobre esses caminhos que estamos explorando. +[O React 18](/blog/2022/03/29/react-v18) levou anos para ser desenvolvido, e com isso trouxe lições valiosas para a equipe do React. Seu lançamento foi o resultado de muitos anos de pesquisa e exploração de muitos caminhos. Alguns desses caminhos foram bem-sucedidos; muitos outros foram becos sem saída que levaram a novos insights. Uma lição que aprendemos é que é frustrante para a comunidade esperar por novos recursos sem ter visibilidade sobre esses caminhos que estamos explorando. --- -Normalmente, temos vários projetos em andamento a qualquer momento, variando dos mais experimentais aos claramente definidos. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre o que temos trabalhado com a comunidade nesses projetos. +Normalmente, temos vários projetos em andamento a qualquer momento, variando de mais experimentais a claramente definidos. Olhando para o futuro, gostaríamos de começar a compartilhar regularmente mais sobre no que estamos trabalhando com a comunidade em relação a esses projetos. -Para estabelecer expectativas, esto não é um roteiro com prazos claros. Muitos desses projetos estão em pesquisa ativa e é difícil definir datas concretas de lançamento. Eles podem até nunca ser lançados em sua iteração atual, dependendo do que aprendemos. Em vez disso, queremos compartilhar com você os espaços de problemas que estamos pensando ativamente e o que aprendemos até agora. +Para estabelecer expectativas, este não é um roadmap com cronogramas claros. Muitos desses projetos estão sob pesquisa ativa e é difícil definir datas concretas de lançamento. Eles podem, possivelmente, nunca serem lançados em sua iteração atual, dependendo do que aprendermos. Em vez disso, queremos compartilhar com você os espaços de problemas que estamos pensando ativamente e o que aprendemos até agora. ## Componentes do Servidor {/*server-components*/} Anunciamos uma [demonstração experimental de Componentes do Servidor do React](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) em dezembro de 2020. Desde então, temos finalizado suas dependências no React 18 e trabalhando em mudanças inspiradas pelo feedback experimental. -Em particular, estamos abandonando a ideia de ter bibliotecas de I/O separadas (por exemplo, react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso tecnicamente não bloqueia o lançamento do RSC, pois você também pode usar roteadores para buscar dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +Em particular, estamos abandonando a ideia de ter bibliotecas I/O bifurcadas (ex. react-fetch) e, em vez disso, adotando um modelo async/await para melhor compatibilidade. Isso não bloqueia tecnicamente o lançamento do RSC porque você também pode usar roteadores para busca de dados. Outra mudança é que também estamos nos afastando da abordagem de extensão de arquivo em favor de [anotar limites](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). -Estamos trabalhando juntos com Vercel e Shopify para unificar o suporte de empacotadores para semânticas compartilhadas em both Webpack e Vite. Antes do lançamento, queremos garantir que as semânticas dos RSC sejam as mesmas em todo o ecossistema React. Este é o principal bloqueador para alcançar estabilidade. +Estamos trabalhando juntos com a Vercel e a Shopify para unificar o suporte a bundlers para semânticas compartilhadas em Webpack e Vite. Antes do lançamento, queremos ter certeza de que as semânticas dos RSCs sejam as mesmas em todo o ecossistema do React. Este é o principal bloqueio para alcançar a estabilidade. ## Carregamento de Ativos {/*asset-loading*/} -Atualmente, ativos como scripts, estilos externos, fontes e imagens costumam ser pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação em novos ambientes, como streaming, Componentes do Servidor e mais. Estamos analisando a adição de APIs para pré-carregar e carregar ativos externos deduplicados por meio de APIs do React que funcionam em todos os ambientes React. +Atualmente, ativos como scripts, estilos externos, fontes e imagens são tipicamente pré-carregados e carregados usando sistemas externos. Isso pode dificultar a coordenação entre novos ambientes como streaming, Componentes do Servidor e mais. +Estamos analisando a adição de APIs para pré-carregar e carregar ativos externos deduplicados por meio de APIs do React que funcionam em todos os ambientes do React. -Também estamos explorando a possibilidade de que isso suporte Suspense, para que você possa ter imagens, CSS e fontes que bloqueiam a exibição até serem carregadas, mas não bloqueiam o streaming e a renderização concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) à medida que os visuais aparecem e o layout muda. +Estamos também analisando a possibilidade de ter suporte a Suspense para que você possa ter imagens, CSS e fontes que bloqueiam a exibição até serem carregadas, mas não bloqueiam a renderização em streaming e concorrente. Isso pode ajudar a evitar [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) quando os visuais aparecem e o layout se desloca. -## Otimizações de Renderização de Servidor Estático {/*static-server-rendering-optimizations*/} +## Otimizações de Renderização Estática no Servidor {/*static-server-rendering-optimizations*/} -A Geração de Site Estático (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas cacheáveis, mas acreditamos que podemos adicionar recursos para melhorar o desempenho da Renderização do Lado do Servidor (SSR) – especialmente quando a maioria, mas não todo o conteúdo, é cacheável. Estamos explorando maneiras de otimizar a renderização do servidor utilizando compilações e passagens estáticas. +A Geração de Sites Estáticos (SSG) e a Regeneração Estática Incremental (ISR) são ótimas maneiras de obter desempenho para páginas que podem ser armazenadas em cache, mas acreditamos que podemos adicionar recursos para melhorar o desempenho da Renderização no Lado do Servidor (SSR) – especialmente quando a maior parte, mas não todo o conteúdo é armazenável em cache. Estamos explorando maneiras de otimizar a renderização no servidor utilizando compilação e passes estáticos. -## Compilador Otimizador do React {/*react-compiler*/} +## Compilador de Otimização do React {/*react-compiler*/} -Fizemos uma [prévia inicial](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas `useMemo` e `useCallback` para minimizar o custo de re-renderizações, enquanto mantém o modelo de programação do React. +Demos uma [prévia antecipada](https://www.youtube.com/watch?v=lGEMwh32soc) do React Forget na React Conf 2021. É um compilador que gera automaticamente o equivalente a chamadas `useMemo` e `useCallback` para minimizar o custo de re-renderizações, enquanto mantém o modelo de programação do React. -Recentemente, terminamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memoizar padrões mais complexos, como o uso de [mutação local](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação, além de apenas estar à altura das Hooks de memoização. +Recentemente, finalizamos uma reescrita do compilador para torná-lo mais confiável e capaz. Esta nova arquitetura nos permite analisar e memorizar padrões mais complexos, como o uso de [mutações locais](/learn/keeping-components-pure#local-mutation-your-components-little-secret), e abre muitas novas oportunidades de otimização em tempo de compilação além de simplesmente estar à altura dos Hooks de memorização. -Também estamos trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, acreditamos que tornará mais fácil experimentá-lo e construir intuição sobre o que o compilador faz. Ele revela vários insights sobre como funciona nos bastidores e renderiza os outputs do compilador em tempo real à medida que você digita. Isso será lançado juntamente com o compilador quando for liberado. +Estamos também trabalhando em um playground para explorar muitos aspectos do compilador. Embora o objetivo do playground seja facilitar o desenvolvimento do compilador, acreditamos que ele tornará mais fácil experimentá-lo e construir uma intuição sobre o que o compilador faz. Ele revela vários insights sobre como funciona nos bastidores e renderiza ao vivo as saídas do compilador enquanto você digita. Isso será lançado junto com o compilador quando for liberado. ## Offscreen {/*offscreen*/} -Hoje, se você quer esconder e mostrar um componente, tem duas opções. Uma é adicionar ou remover completamente da árvore. O problema com essa abordagem é que o estado da sua UI se perde cada vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. +Hoje, se você quiser ocultar e mostrar um componente, tem duas opções. Uma é adicioná-lo ou removê-lo completamente da árvore. O problema com essa abordagem é que o estado da sua UI é perdido toda vez que você desmonta, incluindo o estado armazenado no DOM, como a posição de rolagem. -A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas vem com um custo de desempenho, porque o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. +A outra opção é manter o componente montado e alternar a aparência visualmente usando CSS. Isso preserva o estado da sua UI, mas tem um custo de desempenho, pois o React deve continuar renderizando o componente oculto e todos os seus filhos sempre que recebe novas atualizações. -Offscreen introduz uma terceira opção: ocultar a UI visualmente, mas despriorizar seu conteúdo. A ideia é semelhante em espírito à propriedade CSS `content-visibility`: quando o conteúdo está oculto, não precisa estar sincronizado com o resto da UI. O React pode adiar o trabalho de renderização até que o resto do aplicativo esteja ocioso, ou até que o conteúdo se torne visível novamente. +Offscreen introduz uma terceira opção: ocultar a UI visualmente, mas despriorizar seu conteúdo. A ideia é semelhante em espírito à propriedade CSS `content-visibility`: quando o conteúdo está oculto, não precisa se manter em sincronia com o restante da UI. O React pode adiar o trabalho de renderização até que o restante do aplicativo esteja ocioso ou até que o conteúdo se torne visível novamente. -Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Semelhante a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos, você não interagirá diretamente com a API Offscreen, mas sim por meio de um framework opinativo para implementar padrões como: +Offscreen é uma capacidade de baixo nível que desbloqueia recursos de alto nível. Similar a outros recursos concorrentes do React, como `startTransition`, na maioria dos casos você não interagirá com a API Offscreen diretamente, mas sim através de um framework opinativo para implementar padrões como: * **Transições instantâneas.** Alguns frameworks de roteamento já pré-buscam dados para acelerar navegações subsequentes, como ao passar o mouse sobre um link. Com Offscreen, eles também poderão pré-renderizar a próxima tela em segundo plano. -* **Estado reutilizável.** Da mesma forma, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior, para que você possa voltar e retomar de onde parou. -* **Renderização de lista virtualizada.** Ao exibir grandes listas de itens, frameworks de lista virtualizada pré-renderizarão mais linhas do que estão atualmente visíveis. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. -* **Conteúdo em segundo plano.** Também estamos explorando um recurso relacionado para despriorizar o conteúdo em segundo plano sem ocultá-lo, como ao exibir uma sobreposição modal. +* **Estado reutilizável.** Similarmente, ao navegar entre rotas ou abas, você pode usar Offscreen para preservar o estado da tela anterior para que você possa voltar e retomar de onde parou. +* **Renderização de listas virtualizadas.** Ao exibir grandes listas de itens, frameworks de listas virtualizadas pré-renderizarão mais linhas do que estão visíveis atualmente. Você pode usar Offscreen para pré-renderizar as linhas ocultas com uma prioridade menor do que os itens visíveis na lista. +* **Conteúdo em segundo plano.** Estamos também explorando um recurso relacionado para despriorizar conteúdo em segundo plano sem ocultá-lo, como ao exibir uma sobreposição modal. ## Rastreio de Transições {/*transition-tracing*/} -Atualmente, o React possui duas ferramentas de perfilização. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilização. Para cada commit, também mostra todos os componentes que renderizaram e o quanto de tempo levou para eles serem renderizados. Também temos uma versão beta de um [Timeline Profiler](https://github.com/reactwg/react-18/discussions/76) introduzido no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambas as ferramentas de perfilização ajudam os desenvolvedores a identificar problemas de desempenho em seu código. +Atualmente, o React possui duas ferramentas de perfilagem. O [Profiler original](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) mostra uma visão geral de todos os commits em uma sessão de perfilagem. Para cada commit, ele também mostra todos os componentes que renderizaram e o tempo que levou para eles renderizarem. Também temos uma versão beta de um [Profiler de Linha do Tempo](https://github.com/reactwg/react-18/discussions/76) introduzida no React 18 que mostra quando os componentes agendam atualizações e quando o React trabalha nessas atualizações. Ambos os profilers ajudam os desenvolvedores a identificar problemas de desempenho em seu código. -Percebemos que os desenvolvedores não acham útil saber sobre commits individuais lentos ou componentes fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E que os desenvolvedores querem ser capazes de rastrear interações específicas (por exemplo, um clique de botão, uma carga inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigi-la. +Percebemos que os desenvolvedores não acham útil saber sobre commits lentos ou componentes individuais fora de contexto. É mais útil saber sobre o que realmente causa os commits lentos. E que os desenvolvedores querem poder rastrear interações específicas (ex. um clique de botão, um carregamento inicial ou uma navegação de página) para observar regressões de desempenho e entender por que uma interação foi lenta e como corrigir isso. -Anteriormente, tentamos resolver esse problema criando uma [API de Rastreio de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas tinha alguns defeitos de design fundamentais que reduziram a precisão do rastreamento do porquê uma interação foi lenta e às vezes resultou em interações que nunca terminavam. Acabamos [removendo esta API](https://github.com/facebook/react/pull/20037) por causa desses problemas. +Anteriormente, tentamos resolver esse problema criando uma [API de Rastreio de Interações](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), mas ela tinha alguns defeitos de design fundamentais que reduziam a precisão do rastreio de por que uma interação era lenta e às vezes resultavam em interações que nunca terminavam. Acabamos [removendo essa API](https://github.com/facebook/react/pull/20037) por causa desses problemas. -Estamos trabalhando em uma nova versão para a API de Rastreio de Interações (provisoriamente chamada de Rastreio de Transições, pois é iniciada via `startTransition`) que resolve esses problemas. +Estamos trabalhando em uma nova versão da API de Rastreio de Interações (provisoriamente chamada de Rastreio de Transições porque é iniciada via `startTransition`) que resolve esses problemas. -## Novos Docs do React {/*new-react-docs*/} +## Novos Documentos do React {/*new-react-docs*/} -No ano passado, anunciamos a versão beta do novo site de documentação do React ([mais tarde lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). Os novos materiais de aprendizado ensinam Hooks primeiro e possuem novos diagramas, ilustrações, além de muitos exemplos e desafios interativos. Fizemos uma pausa nesse trabalho para focar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. +No ano passado, anunciamos a versão beta do novo site de documentação do React ([posteriormente lançado como react.dev](/blog/2023/03/16/introducing-react-dev)). Os novos materiais de aprendizado ensinam Hooks primeiro e têm novos diagramas, ilustrações, além de muitos exemplos interativos e desafios. Pausamos esse trabalho para nos concentrar no lançamento do React 18, mas agora que o React 18 foi lançado, estamos trabalhando ativamente para finalizar e lançar a nova documentação. -Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que este é um dos tópicos mais desafiadores tanto para novos quanto para experientes usuários do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e há mais por vir nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões comuns de efeitos podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos alguns pensamentos iniciais sobre isso na [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Está atualmente em pesquisa inicial, e ainda estamos iterando na ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, assim como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e contribuições para a reescrita da documentação em andamento. Gostaríamos de agradecer especificamente a [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na nova implementação do site. +Atualmente, estamos escrevendo uma seção detalhada sobre efeitos, pois ouvimos que esse é um dos tópicos mais desafiadores tanto para novos quanto para experientes usuários do React. [Sincronizando com Efeitos](/learn/synchronizing-with-effects) é a primeira página publicada na série, e mais virão nas próximas semanas. Quando começamos a escrever uma seção detalhada sobre efeitos, percebemos que muitos padrões de efeito comuns podem ser simplificados adicionando um novo primitivo ao React. Compartilhamos alguns pensamentos iniciais sobre isso no [useEvent RFC](https://github.com/reactjs/rfcs/pull/220). Ele está atualmente em pesquisa inicial e ainda estamos iterando sobre a ideia. Agradecemos os comentários da comunidade sobre o RFC até agora, bem como o [feedback](https://github.com/reactjs/react.dev/issues/3308) e as contribuições para a reescrita contínua da documentação. Gostaríamos de agradecer especificamente a [Harish Kumar](https://github.com/harish-sethuraman) por submeter e revisar muitas melhorias na nova implementação do site. *Obrigado a [Sophie Alpert](https://twitter.com/sophiebits) por revisar este post do blog!* \ No newline at end of file