useRef和useCallback感觉是最容易了解的两个原生use了:
react hooks实质摸索 - useRef源码详解
react hooks 实质摸索 - useCallback源码解析
因为之后要说的,都波及ReactCurrentDispatcher$1这个对象。
这个对象到底是什么意思?详见这里:(编辑中)
咱们间接看useMemo和useEffect的源码:
useMemo: function (create, deps) { currentHookNameInDev = 'useMemo'; // 这里详见ReactCurrentDispatcher mountHookTypesDev(); // 很简略的函数:用于确认deps是不是数组,不是的话抛出谬误 checkDepsAreArrayDev(deps); // 更新dispatch,详见ReactCurrentDispatcher // 这里这么写,是怕再create办法里有用到use类的办法,这样就会执行InvalidNested里的hook办法。 var prevDispatcher = ReactCurrentDispatcher$1.current; ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV; try { return mountMemo(create, deps); } finally { ReactCurrentDispatcher$1.current = prevDispatcher; }},
useEffect: function (create, deps) { currentHookNameInDev = 'useEffect'; // 这里详见ReactCurrentDispatcher mountHookTypesDev(); // 很简略的函数:用于确认deps是不是数组,不是的话抛出谬误 checkDepsAreArrayDev(deps); return mountEffect(create, deps);},
两者的区别只有 ReactCurrentDispatcher$1
局部。
为什么会有这个辨别?因为useMemo是在渲染中的时候执行,而useEffect是在渲染后执行。
根据这个辨别,咱们能够正当猜想:只有有ReactCurrentDispatcher$1局部的use,都是在渲染中执行。
只有这几个use是在渲染中执行:useMemo、useReducer、useState。
接下来看useMemo在mount和update时的源码(源码中,这两个函数就是连在一起的):
function mountMemo(nextCreate, deps) { var hook = mountWorkInProgressHook(); var nextDeps = deps === undefined ? null : deps; // nextCreate就是咱们在创立useMemo时传入的函数。 var nextValue = nextCreate(); // 存入hook里,期待update时应用 hook.memoizedState = [nextValue, nextDeps]; return nextValue;}function updateMemo(nextCreate, deps) { var hook = updateWorkInProgressHook(); var nextDeps = deps === undefined ? null : deps; var prevState = hook.memoizedState; if (prevState !== null) { // Assume these are defined. If they're not, areHookInputsEqual will warn. if (nextDeps !== null) { var prevDeps = prevState[1]; // 判断跟之前的deps值是否一样,如果一样,间接返回前值 if (areHookInputsEqual(nextDeps, prevDeps)) { return prevState[0]; } } } // 这里开始,是判断deps值不一样的状况 // 蕴含了前值或者以后值为null的状况,也认为是不一样。 var nextValue = nextCreate(); hook.memoizedState = [nextValue, nextDeps]; return nextValue;}
updateMemo函数的构造,跟useCallback的update很像:react hooks 实质摸索 - useCallback源码解析
接下来看useEffect的mount和update:
function mountEffect(create, deps) { { // 这部分只跟jest相干,如同还和fiber相干,总之没关系。 // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests if ('undefined' !== typeof jest) { warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1); } } return mountEffectImpl(Update | Passive, Passive$1, create, deps);}function updateEffect(create, deps) { { // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests if ('undefined' !== typeof jest) { warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1); } } return updateEffectImpl(Update | Passive, Passive$1, create, deps);}
要害是mountEffectImpl和updateEffectImpl:
function mountEffectImpl(fiberFlags, hookFlags, create, deps) { var hook = mountWorkInProgressHook(); var nextDeps = deps === undefined ? null : deps; currentlyRenderingFiber$1.flags |= fiberFlags; // pushEffect应该是把以后effect放到一个渲染队列中 hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);}function updateEffectImpl(fiberFlags, hookFlags, create, deps) { var hook = updateWorkInProgressHook(); var nextDeps = deps === undefined ? null : deps; var destroy = undefined; if (currentHook !== null) { var prevEffect = currentHook.memoizedState; destroy = prevEffect.destroy; if (nextDeps !== null) { var prevDeps = prevEffect.deps; if (areHookInputsEqual(nextDeps, prevDeps)) { pushEffect(hookFlags, create, destroy, nextDeps); return; } } } currentlyRenderingFiber$1.flags |= fiberFlags; hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);}
这部分先不做具体解释,因为关涉的货色比拟多。
简略了解,就是push到了一个渲染队列里,在周期之外进行渲染