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.
Curso React - Introdução
Conhecer o cursoAs 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.
Curso React - Dominando Componentes
Conhecer o cursoImagine 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.
Curso React - Tópicos Avançados
Conhecer o cursoO 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()comnullnão dispara mais atualizações - Chamar
setState()diretamente dentro derender()sempre causa atualizações. - Callbacks de
setState()agora são disparados apóscomponentDidMount()oucomponentDidUpdate(). -
ReactDOM.render()eReactDOM.unstable_renderIntoContainer()agora retornamnullse 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! ;)
