We want to hear from you!Take our 2021 Community Survey!
Este site não é mais atualizado.Vá para pt-br.react.dev
React
v18.2.0 LanguagesGitHub

React v15.0

April 07, 2016 por Dan Abramov

This blog site has been archived. Go to react.dev/blog to see the recent posts.

Gostaríamos de agradecer à comunidade React por continuar relatando os problemas e regressões encontrados nos candidatos a release em nosso registro de erros. Nas últimas semanas, corrigimos os problemas encontrados e, agora, após dois candidatos a release, estamos empolgados para finalmente lançar a versão estável do React 15.

Como lembrete, estamos mudando para as principais versões para indicar que estamos usando o React em produção há muito tempo. O release 15.0 segue o 0.14 anterior e continuaremos a seguir esse versionamento semântico como fazemos desde 2013. É importante também notar que não temos mais suporte ativo para o Internet Explorer 8. Acreditamos que o React funcionará na sua forma atual, mas não priorizaremos nenhum esforço para corrigir novos problemas que afetam apenas o IE8.

O React 15 traz melhorias significativas na maneira como interagimos com o DOM:

  • Agora usamos document.createElement ao invés de innerHTML ao montar componentes. Isso nos livra do atributo data-reactid em todos os nós e torna o DOM mais leve. O uso de document.createElement também é mais rápido nos navegadores modernos e corrige vários casos extremos relacionados a elementos SVG e a execução de várias cópias do React na mesma página.
  • Em termos históricos, nosso suporte ao SVG foi incompleto e muitas tags e atributos estavam ausentes. Ouvimos você e, no React 15, adicionamos suporte a todos os atributos SVG reconhecidos pelos navegadores atuais. Se esquecemos algum atributo que você gostaria de usar, por favor, nos informe. Como bônus, graças ao uso do document.createElement, não precisamos mais manter uma lista de tags SVG; portanto, quaisquer tags SVG que anteriormente não eram compatíveis devem funcionar normalmente no React 15.
  • Recebemos algumas contribuições surpreendentes da comunidade nessa release e gostaríamos de destacar em particular essa pull request do Michael Wiencek. Graças ao trabalho do Michael, o React 15 não emite mais extra <span> nós ao redor do texto, tornando o resultado do DOM muito mais limpo. Esse era um incômodo antigo dos usuários do React, por isso é tão legal que essa mudança seja uma contribuição externa.

Embora não esteja diretamente relacionado ao release, entendemos que, para receber mais contribuições da comunidade como a contribuição de Michael, precisamos comunicar nossas metas e prioridades abertamente e revisar as solicitações de recebimento de forma mais decisiva. Como primeiro passo, começamos a publicar novamente as Notas da reunião semanal do React Core Team. Também pretendemos introduzir um processo RFC inspirado nos Ember RFCs para que colaboradores externos possam ter mais conhecimento e influência no desenvolvimento futuro do React. Manteremos você atualizado sobre tudo em nosso blog.

Também estamos experimentando um novo formato de registro de alterações neste post. Agora, todas as alterações são vinculadas à pull request correspondente e mencionam o autor. Se você vê utilidade nisso, fala pra gente.

Guia de Atualização

Como de costume em grandes releases, o React 15 removerá o suporte para alguns dos padrões descontinuados nove meses atrás no React 0.14. Sabemos que as alterações podem ser dolorosas (o código do Facebook tem mais de 20.000 componentes do React, isso sem contar do React Native). Por isso, sempre tentamos fazer alterações graduais para minimizar a dor.

Se o seu código não apresentar avisos ao ser executado no React 0.14, a atualização deverá ser bem mais fácil. A maior parte das mudanças neste release estão realmente nos bastidores, impactando a maneira como o React interage com o DOM. A outra mudança substancial é que o React agora suporta toda a gama de elementos e atributos SVG. Além disso, temos um grande número de melhorias incrementais e avisos adicionais destinados a ajudar os desenvolvedores. Também solidificamos a nossa base para fornecer novos recursos em futuros releases.

Veja o registro de mudanças abaixo para mais detalhes.

Instalação

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

  • npm install --save react react-dom

Lembre-se de que, por padrão, o React executa verificações extras e fornece avisos no modo de desenvolvimento. Ao fazer deploy do seu aplicativo, defina a variável de ambiente NODE_ENV comoproduction para usar a construção de produção do React, que não inclui os avisos de desenvolvimento e executa mais rápido.

Se você ainda não tem como usar o npm, fornecemos versões pré-construídas do navegador para sua conveniência, que também estão disponíveis no pacotereact no navegador.

Changelog

Principais mudanças

  • document.createElement é mantido e data-reactid está fora

    Aconteceram várias mudanças grandes na forma como interagimos com o DOM. Uma das mudanças mais notáveis é que não definimos mais o atributo data-reactid para cada nó do DOM. Embora essa mudança torne mais difícil saber se um site está usando o React, a vantagem é que o DOM fica muito mais leve. Essa alteração foi possível ao escolhermos o uso de document.createElement na renderização inicial. Anteriormente, gerávamos uma grande string de HTML e, em seguida, definíamos node.innerHTML. Na época, decidiu-se que essa abordagem era mais rápida do que usar document.createElement para a maioria dos casos e navegadores compatíveis. Mas os navegadores continuaram a melhorar tanto que a razão por trás da nossa abordagem inicial não é mais verdadeira. Ao usar createElement, podemos fazer com que outras partes do React fiquem mais rápidas. Os IDs foram usados para mapear os eventos para o componente React original, o que significa que tínhamos que fazer muita coisa em todos os eventos, mesmo já tendo esses dados armazenados em cache. Como todos já vimos, o armazenamento em cache e, em particular, a invalidação de caches, podem ser propensos a erros e, como resultado, vimos muitos problemas difíceis de serem reproduzidos. Agora podemos construir um mapeamento direto no momento da renderização, já que já temos um identificador no nó.

    ** Nota: ** data-reactid ainda está presente no conteúdo renderizado pelo servidor, no entanto, é muito menor do que antes e é agora é simplesmente um contador de incremento automático.

    @sophiebits em #5205

  • Não há mais <span> s extras

    Outra grande mudança na nossa interação com o DOM é como processamos blocos de texto. Anteriormente, você deve ter notado que o React renderizava muitos <span> s extras. Por exemplo, em nosso exemplo mais básico na página inicial, renderizamos <div> Olá {this.props.name} </div>, resultando em uma marcação que continha 2 <span> s. Agora, renderizaremos nós de texto sem formatação intercaladas com nós de comentários usados para demarcação. Isso nos dá a capacidade de atualizar partes de texto individuais sem criar extras nós aninhados. Pouquíssimas pessoas dependiam da marcação gerada aqui; portanto, é provável que você não seja impactado. No entanto, se você estava direcionando esses <span> s em seu CSS, precisará ajustar de acordo. Você sempre pode processá-los explicitamente em seus componentes.

    @mwiencek em #5753

  • Renderizar null agora usa nós de comentários

    Também usamos esses nós de comentários para alterar o que o “null” renderiza. Renderizar null foi um recurso que adicionamos no React 0.11 e foi implementado renderizando elementos<noscript>. Ao renderizar os nós de comentários agora, é possível que partes do seu CSS estejam direcionando para o lugar errado, especificamente se você estiver usando os seletores : nth-child. O uso do React da tag <noscript> sempre foi considerado um detalhe de implementação de como o React segmenta o DOM. Acreditamos que essas são mudanças seguras a serem feitas que removem a necessidade de um release com avisos detalhando as diferenças sutis, visto que esses são detalhes dos quais não devemos depender. Além disso, vimos que essas alterações melhoraram o desempenho do React para muitos aplicativos. @sophiebits em #5451

  • Componentes de função agora também retornam null

    Adicionamos suporte para a definição de componentes sem estado como funções no React 0.14. No entanto, o React 0.14 ainda permitia que você definisse um componente de classe sem estender o React.Component ou usando o React.createClass (), portanto [não dava para sabermos com segurança se o seu componente era uma função ou uma classe](https://github.com/facebook/react/issues/5355(https://github.com/facebook/react/issues/5355), além de não permitir null como retorno. Esse problema foi resolvido no React 15 e agora você pode retornar null de qualquer componente, seja o componente uma classe ou uma função.

    @jimfb em #5884

  • Melhoria no suporte para SVG

    Agora há suporte para todas as tags SVG. (Tags SVG incomuns não estão presentes no auxiliar de elemento do React.DOM, mas JSX eReact.createElement funcionam em todos os nomes de tags.) Todos os atributos SVG implementados pelos navegadores possuem suporte também. Se você encontrar algum atributo que negligenciamos, por favor nos informe nesta issue.

    @zpao em #6243

Mudanças radicais

  • Não há mais <span> s extras

    É bom ressaltar as alterações da estrutura do DOM que comentamos anteriormente mais uma vez, em particular a alteração que diz respeito aos <span> s. Durante a atualização da base de código do Facebook, encontramos uma quantidade muito pequena de código que dependia da marcação que o React criava. Alguns desses cenários foram testes de integração como o WebDriver, que fazia consultas XPath muito específicas para direcionar nós. Outros eram simplesmente testes usando o ReactDOM.renderToStaticMarkup e comparações de marcação. Novamente, houve um número muito pequeno de mudanças que precisavam ser feitas, mas não queremos que ninguém seja pego de surpresa. Incentivamos todos a executar seus conjuntos de testes ao atualizar e considerar abordagens alternativas sempre que possível. Uma abordagem que funcionará em alguns casos é usar explicitamente <span> s no método render.

    @mwiencek em #5753

  • React.cloneElement () agora resolve defaultProps

    Corrigimos um erro no React.cloneElement() que pode afetar alguns componentes que dependiam dele. Se alguns dos props recebidos por cloneElement()sãoundefined, a função costumava retornar um elemento com valores indefinidos para esses props. No React 15, estamos mudando essa abordagem para que seja consistente com createElement(). Agora, todos os objetos que são ‘undefined’ passados para cloneElement() são resolvidos para os defaultProps do componente correspondente. Somente um dos nossos 20.000 componentes do React foi afetado negativamente por essa mudança, por isso nos sentimos confortáveis em liberar essa alteração sem manter o comportamento antigo por outro ciclo de release.

    @truongduy134 em #5997

  • ReactPerf.getLastMeasurements() é opaco

    Essa alteração não afeta aplicativos, mas pode quebrar algumas ferramentas de terceiros. Estamos reformulando a implementação do ReactPerf e planejamos lançá-lo durante o ciclo 15.x. O formato interno de medição de desempenho está sujeito a alterações, portanto, por enquanto, consideramos o valor de retorno de ReactPerf.getLastMeasurements() uma estrutura de dados opaca que não deve ser confiável.

    @gaearon em #6286

  • Remoção de deprecations

    Essas deprecations foram introduzidas há nove meses na v0.14 com um aviso e agora estão removidas:

    • APIs obsoletas foram removidas da exportação do nível superior do React: findDOMNode, render, renderToString, renderToStaticMarkup e unmountComponentAtNode. Como lembrete, elas agora estão disponíveis no ReactDOM e no ReactDOMServer. @jimfb em #5832
    • Os addons obsoletos foram removidos: batchedUpdates e cloneWithProps. @jimfb em #5859, @zpao em #6016
    • Métodos de instância de componente obsoletos foram removidos: setProps,replaceProps e getDOMNode. @jimfb em #5570
    • O ponto de entrada obsoleto react/addons do CommonJS foi removido. Como lembrete, você deve usar pacotes separados, por exemplo, react-addons- *. Isso se aplica apenas se você usar os builds do CommonJS. @gaearon em #6285
    • Passar children para elementos void como<input> não é mais permitido e agora gera um erro. @jonhester em #3372
    • As propriedades específicas do React no DOM como refs (por exemplo, this.refs.div.props`) foram descontinuadas e foram removidas. @jimfb em #5495

Novas deprecations, introduzidas com avisos

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

  • LinkedStateMixin evalueLink agora estão obsoletos devido à popularidade muito baixa. Se você precisar disso, poderá usar um componente wrapper que implemente o mesmo comportamento: react-linked-input. @jimfb em #6127
  • Versões futuras do React tratarão <input value={null}> como uma solicitação para limpar o input. No entanto, o React 0.14 está ignorando value={null}. O React 15 alerta você sobre um valor de entrada null 'e lhe dá a opção de esclarecer sua intenção. Para corrigir o aviso, você pode passar explicitamente uma string vazia para limpar o input controlado ou passarundefined` para tornar o input não controlado. @antoaravinth em #5048
  • ReactPerf.printDOM() foi renomeado para ReactPerf.printOperations() e ReactPerf.getMeasurementsSummaryMap() foi renomeado para ReactPerf.getWasted(). @gaearon em #6287

Novos avisos importantes

  • Se você usar uma cópia minificada do build de development, o React DOM o incentivará a usar o build mais rápido de produção. @sophiebits em #5083
  • React DOM: Ao especificar um valor CSS sem unidade como uma string, uma versão futura não adicionará px automaticamente. Esta versão agora avisa neste caso (por exemplo: escrevendo style = {{width: '300'}}. Valores * unit * de número * como width: 300 permanecem inalterados. @pluma em #5140
  • Os Eventos Sintéticos (Synthetic Events) agora avisam ao definir e acessar propriedades (que não serão limpas adequadamente), além de avisar sobre o acesso após o retorno de um evento ao pool. @kentcdodds em #5940 e @koba04 em #5947
  • Agora, os elementos avisarão ao tentar ler ref ekey dos props. @prometheansacrifice em #5744
  • O React agora avisará se você passar um objeto props diferente para o construtor super(). @prometheansacrifice em #5346
  • O React agora avisará se você chamar setState() dentro de getChildContext(). @raineroviir em #6121
  • O React DOM agora tenta avisar sobre manipulações de eventos com erros de digitação nos elementos DOM, como onclick, que deve ser onClick. @ali em #5361
  • O React DOM agora alerta sobre os valores NaN nostyle. @jontewks em #5811
  • O React DOM agora avisa se você especificar value edefaultValue para um input. @mgmcdermott em #5823
  • O React DOM agora avisa se um input alterna entre ser controlado e não controlado.
    @TheBlasfem em #5864
  • O React DOM agora avisa se você especificar os manipuladores onFocusIn ou onFocusOut, pois eles são desnecessários no React. @jontewks em #6296
  • O React agora imprime uma mensagem de erro descritiva quando você passa callback inválido como o último argumento para ReactDOM.render(), this.setState() ou this.forceUpdate(). @conorhastings em #5193 e @gaearon em #6310
  • Add-Ons: TestUtils.Simulate () agora imprime uma mensagem se você tentar usá-lo com renderização superficial. @conorhastings em #5358
  • PropTypes: arrayOf() e objectOf() fornecem melhores mensagens de erro para argumentos inválidos. @chicoxyzzy em #5390

Importantes correções de erros

  • Vários pequenos vazamentos de memória foram corrigidos.
    @sophiebits em #4983 e @victor-homyakov em #6309
  • Eventos de entrada são tratados com mais confiabilidade no IE 10 e IE 11; eventos hipotéticos não são mais acionados quando usados com um placeholder. @jquense em #4051
  • O método do ciclo de vida componentWillReceiveProps() agora é chamado consistentemente quando o context é alterado. @milesj em #5787
  • React.cloneElement() não anexa barra a uma key existente quando usado dentro de React.Children.map(). @ianobermiller em #5892
  • O React DOM agora suporta os atributos HTML cite eprofile. @AprilArcus em #6094 and @saiichihashimoto em #6032
  • O React DOM agora suporta as propriedades CSS cssFloat,gridRow e gridColumn. @stevenvachon em #6133 and @mnordick em #4779
  • O React DOM agora manipula corretamente borderImageOutset, borderImageWidth, borderImageSlice, floodOpacity, strokeDasharray estrokeMiterlimit como propriedades CSS sem unidade. @rofrischmann em #6210 and #6270
  • O React DOM agora suporta os eventos onAnimationStart, onAnimationEnd, onAnimationIteration, onTransitionEnd e onInvalid. O suporte ao onLoad foi adicionado aos elementos do object. @tomduncalf em #5187, @milesj em #6005, e @ara4n em #5781
  • O React DOM agora usa como padrão atributos do DOM, em vez de propriedades, o que corrige alguns erros excepcionais. Além disso, a anulação de valores (ex: href = {null}) agora resulta em uma remoção forçada, não mais tentando definir o valor padrão usado pelos navegadores na ausência de um valor. @syranide em #1510
  • O React DOM não converte mais, por engano, children para strings em Web Components. @jimfb em #5093
  • O React DOM agora normaliza corretamente os eventos SVG <use>. @edmellum em #5720
  • O React DOM não lança exceções se um <select> for desmontado enquanto o manipulador onChange estiver em execução. @sambev em #6028
  • O React DOM não lança exceções em aplicativos do Windows 8. @Andrew8xx8 em #6063
  • O React DOM não lança exceções ao desmontar assincronamente um filho com um ref. @yiminghe em #6095
  • O React DOM não força mais o layout síncrono devido ao rastreamento da posição do scroll. @syranide em #2271
  • Object.is é usado em vários locais para comparar valores, o que leva a menos falsos positivos, especialmente envolvendo oNaN. Em particular, isso afeta o add-on shallowCompare. @chicoxyzzy em #6132
  • Add-Ons: o ReactPerf não mais instrumenta adições ou remoções de event listener porque eles não tocam no DOM devido à delegação de eventos. @antoaravinth em #5209

 Outras melhorias

  • O React agora usa o loose-envify em vez de envify e por isso instala menos dependências transitivas. @qerub em #6303
  • O renderizador raso agora expõe getMountedInstance(). @glenjamin em #4918
  • O renderizador raso agora retorna a saída renderizada de render(). @simonewebdesign em #5411
  • React não depende mais do ES5 shams para Object.create e Object.freeze em ambientes antigos. No entanto, ainda requer ES5 shims nesses ambientes. @dgreensp em #4959
  • O React DOM agora permite atributos data- com nomes que começam com números. @nLight em #5216
  • O React DOM adiciona um novo suporte suppressContentEditableWarning para componentes como Draft.js que gerenciam intencionalmente os filhos contentEditable com o React. @mxstbr em #6112
  • O React melhora o desempenho de createClass() em especificações complexas. @sophiebits em #5550
Esta página é útil?Edite esta página