Recientemente comencé a leer el código de ganchos de reacción y veo esto.
function useState(initialState) { var dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); } function useReducer(reducer, initialArg, init) { var dispatcher = resolveDispatcher(); return dispatcher.useReducer(reducer, initialArg, init); } function useRef(initialValue) { var dispatcher = resolveDispatcher(); return dispatcher.useRef(initialValue); } function useEffect(create, deps) { var dispatcher = resolveDispatcher(); return dispatcher.useEffect(create, deps); } function useLayoutEffect(create, deps) { var dispatcher = resolveDispatcher(); return dispatcher.useLayoutEffect(create, deps); } function useCallback(callback, deps) { var dispatcher = resolveDispatcher(); return dispatcher.useCallback(callback, deps); } function useMemo(create, deps) { var dispatcher = resolveDispatcher(); return dispatcher.useMemo(create, deps); } function useImperativeHandle(ref, create, deps) { var dispatcher = resolveDispatcher(); return dispatcher.useImperativeHandle(ref, create, deps); } function useDebugValue(value, formatterFn) { { var dispatcher = resolveDispatcher(); return dispatcher.useDebugValue(value, formatterFn); } }El despachador es un objeto que se inicializó mediante resolveDispatcher().
function resolveDispatcher() { var dispatcher = ReactCurrentDispatcher.current; if (!(dispatcher !== null)) { { throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component..." ); } } return dispatcher; } y ReactCurrentDispatcher es un objeto con una propiedad que se llama current .
var ReactCurrentDispatcher = { /** * @internal * @type {ReactComponent} */ current: null };ahora mi pregunta es como y donde react maneja la logica de los hooks? ¿dónde está la lógica de useImperativeHandle o ...?
En general, para responder preguntas como esta, clono el repositorio y uso ag o git grep :
(react) $ git grep useImperativeHandle [...] packages/react-reconciler/src/ReactFiberHooks.new.js: useImperativeHandle<T>( [...] Eso me lleva a estas asignaciones aquí: el código para useImperativeHandle , por ejemplo, parece ser estas tres funciones .
Comprender cómo funcionan e interactúan con el sistema de fibra React es otra madriguera.