O que há de novo no React 16?

Olá, Web Developers!

O React, agora na sua 16ª versão, foi totalmente reescrito, mas tenha calma que não haverá grandes quebras. Caso sua aplicação esteja usando a versão 15.6, pode migrar sem se preocupar.

O Twitter Lite já está usando a versão 16 e perceberam uma redução no tamanho dos arquivo e melhora na performance.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

As principais novidades

Dentre as novidades, destacamos:

Licença MIT

Houve muita discussão sobre o React ter adotado a licença BSD+Patents. Agora você pode usar o React sem se preocupar com patentes, pois agora ele está sob a Licença MIT.

Ainda mais leve!

Mesmo com novas funcionalidades, o tamanho agora da biblioteca diminuiu cerca de 32%.

Versão 15

  • react – 20.7kb (6.9kb com gzip)
  • react-dom – 141kb (42.9kb com gzip)

Versão 16

  • react – 5.3kb (2.2kb com gzip)
  • react-dom – 103.7kb (32.6kb com gzip)

Tratamento de Erros

Antes um erro em um componente poderia quebrar a aplicação. Agora podemos colocar em nossos componentes o método componentDidCatch() para tratar erros.

Render com Arrays, Strings e Numbers

Quem trabalha com React sabe que o método render() sempre deve retornar um único elemento. Caso você queira retonar uma lista de elementos, você deve criar um container para eles.

Agora você pode retornar um Array de elementos. Por ser um Array, você ainda precisará adicionar o atributo key aos elementos.

render() {
  return [
    <li key="A">item 1</li>,
    <li key="B">item 2</li>,
    <li key="C">item 3</li>,
  ];
}

E também pode-se retornar uma simples String:

render() {
  return 'Hello TreinaWeb!';
}

Suporte para atributos personalizados

Antes os atributos que a gente passava para o HTML ou SVG que não fossem reconhecidos eram ignorados. Agora o React os mantém.

<!-- nosso código -->
<div mycustomattribute="something" />

<!-- React 15 -->
<div />

<!-- React 16 -->
<div mycustomattribute="something" />

Portals

O React 16 te permite inserir um elemento filho em um local diferente no DOM, fora da sua árvore principal.

React - Dominando Componentes
Curso de React - Dominando Componentes
CONHEÇA O CURSO

Imagine o seguinte cenário:

<body>
  <div id="root"></div>
  <div id="my-portal"></div>
<body>

Agora imagine que você tenha um componente na div “root”. Com Portals você pode pegar este componente e mandar renderizá-lo na div my-portal.

Um exemplo de uso: se tiver um elemento que deva aparecer na página e reaparecer ao abrir uma modal, teríamos que chamar nosso componente em dois lugares (na página e na modal) e passar as propriedades para ele.

Com Portals bastaria indicar o elemento que se quer pegar e onde quer exibí-lo. Precisa alterar alguma propriedade passada para o componente? Altere apenas em um lugar.

No Facebook, quando você inicia um vídeo e começa a navegar, o vídeo aparece em uma modal para te permitir navegar e continuar vendo o vídeo. Isso poderia ser feito facilmente com Portals.

Retornando null em setState()

Antes a função setState() apenas atualizava um valor do estado do componente.

Agora podemos colocar uma função dentro de setState(). Se esta função retornar null, o estado não é atualizado.

const newNumber = 7;

this.setState(state => {
   if(state.myNumber === newNumber){
      return null;
   }else{
      return {myNumber: newNumber};
   }
});

No código acima verificamos se o newNumber é igual ao número que temos no estado do componente. Caso sim, retornamos null, o que evitará mudança no estado do componente.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

O que ficou obsoleto?

Algumas alterações que podem causar quebras em relação às versões anteriores:

  • Descontinuação do suporte aos React-Add-ons
  • Chamar setState() com null não dispara mais atualizações
  • Chamar setState() diretamente dentro de render() sempre causa atualizações.
  • Callbacks de setState() agora são disparados após componentDidMount() ou componentDidUpdate().
  • ReactDOM.render() e ReactDOM.unstable_renderIntoContainer() agora retornam null se forem chamados de dentro de um método do lifecycle.

Ah, não deixe de conhecer o nosso curso de React:

Um abraço e até a próxima! 😉

Deixe seu comentário

Graduado em Análise e Desenvolvimento de Sistemas e Pós-graduado em Projetos e Desenvolvimento de Aplicações Web. Especializado em Front End e curte desenvolvimento de jogos. Estudante de Machine Learning.