Hoje estamos lançando o React 16.6 com alguns novos recursos convenientes. Uma forma de utilizar o PureComponent / shouldComponentUpdate para componentes de função, uma maneira de fazer a divisão de código usando Suspense e uma maneira mais fácil de consumir o Contexto de componentes de classe.
\nConfira o changelog completo abaixo.
\nReact.memo Os componentes de classe podem não ser renderizados quando seus objetos de entrada são os mesmos usando PureComponent ou shouldComponentUpdate. Agora você pode fazer o mesmo com componentes de função envolvendo-os React.memo.
const MyComponent = React.memo(function MyComponent(props) {\n /* só re-renderiza se as prop forem alteradas */\n});React.lazy: Divisão de código com Suspense Você pode ter visto a talk do Dan sobre React Suspense na JSConf Iceland. Agora você pode usar o componente Suspense para fazer a divisão de código agrupando uma importação dinâmica em uma chamada React.lazy().
import React, {lazy, Suspense} from 'react';\nconst OtherComponent = lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n return (\n <Suspense fallback={<div>Loading...</div>}>\n <OtherComponent />\n </Suspense>\n );\n}O componente Suspense também permitirá que os autores da biblioteca iniciem a busca de dados com o suporte ao Suspense no futuro.
\n\n\nNota: Esse recurso ainda não está disponível para renderização no lado do servidor. O suporte para suspense será adicionado em uma versão posterior.
\n
static contextType No React 16.3 introduzimos a API de Contexto oficial como uma substituição à API de Context Legado.
\nconst MyContext = React.createContext();Ouvimos comentários de que a adoção da nova API de suporte de renderização pode ser difícil em componentes de classe. Então, adicionamos uma conveniente API para consumir um valor de contexto de dentro de um componente de classe.
\nclass MyClass extends React.Component {\n static contextType = MyContext;\n componentDidMount() {\n let value = this.context;\n /* realizar um efeito colateral na montagem do componente usando o valor do MyContext */\n }\n componentDidUpdate() {\n let value = this.context;\n /* ... */\n }\n componentWillUnmount() {\n let value = this.context;\n /* ... */\n }\n render() {\n let value = this.context;\n /* renderizando algo baseado no valor de MyContext */\n }\n}static getDerivedStateFromError() O React 16 introduziu Error Boundaries para gerenciar os erros lançados nas renderizações do React. Já tivemos o componentDidCatch um método de ciclo de vida que é acionado depois que um erro já aconteceu. É ótimo para registrar erros no servidor. Ele também permite mostrar uma interface do usuário diferente para o usuário, chamando setState.
Antes que seja disparado, processamos null no lugar da árvore que gerou um erro. Isso às vezes interrompe os componentes pai que não esperam que seus representantes estejam vazios. Ele também não funciona para se recuperar de erros no servidor, pois os ciclo de vida Did não são acionados durante a renderização no lado do servidor.
Estamos adicionando outro método de erro que permite renderizar a interface do usuário de fallback antes que a renderização seja concluída. Veja os documentos para getDerivedStateFromError().
\n\nNota:
\ngetDerivedStateFromError()ainda não está disponível para renderização no lado do servidor. Ele será projetado para funcionar com a renderização do lado do servidor em uma versão futura. Estamos liberando isso cedo para que você possa começar a se preparar para usá-lo.
Na versão 16.3 introduzmos o componente StrictMode. Ele permite que você aceite alertas antecipados quanto a padrões que possam causar problemas no futuro.
Adicionamos mais duas API’s na lista de depreciados no StrictMode. Se você não usa o StrictMode não precisa se preocupar pois esses avisos não serão disparados por você.
contextType API torne isso um pouco mais fácil.Se você está com problemas para fazer upgrade, gostaríamos de receber seus comentários.
\nReact v16.6.0 está disponível no npm.
\nPara instalar o React 16 com Yarn, execute:
\nyarn add react@^16.6.0 react-dom@^16.6.0Para instalar o React 16 com npm, execute:
\nnpm install --save react@^16.6.0 react-dom@^16.6.0Nós também fornecemos compilações UMD de React via 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>Consulte a documentação para instruções detalhadas de instalação.
\nReact.memo() como uma alternativa PureComponent para funções. (@acdlite em #13748)React.lazy() para componentes de divisão de código. (@acdlite em #13885)React.StrictMode agora avisa sobre a API de contexto legado. (@bvaughn em #13760)React.StrictMode agora avisa sobre findDOMNode. (@sebmarkbage em #13841)unstable_AsyncMode para unstable_ConcurrentMode. (@trueadm em #13732)unstable_Placeholder para Suspense, e delayMs para maxDuration. (@gaearon em #13799 e @sebmarkbage em #13922)contextType como uma maneira mais ergonômica de se inscrever no contexto de uma classe. (@bvaughn em #13728)getDerivedStateFromError método de ciclo de vida para capturar erros futuros e assíncronos do lado do servidor. (@bvaughn em #13746)<Context> é chamado ao invés de <Context.Consumer>. (@trueadm em #13829)window.event no desenvolvimento. (@sergei-startsev em #13697)React.memo(). (@alexmckenley em #13855)contextType. (@alexmckenley em @sebmarkbage em #13889)scheduler. (@gaearon em #13683)requestAnimationFrame antes. (@acdlite em #13785)envify ao pacote. (@mridgway em #13766)