Versão oficial do React18 lançada

Versão oficial do React18 lançada

Eu ainda estava olhando o código-fonte alguns dias atrás. Queria dizer que tentaria ver os recursos do React18. Não esperava que a versão oficial fosse lançada hoje:

Agora dê uma olhada nos novos recursos do React18 com base no post do blog lançado pela equipe do React: React v18.0 .

Simultâneo

Na verdade, quando executei o código-fonte antes, percebi visualmente que o React18 realmente entrou na era da simultaneidade. Aqui está a renderização da versão v17:

Compare a renderização do Reactv18:

Pode-se ver que em comparação com a v18, na parte do código React em execução (ou seja, o segmento de código rosa), a v18 executa 2 tarefas, enquanto a v17 mobiliza 1 tarefa. O que exatamente aconteceu?Depois disso, eu realmente preciso cavar o código-fonte e ver que tipo de atrevimento os deuses estão fazendo.

A renderização será interrompida

Embora a documentação deixe claro que os desenvolvedores não precisam saber o que estão fazendo nos bastidores (nos bastidores), uma ressalva é que a renderização pode ser interrompida. O seguinte é do texto original:

Com a renderização síncrona, uma vez que uma atualização começa a renderizar, nada pode interrompê-la até que o usuário possa ver o resultado na tela.

Em uma renderização simultânea, isso nem sempre é o caso. O React pode começar a renderizar uma atualização, pausar no meio e continuar depois. Ele pode até mesmo abandonar completamente uma renderização em andamento.

Ou seja, ao renderizar de forma síncrona, uma vez que uma atualização (de estado ou props) aciona a renderização, ela não pode ser interrompida até que o usuário veja a interface do usuário renderizada novamente. Mas no modo simultâneo, o React pode acionar uma atualização, parar, retomar mais tarde, ou pode renderizar todo o trabalho de depreciação no meio do caminho.

Claro, o React vai garantir a consistência da renderização e do estado internamente, então... será bom cavar depois.

O estado pode ser reutilizado

O status petting mencionado aqui se refere a:

Outro exemplo é o estado reutilizável. O React simultâneo pode remover seções da interface do usuário da tela e adicioná-las novamente mais tarde enquanto reutiliza o estado anterior. Por exemplo, quando um usuário sai de uma tela e volta, o React deve ser capaz de restaurar a tela anterior no mesmo estado em que estava antes.

Ou seja, quando parte da interface do usuário é removida e adicionada novamente, o React pode reutilizar o estado anterior. O exemplo aqui é que quando o usuário clica fora da página e depois volta, o React deve ser capaz de restaurar a página no mesmo estado.

Meu entendimento pessoal é que quando você sai da página atual e volta para a página anterior, o estado do React pode ser restaurado, em vez de ser completamente perdido como antes, e a página é renderizada a partir do estado inicial.

Se meu entendimento estiver correto, sem persistir o estado, você pode escrever muito menos código Redux.

Disponível no DataFrame Suspense

Suspense é um novo recurso em testes e faz o seguinte:

Reagir. Suspense

React.SuspenseUm indicador de carregamento pode ser especificado caso alguns de seus componentes filhos na árvore de componentes ainda não estejam prontos para renderização. Atualmente, os componentes de carregamento lento são o único caso de uso <React.Suspense>suportado :

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
     
     
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={
     
     <Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

De acordo com o conteúdo da postagem do blog:

No React 18, você pode começar a usar o Suspense para buscar dados em frameworks opinativos como Relay, Next.js, Hydrogen ou Remix. A busca de dados ad hoc com o Suspense é tecnicamente possível, mas ainda não é recomendada como estratégia geral.

Provavelmente significa que você pode finalmente usar a API interna do React para esperar que os dados sejam buscados antes de renderizar a página.

Em outras palavras, pode escrever muito menos código Redux-Saga?

O componente do servidor ainda está em desenvolvimento

Server Components também é um novo componente atualmente em desenvolvimento.

Depois disso, deve ser possível usar diretamente a API interna do React para renderização do lado do servidor sem o Next.js?

O que há de novo no React18

Atualização automática de status

Antes da v18, a atualização em lote era realizada em ouvintes de eventos React, e os ouvintes de eventos originais Promise, setTimeout e JavaScript não empacotavam atualizações, mas a v18 ouvirá automaticamente esses eventos e empacotará automaticamente as atualizações para melhorar o desempenho.

Transições

Este é um novo recurso, o principal objetivo é distinguir entre atualizações urgentes (atualizações urgentes) e atualizações não urgentes (atualizações não urgentes) .

A diferença entre os dois é que as atualizações urgentes são quando o usuário aciona um evento e espera receber feedback imediato, como um clique, entrada, etc. Atualizações não urgentes (atualizações de transição AKA) são como transições de interface do usuário, etc.

Então, aqui estão os novos ganchos, os desenvolvedores podem dizer ao React qual atualização é uma atualização urgente (atualizações urgentes) , para que uma vez que o estado mude, a atualização urgente (atualizações urgentes) possa redefinir o conteúdo da atualização urgente (atualizações urgentes).

Suspense

Foi brevemente mencionado antes, aqui está um exemplo de código:

<Suspense fallback={
    
    <Spinner />}>
  <Comments />
</Suspense>

Enquanto ele Commentainda carregando, ele Spinnerserá renderizado... Você ainda tem que passar um exemplo para entender como usá-lo.

Nova API de renderização cliente-servidor

O cliente tem duas novas APIs, ambas react-dom/clientexportadas de para react-domsubstituir a API de:

• createRootirá substituir ReactDOM.render.
• hydrateRootIrá substituirReactDOM.hydrate

O servidor também possui uma nova API, provavelmente para aquecer o SSR posteriormente:

• renderToPipeableStream, que pode ser transmitido de um ambiente Node
• renderToReadableStream, funciona em trabalhadores Deno e Cloudflare

Novo comportamento do modo estrito

ainda em planejamento

novos ganchos

Há cinco:

• useId

  Ele é usado para gerar IDs exclusivos no servidor e no cliente e também para resolver o problema de IDs duplicados em bibliotecas de terceiros. O endereço do documento é: https://reactjs.org/docs/hooks-reference.html#useid

• useTransition

  Conforme mencionado acima, novas APIs aparecerão correspondentes a novas funções, e o endereço do documento atual é 404...

• useDeferredValue

  API para adiar a re-renderização, a renderização atrasada pode ser interrompida (entenda a parte onde a renderização pode ser interrompida acima), o endereço da documentação é: https://reactjs.org/docs/hooks-reference.html#usedeferredvalue

• useSyncExternalStore

  Este gancho foi desenvolvido para bibliotecas de terceiros, não para código de software. O endereço do documento específico: https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore

• useInsertionEffect
  Este gancho foi desenvolvido para bibliotecas de terceiros, não para código de software. O endereço do documento específico: https://reactjs.org/docs/hooks-reference.html#useinsertioneffect

A maioria dos novos ganchos ainda está em um estágio de compreensão vaga, e é melhor reservar um tempo para digitar um exemplo para uma compreensão mais profunda.