En los documentos de React , forceUpdate tiene un parámetro de callback de llamada.
¿Es como el segundo parámetro de setState que se llama después de establecer un estado? ¿O para qué es eso?
No puedo encontrar ningún artículo sobre eso.
¿Es como el segundo parámetro de setState que se llama después de establecer un estado?
Sí, lo es. La respuesta está en el código fuente de reacción. Si observa react/src/ReactBaseClasses , verá que setState y forceUpdate están definidos como:
Component.prototype.setState = function(partialState, callback) { // ... this.updater.enqueueSetState(this, partialState, callback, 'setState'); }; Component.prototype.forceUpdate = function(callback) { this.updater.enqueueForceUpdate(this, callback, 'forceUpdate'); }; Y si seguimos con la implementación de enqueueSetState y enqueueForceUpdate , veremos que:
const classComponentUpdater = { isMounted, enqueueSetState(inst, payload, callback) { const fiber = getInstance(inst); const currentTime = requestCurrentTimeForUpdate(); const suspenseConfig = requestCurrentSuspenseConfig(); const expirationTime = computeExpirationForFiber( currentTime, fiber, suspenseConfig, ); const update = createUpdate(expirationTime, suspenseConfig); update.payload = payload; if (callback !== undefined && callback !== null) { // ... update.callback = callback; } enqueueUpdate(fiber, update); scheduleWork(fiber, expirationTime); }, enqueueReplaceState(inst, payload, callback) { ... }, enqueueForceUpdate(inst, callback) { const fiber = getInstance(inst); const currentTime = requestCurrentTimeForUpdate(); const suspenseConfig = requestCurrentSuspenseConfig(); const expirationTime = computeExpirationForFiber( currentTime, fiber, suspenseConfig, ); const update = createUpdate(expirationTime, suspenseConfig); update.tag = ForceUpdate; if (callback !== undefined && callback !== null) { // ... update.callback = callback; } enqueueUpdate(fiber, update); scheduleWork(fiber, expirationTime); }, }; Las diferencias entre enqueueSetState y enqueueForceUpdate están en update.payload y update.tag .
Entonces, sí, forceUpdate callBack tiene el mismo comportamiento que el segundo parámetro de setState .
¿Es como el segundo parámetro de setState que se llama después de establecer un estado?
La respuesta corta aquí es: Sí , el método forceUpdate() toma el mismo argumento opcional callback , que es de tipo Function , como el método setState() (vea la implementación de ReactBaseClasses ).
En el caso de forceUpdate() la callback de llamada se llamará después de la actualización, mientras que para el método setState() , la callback de llamada se llamará después de que se actualice el estado. La diferencia notable aquí es que el método forceUpdate() llama al método enqueueForceUpdate() , mientras que setState() usa el método enqueueSetState() .
Como Giovanni describió en su respuesta, update.tag se establece en ForceUpdate dentro del método enqueueForceUpdate() . Sin embargo, el valor de update.tag se establece en UpdateState de forma predeterminada en el método createUpdate() . Como la etiqueta ForceUpdate tiene un valor más alto (es decir, 2 ), tiene una prioridad más alta que UpdateState (es decir, 0 ).
Estos son los detalles de implementación para createUpdate() , UpdateState y ForceUpdate (ver ReactUpdateQueue.new ):
... export const UpdateState = 0; export const ReplaceState = 1; export const ForceUpdate = 2; export const CaptureUpdate = 3; ... export function createUpdate(eventTime: number, lane: Lane): Update<*> { const update: Update<*> = { eventTime, lane, tag: UpdateState, payload: null, callback: null, next: null, }; return update; }