Explique os novos recursos do React 18 com casos - renderização simultânea, processamento automático em lote, etc.

⭐️ Este artigo foi publicado pela primeira vez no Front-end Shura Field (clique para participar) , sim 一个由 资深开发者 独立运行 的专业技术社区, estou focado Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展. O "Front-end Interview Review Notes" (clique para se inscrever) criado pelo blogueiro foi amplamente elogiado e ajudou muitos alunos a melhorar sua força e receber ofertas. Inscreva-se agora e converse com blogueiros em particular para obter um serviço gratuito de orientação de entrevista/currículo simulado para ajudá-lo a avaliar o domínio dos pontos de conhecimento e obter uma orientação de estudo mais abrangente!

O React 18 será lançado em março de 2022. Esta versão se concentra em melhorias de desempenho e atualizações do mecanismo de renderização. Enquanto isso, o React 18 lançou as bases para a renderização simultânea, sobre a qual os recursos futuros do React serão construídos.

Neste artigo, farei uma breve introdução ao React 18 e explicarei vários conceitos-chave transitions, como .

Visão geral dos recursos do React 18

categoria	Função
conceito	Simultaneidade
característica	Batchamento automático, transições, etc.
API	createRoot, hydrateRoot, renderToPipeableStream, renderToReadableStream
Ganchos	useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect
renovar	modo estrito
abandonado	ReactDOM.render, renderToString

Abaixo, explicarei as funções e recursos acima com mais detalhes. Primeiro, vamos atualizar para o React 18

Atualize para Reagir 18

Primeiro execute o seguinte comando:

npm install react react-dom

Em seguida, index.jsem , ReactDOM.renderaltere para ReactDOM.createRootpara criar um rootnó e use o rootnó para renderizar o aplicativo.

Aqui está o que parece no React 17:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.render(<App />, container);

Após a atualização, é assim que fica no React 18:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// 创建 root
const root = ReactDOM.createRoot(container);

//渲染
root.render(<App />);

Simultaneidade

Para entender a simultaneidade, aqui está um exemplo do oficial:

Suponha que precisamos chamar duas pessoas - Alice e Bob. Em uma configuração não simultânea , podemos ter apenas uma chamada por vez . Ligaremos primeiro para Alice e depois para Bob quando terminarmos.

Isso é bom quando o tempo de chamada é curto, mas pode ser um problema se a chamada para Alice tiver um longo tempo de espera (por exemplo, espera).

Considerando que, em uma configuração simultânea, podemos chamar Alice e, uma vez em espera, podemos chamar Bob .

Isso não significa que estamos falando com duas pessoas ao mesmo tempo. Significa apenas que podemos ter duas ou mais chamadas simultâneas ao mesmo tempo e decidir qual é a mais importante .

Além disso, no React 18 com renderização simultânea, o React pode 中断、暂停、恢复或放弃渲染. Isso permite que o React responda rapidamente às interações do usuário, mesmo quando está executando tarefas pesadas de renderização.

Antes do React 18, a renderização era uma transação única, ininterrupta e síncrona que não podia ser interrompida após o início da renderização.

O React 18 introduz a base da renderização simultânea , fornecendo suporte para novos recursos, como suspenserenderização de serviços de streaming e .transitions

O que há de novo no React 18

processamento automático em lote

O React 18 possui processamento em lote automático. Para entender o processamento em lote, vamos nos referir a um exemplo oficial de compras em uma loja.

Digamos que você esteja fazendo macarrão para o jantar. Mas você descobre que não tem os ingredientes necessários para fazer macarrão, então precisa ir à loja para comprá-los.

É quando você começa a cozinhar e descobre que está faltando um ingrediente, aí você vai até a loja comprar o ingrediente e volta para continuar cozinhando. Volte apenas para descobrir que precisa de outro ingrediente, e então você vai à loja para comprá-lo... e volta. Se isso continuar, você pode enlouquecer primeiro.

No React, quando você chama setState, o batching ajuda a reduzir o número de re-renderizações que ocorrem quando o estado muda . Anteriormente, as atualizações de estado em lote do React em manipuladores de eventos como este:

const handleClick = () => {
    
    
setCounter();
setActive();
setValue();
}
// 最后重新渲染一次。

No entanto, as atualizações de estado que ocorrem fora dos manipuladores de eventos não são agrupadas . Por exemplo, se houver uma Promiseou uma chamada de API estiver em andamento, o estado não será atualizado em lotes. assim:

fetch('/network').then( () => {
    
    
setCounter(); // 重新渲染 1 次
setActive();  // 重新渲染 2 次
setValue();   // 重新渲染 3 次
});
//一共重新渲染 3次

Como você sabe, fazer isso não é uma maneira performática. O React 18 introduziu o batching automático, que permite o batching de todas as atualizações de estado , mesmo em callbacks Promise、setTimeoutse eventos. Isso reduz significativamente o trabalho que o React tem que fazer em segundo plano. O React aguardará a conclusão de uma microtarefa antes de renderizar novamente .

O batching automático está disponível imediatamente no React , mas você pode usá-lo se quiser desativá-lo flushSync.

Transições

As transições são uma novidade introduzida no React 18 并发特性. Ele permite que você atualize a marcação como uma transição, que informa ao React sobre eles 可以被中断执行e 避免回到已经可见内容的 Suspense 降级方案.

Por exemplo, quando você está digitando, duas coisas acontecem: o cursor pisca enquanto você digita e, em seguida, os dados são pesquisados ​​em segundo plano.

Se você achar que não é urgente apresentar os dados pesquisados ​​ao usuário, marque esta ação como transitions. Dessa forma, o React saberá quais atualizações têm precedência. Isso torna mais fácil aumentar o desempenho de renderização.

Em uso, no React, você pode usar startTransitionpara marcar atualizações como transition. Aqui está um exemplo de um typeaheadcomponente usando transitionsmarcação:

import {
    
     startTransition } from 'react';

// 紧急
setInputValue(input);

// 非紧急: 将内部的任何非紧急状态更新标记为 Transition
startTransition(() => {
    
    
  setSearchQuery(input);
});

Como as transições são diferentes de debounce ou setTimeout?

• Ao contrário de setTimeout, startTransition é executado imediatamente .
• setTimeout tem um atraso garantido, enquanto startTransition tem um atraso que depende da velocidade do dispositivo e outras renderizações urgentes .
• Ao contrário de setTimeout, as atualizações de startTransition podem ser interrompidas sem congelar a página .
• O React pode acompanhar os estados pendentes para você quando marcado como startTransition .

Suspenso SSR

Renderização do lado do cliente e renderização do lado do servidor

Durante um aplicativo renderizado do lado do cliente, o HTML da página é carregado do servidor, juntamente com qualquer JavaScript necessário para executar a página.

No entanto, se o pacote JavaScript for grande ou a conexão for lenta, esse processo poderá levar muito tempo.

Para otimizar a experiência do usuário e evitar que o usuário fique em uma tela em branco, podemos usar a renderização do servidor.

A renderização do servidor é uma técnica que renderiza a saída HTML dos componentes do React no servidor e envia o HTML do servidor. Isso permite que o usuário veja alguma interface do usuário quando o pacote JS é carregado e antes que o aplicativo se torne interativo.

A renderização do servidor aprimora ainda mais a experiência do usuário ao carregar páginas e reduz o tempo de interação.

Antes do React 18, essa parte geralmente era o gargalo do aplicativo e aumentava o tempo necessário para renderizar o componente.

Um componente lento pode desacelerar uma página inteira . Isso ocorre porque a renderização do servidor é tudo ou nada. Você não pode dizer ao React para adiar o carregamento de componentes lentos, e você não pode dizer ao React para enviar HTML para outros componentes.

React 18 adiciona suporte para Suspenseno . Com a ajuda do suspense, você pode agrupar partes lentas de seu aplicativo em Suspensecomponentes , dizendo ao React para carregar lentamente os componentes lentos. Isso também pode ser usado para especificar o que pode ser exibido no carregamento 加载状态.

No React 18, um componente lento não precisa desacelerar a renderização de todo o aplicativo. Usando Suspense, 可以告诉 React 首先发送其他组件的 HTML 以及占位符的 HTML. Então, 当慢速组件准备好并获取其数据时，服务器渲染器将在同一流中弹出其 HTML.

Dessa forma, o usuário pode ver o esqueleto da página desde o início e mostrar gradualmente mais conteúdo à medida que mais HTML chega.

Tudo isso acontece antes que qualquer JS ou React seja carregado na página, o que melhora significativamente a experiência do usuário e a latência percebida pelo usuário.

modo estrito

O modo estrito no React 18 terá 模拟安装、卸载和重新安装componentes no estado anterior. Isso prepara o cenário para um futuro 可重用状态onde o React pode montar imediatamente a tela anterior reinstalando a árvore com o mesmo estado do componente antes de desmontar.

O modo estrito garantirá que o componente seja resiliente aos efeitos de várias instalações e desinstalações.

fim

Em suma, o React 18 prepara o terreno para lançamentos futuros e se concentra em melhorar a experiência do usuário.