There are two kinds of circumstances: mount and update, so useMemo has two implementations: mountMemo and updateMemo.
function mountMemo( nextCreate: () => T, deps: Array | void | null, ): T { const hook = mountWorkInProgressHook(); const nextDeps = deps === undefined ? null : deps; const nextValue = nextCreate(); if (shouldDoubleInvokeUserFnsInHooksDEV) { setIsStrictModeForDevtools(true); nextCreate(); setIsStrictModeForDevtools(false); } hook.memoizedState = [nextValue, nextDeps]; return nextValue; }
Explanation:
In the mount phase, the useMemo function calls the callback function to calculate and return the value. Save the value and deps into hook.memoizedState.
Use mountWorkInProgressHook to create a hook object.
Save deps in nextDeps.
Call the nextCreate() to get nextValue. If in a dev environment, call twice.
Save the nextValue and nextDeps in the hook.memoizedStateand return nextValue.
function updateMemo( nextCreate: () => T, deps: Array | void | null, ): T { const hook = updateWorkInProgressHook(); const nextDeps = deps === undefined ? null : deps; const prevState = hook.memoizedState; // Assume these are defined. If they're not, areHookInputsEqual will warn. if (nextDeps !== null) { const prevDeps: Array | null = prevState[1]; if (areHookInputsEqual(nextDeps, prevDeps)) { return prevState[0]; } } const nextValue = nextCreate(); if (shouldDoubleInvokeUserFnsInHooksDEV) { setIsStrictModeForDevtools(true); nextCreate(); setIsStrictModeForDevtools(false); } hook.memoizedState = [nextValue, nextDeps]; return nextValue; }
Explanation:
In the update phase, React will judge whether the deps have changed or not, if changed, React will run the callback to get the new value and return. If not changed, React will return the old value.
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3