{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2018/05/23/react-v-16-4.html","result":{"data":{"markdownRemark":{"html":"

A última release minor adicionou suporte para um recurso solicitado frequentemente: eventos de ponteiros!

\n

Também foi incluso uma correção de erro para o getDerivedStateFromProps. Confira o changelog completo abaixo.

\n

Eventos de Ponteiros

\n

Os tipos de eventos seguintes estão disponíveis agora no React DOM:

\n\n

Tenha em mente que estes eventos só funcionarão em navegadores que suportam a especificação de eventos de ponteiros. (No momento da redação deste texto, estão inclusas as versões mais recentes do Chrome, Firefox, Edge e Internet Explorer). Se a sua aplicação depende de eventos de ponteiros, recomendamos a utilização de um polyfill desenvolvido por terceiros. Optamos por não incluir tal polyfill no React DOM, para evitar o aumento de tamanho do pacote.

\n

Confira este exemplo em CodeSandbox.

\n

Enormes agradecimentos a Philipp Spiess por contribuir com esta mudança!

\n

Correção de Erro para o getDerivedStateFromProps

\n

getDerivedStateFromProps agora é chamado toda vez que um componente é renderizado, independentemente da causa da atualização. Anteriormente, isto era chamado se componente foi re-renderizado por seu pai, e não dispararia como resultado de um setState local. Este foi um descuido na implementação inicial que agora foi corrigido. O comportamento anterior era mais semelhante ao componentWillReceiveProps, mas o comportamento melhorado garante compatibilidade com o próximo modo de renderização assíncrono do React.

\n

Esta correção de erro não afeta a maioria das aplicações, mas pode causar problemas com uma pequena fração de componentes. Os raros casos que importam se enquadram em uma das duas categorias:

\n

1. Evite Efeitos Colaterais em getDerivedStateFromProps

\n

Assim como o método render, getDerivedStateFromProps deve ser uma função pura de props e state. Efeitos colaterais em getDerivedStateFromProps nunca foram suportados, mas uma vez que agora é disparado com maior frequência do que costumava, a alteração recente pode expor erros não descobertos anteriormente.

\n

Código com efeito colateral deve ser movido para outros métodos: por exemplo, os despachos do Flux normalmente pertencem dentro do manipulador de eventos de origem, e as mutações manuais do DOM pertencem dentro de componentDidMount ou componentDidUpdate. Você pode ler mais sobre isso em nosso post recente sobre preparando para renderização assíncrona.

\n

2. Comparar Props Recebidas com Props Anteriores ao Computar Valores Controlados

\n

O código a seguir assume que getDerivedStateFromProps será executado somente em alterações de props:

\n
static getDerivedStateFromProps(props, state) {\n  if (props.value !== state.controlledValue) {\n    return {\n      // Uma vez que este método é executado em ambas as alterações de props e state,\n      // updates locais no valor controlado serão ignorados, porque a versão de props\n      // sempre sobrescreve isto. Oops!\n      controlledValue: props.value,\n    };\n  }\n  return null;\n}
\n

Uma maneira possível de corrigir isto é comparando o valor de recebido com o valor anterior por armazenar as props anteriores no estado:

\n
static getDerivedStateFromProps(props, state) {\n  const prevProps = state.prevProps || {};\n  // Comparando a prop recebida com a prop anterior\n  const controlledValue =\n    prevProps.value !== props.value\n      ? props.value\n      : state.controlledValue;\n  return {\n    // Armazena a prop anterior no state\n    prevProps: props,\n    controlledValue,\n  };\n}
\n

No entanto, código que “espelha” props no estado geralmente contém bugs, se você utiliza a mais recente getDerivedStateFromProps ou a legada componentWillReceiveProps. Publicamos uma postagem no blog que explica esses problemas com mais detalhes e sugere soluções mais simples que não envolvem getDerivedStateFromProps().

\n

Installation

\n

React v16.4.0 está disponível no registro npm.

\n

Para instalar o React 16 com Yarn, execute:

\n
yarn add react@^16.4.0 react-dom@^16.4.0
\n

Para instalar o React 16 com npm, execute:

\n
npm install --save react@^16.4.0 react-dom@^16.4.0
\n

Também fornecemos compilações UMD do React através de um CDN:

\n
<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>
\n

Consulte a documentação para obter instruções de instalação detalhadas.

\n

Changelog

\n

React

\n\n

React DOM

\n\n

React Test Renderer

\n\n

React ART

\n\n

React Call Return (Experimental)

\n\n

React Reconciler (Experimental)

\n","excerpt":"A última release minor adicionou suporte para um recurso solicitado frequentemente: eventos de ponteiros! Também foi incluso uma correção de erro para o . Confira o changelog completo abaixo. Eventos de Ponteiros Os tipos de eventos seguintes estão disponíveis agora no React DOM: Tenha em mente que estes eventos só funcionarão em navegadores que suportam a especificação de eventos de ponteiros. (No momento da redação deste texto, estão inclusas as versões mais recentes do Chrome…","frontmatter":{"title":"React v16.4.0: Eventos de Ponteiros","next":null,"prev":null,"author":[{"frontmatter":{"name":"Andrew Clark","url":"https://twitter.com/acdlite"}}]},"fields":{"date":"23 de maio de 2018","path":"content/blog/2018-05-23-react-v-16-4.md","slug":"/blog/2018/05/23/react-v-16-4.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Candidato à lançamento: Sem novas funcionalidades"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Construindo Ótimas Experiências de Usuário com Modo Concorrente e Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparando para o Futuro com as Prereleases React"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 e a atualização do Roadmap"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"O React já esta traduzido? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: O React com Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2018/05/23/react-v-16-4.html"}},"staticQueryHashes":[]}