Como el cuerpo de la función del componente de la función React es como la función de renderizado del componente de la clase React, el componente de la función React debe ejecutarse repetidamente cada vez que se renderiza. Entonces escribí el siguiente código para verificar este comportamiento.
import { useEffect, useState } from "react"; import "./styles.css"; let i = 0; export default function App() { console.log("App:", ++i); const [count, setCount] = useState(0); useEffect(() => { setInterval(() => setCount(count + 1), 2000); }, []); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Count:{count}</h2> </div> ); }Espero que la salida de la consola sea la siguiente:
Aplicación: 1
Aplicación: 2
Pero el resultado real es el siguiente:
Aplicación: 1
aplicación: 3
Aplicación: 5
Verifique: Código de ejemplo en codesandbox
Tengo entendido que debería ser 1 cuando el componente de la aplicación se ejecuta por primera vez. Después de 2 segundos, setCount(0+1) actualiza el conteo de 0 a 1, React activa una nueva representación que ejecuta la función de la aplicación por segunda vez y debe imprimir "Aplicación: 2" en la consola. Cada 2 segundos después de eso, setCount(0+1) se ejecutará repetidamente sin activar ninguna actualización de conteo, ya que el conteo siempre es 1 después de eso.
Pero el resultado real es totalmente diferente de mis expectativas.
Muy agradecido si alguien pudiera ayudar a corregir mi malentendido.
La cantidad de veces que se llama a la función de su componente no importa y no debería importar para su aplicación.
React es absolutamente libre de llamar a la función de su componente mil veces por actualización si lo desea (y, de hecho, en modo estricto lo hace dos veces); es por eso que se supone que debes hacerlos idempotentes y usar React.useMemo si tienes cálculos pesados.
Sin embargo, su componente está roto porque el efecto no captura el count , por lo que es posible que el count no aumente correctamente. (Las reglas de las reglas ESlint de ganchos te lo harán saber). Te gustaría que la forma de función de setState derivara el nuevo estado del anterior:
setCount(count => count + 1);