react hooks 本质探索 - useMemo、useEffect源码解析
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到了一个渲染队列里,在周期之外进行渲染
转载自:https://segmentfault.com/a/1190000041536549