React v15.0 Release Candidate

Desculpe pelo pequeno atraso em liberar esta release. Como dissemos, estivemos ocupados assistindo House of Cards. Essa cena do último episódio onde Francis e Claire Underwood ████████████████████████████████████. WOW!

Mas agora estamos prontos, então sem mais delongas, estamos disponibilizando agora uma release canditate para o React v15. Como lembrete, estamos mudando para versões principais para indicar que estamos utilizando o React em produção há bastante tempo. Esta release 15.0 segue a nossa versão anterior 0.14 e vamos continuar a seguir a semver como temos vindo fazendo desde 2013. Também vale ressaltar que não suportaremos ativamente o Internet Explorer 8. Acreditamos que o React funcionará em sua forma atual lá, mas não estaremos priorizando quaisquer esforços para corrigir novos problemas que afetam somente o IE8.

Por favor, experimente-o antes de nós publicarmos a versão final. Deixe-nos saber se você algum problema, crie issues em nosso repositório no GitHub.

Guia de Atualização

Como sempre, temos algumas mudanças significativas nesta versão. Nós sabemos que mudanças podem ser dolorosas (a base de código do Facebook possui mais de 15.000 componentes), por isso sempre tentamos fazer alterações gradualmente a fim de minimizar a dor.

Se o seu código estiver livre de avisos ao ser executado em versões abaixo do React 0.14, a atualização deverá ser fácil. A maior parte das alterações nesta versão ocorrem por trás das cortinas, impactando a forma com o React interage com o DOM. A outra mudança substancial é que o React agora suporta uma gama completa de elementos e atributos SVG. Além disso, temos um grande número de melhorias incrementais e avisos adicionais destinados a ajudar os desenvolvedores. Nós também estabelecemos algumas bases no core para trazer algumas novas capacidades em versões futuras.

Veja o changelog abaixo para mais detalhes.

Instalação

Recomendamos o uso do React a partir do npm e utilizando uma ferramenta como o browserify ou webpack para criar o seu código em um único bundle. Para instalar os dois pacotes:

• npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1

Lembre-se que, por padrão o React executa verificações extras e fornece avisos úteis no modo de desenvolvimento. Quando estiver fazendo o deploy da sua aplicação, defina a variável de ambiente NODE_ENV como production para utilizar o build de produção do React que não inclui os avisos de desenvolvimento e funciona significativamente mais rápido.

Se você ainda não pode utilizar o npm, nós fornecemos compilações pré-construídas de navegador para sua conveniência, que também estão disponíveis no pacote react no bower.

• React Build de desenvolvimento com avisos: https://fb.me/react-15.0.0-rc.1.js Build minificada para produção: https://fb.me/react-15.0.0-rc.1.min.js
• React with Add-Ons
  Build de desenvolvimento com avisos: https://fb.me/react-with-addons-15.0.0-rc.1.js Build minificada para produção: https://fb.me/react-with-addons-15.0.0-rc.1.min.js
• React DOM (include React in the page before React DOM)
  Build de desenvolvimento com avisos: https://fb.me/react-dom-15.0.0-rc.1.js Build minificada para produção: https://fb.me/react-dom-15.0.0-rc.1.min.js

Changelog

Major changes

• document.createElement está dentro e data-reactid está fora

  Houveram uma série de grandes mudanças em nossas interações com o DOM. Uma das mudanças mais perceptíveis é que não definimos mais o atributo data-reactid para cada nó do DOM. Embora isso torne muito mais difícil saber se um site está usando React, a vantagem é que o DOM é muito mais leve. Essa mudança possibilitou que alterássemos para usar document.createElement na renderização inicial. Anteriormente, geraríamos uma grande sequência de HTML e em seguida definíamos o node.innerHTML. Na época, foi decidido que isso seria mais rápido do que usar document.createElement para a maioria dos casos e navegadores que suportamos. Os navegadores continuaram a melhorar e, por isso, esmagadoramente, isso não é mais verdade. Usando o createElement podemos tornar outras partes do React mais rápidas. Os ids foram usados para mapear de volta os eventos para o componente React original, o que significa que tivemos que fazer um monte de trabalho em cada evento, mesmo que tenhamos cacheado esses dados fortemente. Conforme tivemos experiências, caching e caches particularmente inválidos, podem ser propensos a erros e vimos que torna-se difícil de reproduzir problemas ao longo dos anos como resultado. Agora podemos construir um mapeamento direto na hora da renderização, já que temos o controle no nó.

• Chega de <span>s extras

  Outra grande mudança com nossa interação do DOM é como fazemos blocos de texto. Anteriormente, você deve ter notado que o React renderizava um monte de <span>s extras, por exemplo, em nosso exemplo mais básico na página inicial nós renderizamos <div>Hello {this.props.name}</div>, resultando em uma marcação que continha 2 <span>s. Agora deixaremos os nós de texto simples intercalados com nós de comentários que são usados para demarcação. Isso nos dá a mesma capacidade de atualizar pedaços individuais de texto, sem criar nós aninhados extras. Poucas pessoas dependeram da marcação real gerada aqui, então é provável que você não seja impactado. No entanto, se você tem esses <span>s como seletor em seu CSS, você precisará se ajustar de acordo. Você sempre poderá renderizá-los explicitamente em seus componentes.

• Renderização de null agora utiliza nós de comentários

  Também usamos esses nós de comentários para mudar o que null irá renderizar. Renderização para null foi um recurso que adicionamos no React v0.11 e foi implementado renderizando elementos <noscript>. Agora, ao renderizar para comentar nós, há uma chance de algumas de suas regras no CSS estarem selecionando a coisa errada, especificamente se você está fazendo uso de seletores :nth-child. Isso, juntamente com as outras mudanças mencionadas acima, sempre foram considerados detalhes de implementação de como o React tem o DOM como alvo. Acreditamos que são mudanças seguras a se fazer sem passar por uma liberação com avisos detalhando as diferenças sutis, pois são detalhes que não devem ser dependidos. Além disso, vimos que essa mudança melhorou o desempenho do React para muitas aplicações típicas.

• Suporte a SVG melhorado

  Todas as tags e atributos SVG são totalmente suportados agora. (As tags SVG incomuns não estão presentes no ajudante de elemento React.DOM, mas JSX e React.createElement trabalham em todos os nomes de tag.) Todos os atributos SVG correspondem à sua capitalização e hifenização original, conforme definido na especificação (exemplo: gradientTransform deve ser camel-cased, mas ‘clip-path’ deve ser hifenizado).

Breaking changes

Vale a pena chamar a estrutura do DOM de mudanças novamente, em particular a mudança dos <span>s. No curso da atualização da base de códigos do Facebook, encontramos uma quantidade muito pequena de código que dependia da marcação que o React gerou. Alguns desses casos foram testes de integração como o WebDriver, que estavam fazendo consultas com XPath muito específicas para direcionar os nós. Outros foram simplesmente testes usando ReactDOM.renderToStaticMarkup e comparando a marcação. Mais uma vez, houve um número muito pequeno de mudanças que tinham que ser feitas, mas não queremos que ninguém seja pego de surpresa. Encorajamos todos a executar suas suítes de teste ao atualizar e considerar abordagens alternativas quando possível. Uma abordagem que funcionará para alguns casos é usar explicitamente <span>s no seu método render.

Essas descontinuações foram introduzidas na versão v0.14 com um aviso e as APIs agora serão removidas.

• APIs obsoletas removidas do React, especificamente findDOMNode, render, renderToString, renderToStaticMarkup, e unmountComponentAtNode.
• APIs obsoletas removidas de React.addons, especificamente batchedUpdates e cloneWithProps.
• APIs obsoletas removidas das instâncias componentes, especificamente setProps, replaceProps, e getDOMNode.

Novas descontinuações, introduzido com um aviso

Cada uma dessas alterações continuará funcionando com um novo aviso até o lançamento do React 16 para que você possa atualizar seu código gradualmente.

• LinkedStateMixin e valueLink são agora obsoletos devido à popularidade muito baixa. Se você precisa disso, você pode usar um componente wrapper que implementa o mesmo comportamento: react-linked-input.

Novos avisos úteis

• Se você usar uma cópia minificada da compilação development, o React DOM gentilmente irá encorajar você a usar o build de produção mais rápido.
• React DOM: Ao especificar um valor CSS sem unidade como string, uma versão futura não adicionará px automaticamente. Esta versão agora adverte neste caso (exemplo: escrever style={{width: '300'}}. (Valores unitários number como width: 300 serão inalterados.)
• Eventos sintéticos agora avisarão ao definir e acessar propriedades (que não serão liberadas adequadamente), bem como alertar sobre o acesso após um evento ter sido retornado ao pool.
• Elementos agora irão alertar ao tentar ler ref e key das props.
• React DOM agora tenta alertar para manipuladores de eventos mal digitados em elementos do DOM (ex: onclick que deve ser onClick)

Correções notáveis de bugs

• Ajustado múltiplos pequenos vazamentos de memória
• Os eventos de entrada são tratados de forma mais confiável no IE 10 e IE 11; eventos espúrios não são mais disparados quando usam um placeholder.
• React DOM agora suporta os atributos HTML cite e profile.
• React DOM agora suporta os eventos onAnimationStart, onAnimationEnd, onAnimationIteration, onTransitionEnd e onInvalid. O suporte para onLoad foi adicionado aos elementos object.
• Object.is é usado em vários lugares para comparar valores, o que leva a menos falsos positivos, especialmente envolvendo NaN. Em particular, isso afeta o add-on shallowCompare.
• React DOM agora faz uso padrão de atributos do DOM em vez de propriedades, o que corrige alguns bugs. Além disso, a anulação dos valores (exemplo: href={null}) resultará agora na remoção contundente, não tentando mais definir o valor padrão utilizado pelos navegadores na ausência de um valor.