简单实现React Hooks

1. 实现 useState

// 获取初始化数据
let lastState = []
let index = 0
function useState(initialState) {
    lastState[index] = lastState[index] || initialState
    const currentIndex = index
    // 变更函数，params：值或函数
    function setState(newState) {
        lastState[currentIndex] = typeof(newState) === 'function' ? newState(lastState) : newState;
        // 更新
        render()
    }
    // 返回数据、变更函数, 让index加1
    return [lastState[index++], setState]
}

const [num, setNum] = useState(0)
setNum(2)
setNum((num) => {
    return num + 2
})

2. 实现 useCallback

// 初始回调函数
let lastCallback
// 初始依赖项
let lastCallbackDependencies
function useCallback(callback, dependencies) {
    if(lastCallbackDependencies) {
        // 存在依赖项
        // 依赖项发生改变
        let changed = !dependencies.every((item, index) => {
            return item === lastCallbackDependencies[index]
        })
        if(changed) {
            // 重新赋值
            lastCallback = callback
            lastCallbackDependencies = dependencies
        }
    } else {
        // 没有依赖项
        lastCallback = callback
        lastCallbackDependencies = dependencies
    }
    // 返回回调函数
    return lastCallback
}

const addClick = useCallback(() => {return setNum(num + 1)}, [num])

3. 实现 useMemo

// 初始回调函数
let lastMemo
// 初始依赖项
let lastCallbackDependencies
function useMemo(callback, dependencies) {
    if(lastCallbackDependencies) {
        // 存在依赖项
        // 依赖项发生改变
        let changed = !dependencies.every((item, index) => {
            return item === lastCallbackDependencies[index]
        })
        if(changed) {
            // 重新赋值
            lastMemo = callback()
            lastCallbackDependencies = dependencies
        }
    } else {
        // 没有依赖项
        lastMemo = callback()
        lastCallbackDependencies = dependencies
    }
    // 返回回调函数值
    return lastMemo
}

const addClick = useMemo(() => ({ num }), [num])