Este é o código
import React from "react"
let x = 0;
const App = () => {
x++;
console.log(x)
return(
<div>
<p>{x}</p>
</div>
)
}
export default App;
O console mostra 1 ... mas a página mostra 2 ...
Como é possível que o código dentro da função seja executado duas vezes (aparentemente o x ++ é executado duas vezes) e o console apenas produza uma vez (1)
Isso pode ser causado pela renderização do seu aplicativo React.StrictMode
, que causa renderizações duplas no modo de desenvolvimento. https://reactjs.org/docs/strict-mode.html . Ele também suprime console
chamadas em renderizações subsequentes, o que pode explicar a diferença que você está vendo:
A partir do React 17, o React modifica automaticamente os métodos do console como console.log () para silenciar os logs na segunda chamada para funções de ciclo de vida. No entanto, pode causar um comportamento indesejado em certos casos em que uma solução alternativa pode ser usada.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras