本节我们以mountupdate两种情况分别讨论这两个hook

    • mountMemo会将回调函数(nextCreate)的执行结果作为value保存

    update

    1. function updateMemo<T>(
    2. nextCreate: () => T,
    3. deps: Array<mixed> | void | null,
    4. ): T {
    5. // 返回当前hook
    6. const hook = updateWorkInProgressHook();
    7. const nextDeps = deps === undefined ? null : deps;
    8. if (prevState !== null) {
    9. if (nextDeps !== null) {
    10. const prevDeps: Array<mixed> | null = prevState[1];
    11. if (areHookInputsEqual(nextDeps, prevDeps)) {
    12. // 未变化
    13. return prevState[0];
    14. }
    15. }
    16. }
    17. // 变化,重新计算value
    18. const nextValue = nextCreate();
    19. hook.memoizedState = [nextValue, nextDeps];
    20. return nextValue;
    21. }
    22. function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
    23. // 返回当前hook
    24. const prevState = hook.memoizedState;
    25. if (prevState !== null) {
    26. if (nextDeps !== null) {
    27. const prevDeps: Array<mixed> | null = prevState[1];
    28. // 判断update前后value是否变化
    29. if (areHookInputsEqual(nextDeps, prevDeps)) {
    30. // 未变化
    31. return prevState[0];
    32. }
    33. }
    34. }
    35. // 变化,将新的callback作为value
    36. hook.memoizedState = [callback, nextDeps];
    37. }

    可见,对于update,这两个的唯一区别也是是回调函数本身还是回调函数的执行结果作为value