O que está vindo em React 18? – TI CloudSavvy

O React 18 será a próxima versão foremost da in style biblioteca de componentes JavaScript. Agora disponível como um candidato a lançamentoele introduz várias alterações para melhorar as buscas de dados, o desempenho e a renderização do lado do servidor.

Para aproveitar todos os recursos, você precisará atualizar seu projeto e poderá encontrar algumas alterações importantes. O React 18 ainda é geralmente compatível com o código mais antigo. Você deve ser capaz de aumentar a versão de lançamento em seu package deal.json sem enfrentar muitos problemas imediatos.

Renderização simultânea

A motivação por trás da maioria das revisões do React 18 diz respeito a algo chamado “renderização simultânea”. Esse mecanismo dá ao React uma maneira de montar várias versões de sua árvore de componentes simultaneamente. Embora os detalhes sejam relevantes apenas para os componentes internos da biblioteca, o resultado é maior flexibilidade e desempenho aprimorado para seu aplicativo.

Renderização simultânea torna o processo de renderização interrompível. Enquanto uma renderização no React 17 deve ser executada até a conclusão depois de iniciada, o React 18 fornece uma maneira de pausar no meio do caminho e retomá-la mais tarde.

Essa capacidade significa que as renderizações do React têm menos probabilidade de afetar o desempenho geral do navegador. Até agora, os eventos do navegador, como pressionamentos de tecla e pinturas, eram bloqueados durante a renderização. Com a renderização simultânea habilitada, um pressionamento de tecla interromperá a renderização, permitirá que o navegador lide com a alteração e, em seguida, retomará a renderização.

Isso resulta em uma experiência de usuário mais clever e menos suscetível a travamentos quando a renderização coincide com outras atividades. O React mantém vários ramos de trabalho; quando a renderização de uma ramificação é concluída, o que pode ocorrer em várias sessões distintas, ela é aceita na ramificação foremost que produz a interface do usuário visível.

Modo simultâneo vs renderização simultânea

Antes do React 18 atingir o standing alfa, esse recurso generation chamado de “modo simultâneo”. Você ainda pode ver esse nome em artigos e documentação mais antigos. O conceito de renderização simultânea como um modo separado não existe mais no React 18. Isso facilita a migração de aplicativos existentes para a nova abordagem.

A renderização simultânea é fundamentalmente diferente do sistema de renderização existente. Ele tem uma API totalmente nova que substitui o acquainted ReactDOM.render(). Nos dias do modo simultâneo, a simultaneidade generation tudo ou nada: ou estava habilitada para o seu aplicativo, com a perspectiva de grandes mudanças de última hora, ou completamente fora dos limites. Agora é tratado de forma mais graciosa com o React apenas aplicando renderização simultânea a atualizações do DOM que realmente exigem um recurso simultâneo.

A nova API raiz (ativando o modo simultâneo)

Aplicativos existentes atualizados para o React 18 podem continuar usando ReactDOM.render() para um futuro próximo. Isso renderizará seu aplicativo sem suporte de simultaneidade, usando o renderizador acquainted da v17. Você verá um console avisando que a API não é mais compatível, mas isso pode ser desconsiderado durante o improve.

import App from "./App.js";
import ReactDOM from "react-dom";
 
// "ReactDOM.render is not supported in React 18"
ReactDOM.render(<App />, file.getElementById("root"));

Para remover o aviso, mude para o novo createRoot() API:

import createRoot from "react-dom/shopper";
const root = createRoot(file.getElementById("root"));
root.render(<App />);

createRoot() retorna um novo objeto raiz que representa uma superfície de renderização React. Você pode chamar seu render() para renderizar um componente React para a raiz. O resultado do código acima é o mesmo que o anterior ReactDOM.render() exemplo. createRoot() é uma interface mais orientada a objetos com maior facilidade de uso.

Raízes produzidas por createRoot() suporta renderização simultânea. A atualização para esta API oferece acesso opcional aos novos recursos do React 18.

O createRoot() Equivalente a ReactDOM.unmountComponentAtNode() é o novo unmount() método exposto em objetos raiz. Você pode usar isso para desanexar sua árvore de componentes React e parar de renderizar seu aplicativo:

import App from "./App.js";
import ReactDOM from "react-dom";
 
// OLD
ReactDOM.unmountComponentAtNode(file.getElementById("root"));
 
// NEW
const root = createRoot(file.getElementById("root"));
root.unmount();

Recursos simultâneos

A renderização simultânea permite que você use recursos simultâneos para melhorar o desempenho do seu aplicativo. Aqui estão algumas das principais APIs disponíveis.

Suspense

O <Suspense> O componente existe desde o React 16. Ele permite que você evite que os filhos de um componente sejam renderizados até que uma condição seja atendida. É comumente usado para buscas de dados e importações de módulos assíncronos.

const fetchPostHistory = identification => fetch(`/customers/$identification/posts`);
 
const UserCard = (Identity, Identify) => 
 
    const [postHistory] = useState(() => fetchPostHistory(Identity));
 
    <div>
        <h1>Identify</h1>
        <React.Suspense fallback="Loading...">
            <UserPostHistoryList posts=postHistory />
            <ReportUserLink identification=Identity />
        </React.Suspense>
    </div>
;

Neste exemplo, nem o UserPostHistory ou ReportUserLink componentes aparecerão até que os dados do histórico de postagens do usuário sejam buscados na rede. Isso já funciona bem em muitas situações, mas a implementação do React 17 tem algumas peculiaridades.

Se você registrasse os efeitos de cada componente, veria o ReportUserLink O componente foi renderizado enquanto as postagens ainda estavam carregando, mesmo que não esteja visível naquele momento. Usando a explicação de simultaneidade de antes, é possível explicar o porquê: uma vez que o React começou a renderizar a árvore de componentes, ele não tinha como parar, mesmo que um humano possa identificar isso ReportUserLink é redundante até postHistory é povoado.

Suspense é mais poderoso no React 18. A nova versão é chamada de “Concurrent Suspense”; a implementação anterior agora é chamada de Legacy Suspense. Ele unravel o problema no exemplo acima: renderizar o mesmo código com simultaneidade habilitada impedirá que o renderizador alcance <ReportUserLink> enquanto a busca de dados está em andamento.

Registrar os efeitos de cada componente mostraria que ReportUserLink só é confirmado quando o histórico de postagens está disponível. React interrompe a renderização quando atinge UserPostHistoryList e precisa aguardar o carregamento dos dados. Uma vez que a chamada de rede esteja completa, o React continua a renderizar o resto da subárvore do Suspense.

Esse recurso ajuda a evitar o desperdício de trabalho do qual seus usuários nunca se beneficiam. Ele também unravel vários problemas com o Suspense, onde os componentes podem ter efeitos executados antes do esperado. Por fim, esta solução oferece uma garantia automática de que os dados chegarão na ordem em que foram solicitados. Você não precisa se preocupar com as condições de corrida, pois a renderização é interrompida enquanto os dados são buscados.

Transições

As transições são um novo recurso habilitado para concorrência. Essa API é uma forma de sinalizar para React as prioridades relativas de suas atualizações de interface do usuário. Uma “transição” é uma atualização de prioridade relativamente baixa, como alternar entre as telas principais. Atualizações como renderizações em resposta à entrada do teclado e outras interações do usuário são consideradas mais urgentes.

Marcar uma atualização como uma transição tem alguns efeitos sobre como o React aborda seu cumprimento. O React usará os recursos de renderização interrompível de simultaneidade para pausar a atualização se uma mais urgente surgir no meio do caminho. Isso ajudará a manter sua interface do usuário responsiva à entrada do usuário durante a renderização, reduzindo a intermitência e a instabilidade.

As transições são úteis em uma ampla variedade de situações: atualizar um painel de notificações no cabeçalho do seu aplicativo, gerenciar atualizações na barra lateral e alterar outras funções auxiliares da interface do usuário são bons candidatos. Eles também funcionam bem para ações assíncronas tomadas em resposta à entrada do usuário, como o caso clássico de uma barra de pesquisa que é atualizada conforme o usuário digita.

Isso pode ser difícil de acertar no React – sem um debounce cuidadoso, é comum sentir um atraso perceptível, pois as atualizações causadas pela busca de novos resultados bloqueiam temporariamente o thread foremost de manipular a entrada do teclado. Com o React 18, você pode usar uma transição para marcar essas atualizações como trabalho de baixa prioridade.

O startTransition() A API encapsula atualizações de estado como transições:

import startTransition from "react";
 
const Element = () => 
 
    const [searchQuery, setSearchQuery] = useState("");
    const [searchResults, setSearchResults] = useState();
 
    /**
     * State updates inside the transition serve as are low-priority
     */
    startTransition(() => 
        setSearchResults(textual content: "Seek Consequence 1");
    );
 
;

Se você quiser verificar se uma atualização está em andamento, substitua undeniable startTransition() com o useTransition() gancho. Isso fornece um booleano indicando se uma transição tem trabalho pendente.

import useTransition from "react";
 
const Element = () => 
 
    const [searchQuery, setSearchQuery] = useState("");
    const [searchResults, setSearchResults] = useState();
 
    const [isSearching, startSearchResultsTransition] = useTransition();
 
    startSearchResultsTransition(() => 
        setSearchResults(textual content: "Seek Consequence 1");
    );
 
    go back (
        <div>
            <enter onChange=setSearchQuery price=searchQuery />
            <SearchResults effects=searchResults />
            (isSearching && "(Looking out...)")
        </div>
    );
 
;

Todas as atualizações de estado existentes são tratadas como atualizações urgentes regulares para manter a compatibilidade com versões anteriores do código mais antigo.

Valores Diferidos

Os valores adiados são outra maneira de manter a capacidade de resposta durante atualizações de longa duração. Quando um valor é diferido pelo useDeferredValue() gancho, o React continuará mostrando seu velho valor por um determinado período.

const Element = () => 
    const [results, setResults] = useState([]);
    const deferredResults = useDeferredResults(effects, timeoutMs: 5000);
    go back <ResultsGrid effects=deferredResults />;
;

Permitir que o React proceed mostrando os resultados antigos por cinco segundos evita lentidão removendo a necessidade de renderizar imediatamente os dados buscados assim que eles chegam. É uma forma de debounce integrado ao gerenciamento de estado do React. Os dados podem ficar alguns segundos atrasados ​​em relação ao estado actual para reduzir a quantidade general de trabalho realizado.

Melhor lote

Uma mudança ultimate orientada ao desempenho no React 18 consiste em um conjunto de melhorias no lote de atualização de estado. O React já tenta combinar atualizações de estado em várias situações simples:

const Element = () => 
 
    const [query, setQuery] = useState("");
    const [queryCount, setQueryCount] = useState("");
 
    /**
     * Two state updates, just one re-render
     */
    setQuery("demo");
    setQueryCount(queryCount + 1);
 
;

No entanto, existem várias situações em que isso não funciona. A partir do React 18, o batching se aplica a todo atualizações, independentemente de onde elas venham. As atualizações originadas de tempos limite, promessas e manipuladores de eventos do navegador serão totalmente agrupadas da mesma forma que o código que está diretamente no seu componente.

Essa alteração pode alterar o comportamento de alguns códigos. Se você tem um componente antigo que atualiza o estado várias vezes nos locais listados acima e verifica os valores no meio do caminho, você pode descobrir que eles não são o que você espera no React 18. A flushSync está disponível para forçar manualmente a confirmação de uma atualização de estado, permitindo que você desative o envio em lote.

const Element = () => 
 
    const [query, setQuery] = useState("");
    const [queryCount, setQueryCount] = useState("");
 
    const handleSearch = question => 
       fetch(question).then(() => 
 
            /**
             * Pressure devote and replace the DOM
             */
            flushSync(() => setQuery(question));
 
            setQueryCount(1);
 
        );
    
 
;

Alterações de renderização do lado do servidor

A renderização do lado do servidor foi fortemente revisada. O novo recurso foremost é o suporte para renderização de streaming, onde o novo HTML pode ser transmitido do servidor para o seu cliente React. Isso permite que você use componentes do Suspense no lado do servidor.

Como consequência dessa mudança, várias APIs foram descontinuadas ou retrabalhadas, Incluindo renderToNodeStream(). Agora você deve usar renderToPipeableStream() ou renderToReadableStream() para fornecer conteúdo do lado do servidor compatível com ambientes de streaming modernos.

A hidratação do lado do cliente do conteúdo renderizado pelo servidor também mudou para se alinhar com a nova API de renderização simultânea. Se você estiver usando renderização de servidor e modo simultâneo, substitua hydrate() com hydrateRoot():

// OLD
import hydrate from "react-dom";
hydrate(<App />, file.getElementById("root"));
 
// NEW
import hydrateRoot from "react-dom/shopper";
hydrateRoot(file.getElementById("root"), <App />);

Os efeitos da renderização de streaming tornam a renderização do servidor mais adequada para diversos casos de uso. A implementação existente do React do lado do servidor requer que o cliente busque e hidrate todo o aplicativo antes que ele se torne interativo. Ao adicionar streams e Suspense, React pode buscar apenas os bits necessários para a renderização inicial e, em seguida, carregue dados não essenciais adicionais do servidor depois que o aplicativo se tornar interativo.

Conclusão

O React 18 traz novos recursos e melhorias de desempenho para seus aplicativos. Recursos como Suspense e Transitions tornam vários tipos de código mais fáceis de escrever e menos impactantes em outras áreas do seu aplicativo.

Atualizar para o React 18 quando for lançado deve ser bastante indolor na maioria dos casos. Você pode continuar usando a API raiz do React 17 por enquanto antes de mudar para createRoot() quando estiver pronto para adotar a renderização simultânea. Se você quiser começar a preparar seu aplicativo hoje, poderá instalar o candidato à versão mais recente executando npm set up react@rc react-dom@rc.