Hoje estamos lançando o React 16.13.0. Ele contém correções de bugs e novos avisos de depreciação para ajudar a se preparar para uma futura versão principal.
\nUm componente React não deve causar efeitos colaterais em outros componentes durante a renderização.
\nÉ suportado chamar setState durante a renderização, mas somente para o mesmo componente. Se você chamar setState durante uma renderização em um componente diferente, você verá um aviso:
Warning: Cannot update a component from inside the function body of a different component.Este aviso ajudará a encontrar erros de aplicativos causados por alterações não intencionais do estado. Nos raros casos em que você deseja alterar intencionalmente o estado de outro componente como resultado da renderização, é possível agrupar a chamada do setState dentro do useEffect.
Ao aplicar dinamicamente um style que contém versões longhand e shorthand de propriedades CSS, combinações específicas de atualizações podem causar estilos inconsistentes. Por exemplo:
<div style={toggle ? \n { background: 'blue', backgroundColor: 'red' } : \n { backgroundColor: 'red' }\n}>\n ...\n</div> Você pode esperar que essa <div> tenha sempre um fundo vermelho, não importa o valor de toggle. No entanto, ao alternar o valor de toggle entre true e false, a cor de fundo começa como red, então alterna entre transparent e blue, como você pode ver nessa demo.
O React agora detecta regras de estilo conflitantes e registra um aviso. Para corrigir um problema, não misture versões shorthand e longhand da mesma propriedade CSS na prop style.
String Refs é uma API legada que é desencorajada e será depreciada no futuro:
\n<Button ref=\"myRef\" />(Não confunda String Refs com refs em geral, o que permanece totalmente suportado.)
\nNo futuro, forneceremos um script automatizado (um “codemod”) para migrar para longe das referências de string. No entanto, alguns casos raros não podem ser migrados automaticamente. Esta versão adiciona um novo aviso apenas para esses casos antes da depreciação.
\nPor exemplo, ele será acionado se você usar String Refs junto com o padrão Render Prop:
\nclass ClassWithRenderProp extends React.Component {\n componentDidMount() {\n doSomething(this.refs.myRef);\n }\n render() {\n return this.props.children();\n }\n}\n\nclass ClassParent extends React.Component {\n render() {\n return (\n <ClassWithRenderProp>\n {() => <Button ref=\"myRef\" />}\n </ClassWithRenderProp>\n );\n }\n}Um código como esse geralmente indica bugs. (Você pode esperar que a ref esteja disponível em ClassParent, mas em vez disso, é colocado em ClassWithRenderProp).
Você provavelmente não tem código como este. Se você faz e é intencional, converta-o para React.createRef() em vez de:
class ClassWithRenderProp extends React.Component {\n myRef = React.createRef();\n componentDidMount() {\n doSomething(this.myRef.current);\n }\n render() {\n return this.props.children(this.myRef);\n }\n}\n\nclass ClassParent extends React.Component {\n render() {\n return (\n <ClassWithRenderProp>\n {myRef => <Button ref={myRef} />}\n </ClassWithRenderProp>\n );\n }\n}\n\nNota
\nPara ver este aviso, você precisa ter o babel-plugin-transform-react-jsx-self instalado nos seus plugins Babel. Ele deve ser ativado apenas no modo de desenvolvimento.
\nSe você usa o Create React App ou tem a predefinição “react” com o Babel 7+, você já tem esse plug-in instalado por padrão.
\n
React.createFactory React.createFactory é um helper legado para criar elementos React. Esta versão adiciona um aviso de depreciação ao método. Ele será removido em uma versão major futura.
Substitua os usos de React.createFactory com JSX regular. Como alternativa, você pode copiar e colar esse auxiliar de uma linha ou publicá-lo como uma biblioteca:
let createFactory = type => React.createElement.bind(null, type);Faz exatamente a mesma coisa.
\nReactDOM.unstable_createPortal em favor de ReactDOM.createPortal Quando o React 16 foi lançado,createPortal tornou-se uma API oficialmente suportada.
No entanto, mantivemos unstable_createPortal como um alias suportado para manter as poucas bibliotecas que o adotaram funcionando. Agora estamos depreciando o alias instável. Use createPortal diretamente em vez de unstable_createPortal. Tem exatamente a mesma assinatura.
O React adiciona pilhas de componentes a seus avisos de desenvolvimento, permitindo que os desenvolvedores isolem bugs e depurem seus programas. Esta versão adiciona pilhas de componentes a vários avisos de desenvolvimento que não os tinham anteriormente. Como exemplo, considere este aviso de hidratação das versões anteriores:
\n\n
Embora esteja apontando um erro no código, não está claro onde o erro existe e o que fazer em seguida. Esta versão adiciona uma pilha de componentes a este aviso, o que faz com que fique assim:
\n\n
Isso deixa claro onde está o problema e permite localizar e corrigir o bug mais rapidamente.
\nEsta versão contém algumas outras melhorias importantes:
\nshouldComponentUpdate. Isso não deve afetar a maioria dos códigos, a menos que você tenha efeitos colaterais em shouldComponentUpdate. Para corrigir isso, mova o código com efeitos colaterais para componentDidUpdate.onMouseEnter agora não é disparado em elementos <button> desabilitados.version ausente desde que publicamos a v16. Esta versão adiciona de volta. Não recomendamos o uso na lógica do aplicativo, mas é útil ao depurar problemas com incompatibilidade / várias versões do ReactDOM na mesma página.Agradecemos a todos os colaboradores que ajudaram a resolver e solucionar esses e outros problemas. Você pode encontrar o changelog completo abaixo.
\nO React v16.13.0 está disponível no registro npm.
\nPara instalar o React 16 com o Yarn, execute:
\nyarn add react@^16.13.0 react-dom@^16.13.0Para instalar o React 16 com npm, execute:
\nnpm install --save react@^16.13.0 react-dom@^16.13.0Também fornecemos compilações UMD do React por meio de uma 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.createFactory() (@trueadm in #17878)style podem causar uma colisão inesperada (@sophiebits em #14181, #18002)unstable_createPortal (@trueadm em #17880)onMouseEnter sendo acionado nos botões desativados (@AlfredoGJ em #17675)shouldComponentUpdate duas vezes ao desenvolver em StrictMode (@bvaughn em #17942)version para ReactDOM (@ealush em #15780)toString() em dangerouslySetInnerHTML (@sebmarkbage em #17773)ReactDOM.createRoot() (@trueadm em #17937)ReactDOM.createRoot() parâmetros de retorno de chamada e avisos adicionais sobre o uso (@bvaughn em #17916)SuspenseList (@sebmarkbage em #17455)isPending somente sendo verdadeiro ao fazer a transição de dentro de um evento de input (@acdlite em #17382)React.memo que descartam atualizações quando interrompidos por uma atualização de prioridade mais alta (@acdlite em #18091)