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.
\nComo 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.
\nO React 15 traz melhorias significativas na maneira como interagimos com o DOM:
\ndocument.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.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.<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.
\nTambé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.
\nComo 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.
\nSe 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.
\nVeja o registro de mudanças abaixo para mais detalhes.
\nRecomendamos 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-domLembre-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.
document.createElement é mantido e data-reactid está foraAconteceram 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<span> s extrasOutra 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.
null agora usa nós de comentáriosTambé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.\n@sophiebits em #5451
nullAdicionamos 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.
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.
<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.
React.cloneElement () agora resolve defaultPropsCorrigimos 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.
ReactPerf.getLastMeasurements() é opacoEssa 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.
Essas deprecations foram introduzidas há nove meses na v0.14 com um aviso e agora estão removidas:
React: findDOMNode, render, renderToString, renderToStaticMarkup e unmountComponentAtNode. Como lembrete, elas agora estão disponíveis no ReactDOM e no ReactDOMServer.\n@jimfb em #5832batchedUpdates e cloneWithProps.\n@jimfb em #5859, @zpao em #6016setProps,replaceProps e getDOMNode.\n@jimfb em #5570react/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.\n@gaearon em #6285children para elementos void como<input> não é mais permitido e agora gera um erro.\n@jonhester em #3372refs (por exemplo, this.refs.div.props`) foram descontinuadas e foram removidas.\n@jimfb em #5495Cada 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.
\nLinkedStateMixin 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.\n@jimfb em #6127<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.\n@antoaravinth em #5048ReactPerf.printDOM() foi renomeado para ReactPerf.printOperations() e ReactPerf.getMeasurementsSummaryMap() foi renomeado para ReactPerf.getWasted().\n@gaearon em #6287px automaticamente. Esta versão agora avisa neste caso (por exemplo: escrevendo style = {{width: '300'}}. Valores * unit * de número * como width: 300 permanecem inalterados.\n@pluma em #5140ref ekey dos props.\n@prometheansacrifice em #5744props diferente para o construtor super().\n@prometheansacrifice em #5346setState() dentro de getChildContext().\n@raineroviir em #6121onclick, que deve ser onClick.\n@ali em #5361NaN nostyle.\n@jontewks em #5811value edefaultValue para um input.\n@mgmcdermott em #5823onFocusIn ou onFocusOut, pois eles são desnecessários no React.\n@jontewks em #6296ReactDOM.render(), this.setState() ou this.forceUpdate().\n@conorhastings em #5193 e @gaearon em #6310TestUtils.Simulate () agora imprime uma mensagem se você tentar usá-lo com renderização superficial.\n@conorhastings em #5358arrayOf() e objectOf() fornecem melhores mensagens de erro para argumentos inválidos.\n@chicoxyzzy em #5390componentWillReceiveProps() agora é chamado consistentemente quando o context é alterado.\n@milesj em #5787React.cloneElement() não anexa barra a uma key existente quando usado dentro de React.Children.map().\n@ianobermiller em #5892cite eprofile.\n@AprilArcus em #6094 and @saiichihashimoto em #6032cssFloat,gridRow e gridColumn.\n@stevenvachon em #6133 and @mnordick em #4779borderImageOutset, borderImageWidth, borderImageSlice, floodOpacity, strokeDasharray estrokeMiterlimit como propriedades CSS sem unidade.\n@rofrischmann em #6210 and #6270onAnimationStart, onAnimationEnd, onAnimationIteration, onTransitionEnd e onInvalid. O suporte ao onLoad foi adicionado aos elementos do object.\n@tomduncalf em #5187, @milesj em #6005, e @ara4n em #5781href = {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.\n@syranide em #1510children para strings em Web Components.\n@jimfb em #5093<use>.\n@edmellum em #5720<select> for desmontado enquanto o manipulador onChange estiver em execução.\n@sambev em #6028ref.\n@yiminghe em #6095Object.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.\n@chicoxyzzy em #6132loose-envify em vez de envify e por isso instala menos dependências transitivas.\n@qerub em #6303getMountedInstance().\n@glenjamin em #4918render().\n@simonewebdesign em #5411Object.create e Object.freeze em ambientes antigos. No entanto, ainda requer ES5 shims nesses ambientes.\n@dgreensp em #4959data- com nomes que começam com números.\n@nLight em #5216suppressContentEditableWarning para componentes como Draft.js que gerenciam intencionalmente os filhos contentEditable com o React.\n@mxstbr em #6112createClass() em especificações complexas.\n@sophiebits em #5550