手写hooks

https://juejin.cn/post/7037394536708079653

// 全局变量，用来记录hook的值
let hookStates = [];
// 当前hook的索引值
let hookIndex = 0;
// 函数组件更新
let scheduleUpdate;

function useMemo(factroy, deps) {
    // 判断是不是初次渲染
    if (hookStates[hookIndex]) {
        // 上一次的memo和依赖数组
        let [lastMemo, lastDeps] = hookStates[hookIndex];
        // 判断新老依赖数组是否变化
        let same = deps.every((item, index) => item === lastDeps[index]);
        if (same) {
            hookIndex++;
            return lastMemo;
        } else {
            let newMemo = factroy();
            hookStates[hookIndex++] = [newMemo, deps];
            return newMemo;
        }
    } else {
        // 初次渲染
        let newMemo = factroy();
        hookStates[hookIndex++] = [newMemo, deps];
        return newMemo;
    }
}
function useCallback(callback, deps) {
    // 判断是不是初次渲染
    if (hookStates[hookIndex]) {
        // 上一次的memo和依赖数组
        let [lastCallback, lastDeps] = hookStates[hookIndex];
        // 判断新老依赖数组是否变化
        let same = deps.every((item, index) => item === lastDeps[index]);
        if (same) {
            hookIndex++;
            return lastCallback;
        } else {
            hookStates[hookIndex++] = [callback, deps];
            return callback;
        }
    } else {
        // 初次渲染
        hookStates[hookIndex++] = [callback, deps];
        return callback;
    }
}

function useState(initialState) {
    hookStates[hookIndex] = hookStates[hookIndex] || initialState;
    let currentIndex = hookIndex;
    // 不管什么时候调用setState
    function setState(newState) {
        // newState如果是函数，就再执行一次
        if (typeof newState === "function")
            newState = newState(hookStates[currentIndex]);
        // currentInde永远指向hookIndex赋值时的值
        hookStates[currentIndex] = newState;
        // 状态变化后，执行调度更新
        scheduleUpdate();
    }
    return [hookStates[hookIndex++], setState];
}