![\"React](\"/static/64d522b74fb585f1abada9801f85fa9d/1ac66/react-perf-chrome-timeline.png\")
\n \n \n \n Hoje nós estamos lançando React 15.4.0.
\nNós não anunciamos os lançamentos menores anteriores no blog porque a maioria das alterações foram correções de bugs. Entretanto, 15.4.0 é uma versão especial, e nós gostaríamos de destacar algumas mudanças notáveis.
\nHá mais de um ano atrás, nós começamos a separar o React e React DOM em pacotes separados. Nós descontinuamos o React.render() a favor do ReactDOM.render() no React 0.14, e removemos APIs específicas do DOM do React completamente no React 15. Entretanto, a implementação do React DOM ainda viveu secretamente dentro do pacote do React.
No React 15.4.0, nós estamos finalmente movendo a implementação do React DOM para o pacote do React DOM. O pacote do React agora irá conter apenas o código “renderer-agnostic” tal como React.Component e React.createElement().’
Isso resolve algumas questões de longa data, tais como erros quando você importa o React DOM no mesmo arquivo que o renderizador do teste snapshot.
\nSe você utilizar apenas as APIs oficiais e documentadas do React você não precisará mudar nada na sua aplicação.
\nEntretanto, existe uma possibilidade de você ter importado APIs privadas de react/lib/*, ou que um pacote que você confia usá-las. Gostaríamos de lembrar que isso nunca foi suportado, e que as suas aplicações não devem confiar em APIs internas. As partes internas do React irão continuar mudando conforme nós trabalhamos para melhorar o React.
Outra coisa a observar é que o React DOM Server agora tem o mesmo tamanho que o React DOM uma vez que ele contém a própria cópia do React reconciler. Nós não recomendamos usar React DOM Server no lado do cliente na maioria dos casos.
\nAgora você pode visualizar os componentes React na Timeline do Chrome. Isso permite que você veja exatamente quais componentes são montados, atualizados, e desmontados e quanto tempo eles levam em relação aos outros.
\n\n \n \n \n \n\n \n \n \n \n \nPara usá-lo:
\n?react_perf na query string (por exemplo, http://localhost:3000/?react_perf)Perceba que os números são relativos então os componentes irão renderizar mais rápido em produção. Ainda assim, isso deve ajudar você a perceber quando a UI não relacionada é atualizada por um erro, quão profundas e com qual frequência as atualizações da sua UI ocorrem.
\nAtualmente o Chrome, Edge, e o IE são os únicos navegadores dando suporte à essa funcionalidade, mas nós utilizamos a API de Tempo de Usuário padrão, então nós esperamos que mais browsers dêem suporte à ela.
\nSe você está usando Jest testes snapshot, você pode ter tido problemas com componentes que dependem de referências. Com React 15.4.0, nós introduzimos uma maneira para prover simulações de referências para o renderizador de testes. Por exemplo, considere esse componente usando uma referência em componentDidMount:
import React from 'react';\n\nexport default class MyInput extends React.Component {\n componentDidMount() {\n this.input.focus(); }\n\n render() {\n return (\n <input\n ref={node => this.input = node} />\n );\n }\n}Com o renderizador de teste snapshot, this.input será null porque não tem o DOM. React 15.4.0 nos permite evitar tais falhas passando uma função createNodeMock customizada para o renderizador do teste snapshot no argumento options:
import React from 'react';\nimport MyInput from './MyInput';\nimport renderer from 'react-test-renderer';\n\nfunction createNodeMock(element) { if (element.type === 'input') { return { focus() {}, }; } return null;}\nit('renders correctly', () => {\n const options = {createNodeMock};\n const tree = renderer.create(<MyInput />, options); expect(tree).toMatchSnapshot();\n});Nós gostaríamos de agradecer à Brandon Dail por implementar esse recurso.
\nVocê pode aprender mais sobre testes snapshot nesse post no blog do Jest.
\nNós recomendamos utilizar Yarn ou npm para gerenciar as dependências do front-end. Se você é novo nos gerenciadores de pacotes, a documentação do Yarn é um bom lugar para começar.
\nPara instalar React com Yarn, rode:
\nyarn add react@15.4.0 react-dom@15.4.0Para instalar React com npm, rode:
\nnpm install --save react@15.4.0 react-dom@15.4.0Nós recomendamos o uso de um bundler como o webpack ou Browserify para que você possa escrever código modular e empacotá-lo em pequenos pacotes para otimizar o tempo de carregamento.
\nLembre-se de que por padrão, o React executa verificações extras e fornece avisos úteis no modo de desenvolvimento. Quando publicar sua aplicação, tenha certeza de compilá-lo em modo de produção.
\nCaso você não utilize um bundler, nós também fornecemos bundlers pré-buildados nos pacotes npm que você pode incluir como tags de script na sua página:
\nTambém publicamos a versão 15.4.0 do react, react-dom, e pacotes addons no npm e no pacote do react no bower.
aria- inválidos.autofocus ao invés de autoFocusString.prototype.spliteRemoved an unnecessary warning about polyfilling String.prototype.split.batchedUpdates agora passa o valor de retorno através da função empacotada.\n(@bgnorlov em #7444)Simulate.click() em um <input disabled onClick={foo} /> então foo será chamado ao contrário de antes.\n(@nhunzaker em #7642)ReactTestRenderer.create() agora aceita {createNodeMock: element => mock} como um argumento opcional então você pode simular referências com os testes snapshot.\n(@Aweary em #7649 e #8261)