Solo estaba experimentando y esto me confundió. No veo por qué llamar a foo dos veces debería afectar la salida de la devolución de llamada de tiempo de espera de la invocación anterior. Este código:
let state = { age: 0 }; let getState = () => { let setState = () => { state = { age: state.age + 1 } } return { state, setState } } function foo() { let { state:st, setState } = getState(); replicaUseEffect = () => { console.log("replicaUseEffect", st); } console.log("before", st); setState() console.log("after", st); setTimeout(() => replicaUseEffect(), 1000) }; foo();produce el siguiente resultado con el que estoy de acuerdo más o menos:
"before", { age: 0 } "after", { age: 0 } "replicaUseEffect", { age: 0 }Ahora, simplemente llama a foo dos veces:
foo(); foo();Y la salida es esta:
"before", { age: 0 } "after", { age: 0 } "before", { age: 1 } "after", { age: 1 } "replicaUseEffect", { age: 1 } "replicaUseEffect", { age: 1 } ¿Por qué llamar a foo dos veces afecta los valores de replicaUseEffect en el segundo ejemplo y genera 1 dos veces? También intenté imprimir dentro de console.log con JSON.stringify pero el resultado es el mismo.
La razón por la que ambas llamadas a replicaUseEffect el mismo valor es que replicaUseEffect se ha definido como una variable global, por lo que la segunda llamada a foo reemplaza la versión anterior de replicaUseEffect por una nueva. Y aunque su código es exactamente el mismo, vive en un cierre diferente, que tiene la variable local st del segundo contexto de ejecución de foo .
No tiene este efecto cuando replicaUseEffect se define como una variable local:
let state = { age: 0 }; let getState = () => { let setState = () => { state = { age: state.age + 1 } } return { state, setState } } function foo() { let { state:st, setState } = getState(); const replicaUseEffect = () => { console.log("replicaUseEffect", st); } console.log("before", st); setState() console.log("after", st); setTimeout(() => replicaUseEffect(), 1000) }; foo(); foo();