[2020-08-31]: preact中hook的实现代码片段

[Lemonreds]

preact中hook的实现代码片段

preact 是一个很棒的库，通过其hook的实现代码，可以让你对hook有一种豁达开朗的感觉，这里收集了下代码，方便及时查阅。

getHookState

function getHookState(index, type) {
    if (options._hook) {
        options._hook(currentComponent, index, currentHook || type);
    }
    currentHook = 0;
    const hooks =
        currentComponent.__hooks ||
        (currentComponent.__hooks = {
            _list: [],
            _pendingEffects: []
        });

    if (index >= hooks._list.length) {
        hooks._list.push({});
    }
    return hooks._list[index];
}

useReducer

 function useReducer(reducer, initialState, init) {
    const hookState = getHookState(currentIndex++, 2);
    hookState._reducer = reducer;
    if (!hookState._component) {
        hookState._component = currentComponent;
        hookState._value = [
            !init ? invokeOrReturn(undefined, initialState) : init(initialState),
            action => {
                const nextValue = hookState._reducer(hookState._value[0], action);
                if (hookState._value[0] !== nextValue) {
                    hookState._value = [nextValue, hookState._value[1]];
                    hookState._component.setState({});
                }
            }
        ];
    }
    return hookState._value;
}

useState

 function useState(initialState) {
    currentHook = 1;
    return useReducer(invokeOrReturn, initialState);
}

useEffect

 function useEffect(callback, args) {
    const state = getHookState(currentIndex++, 3);
    if (!options._skipEffects && argsChanged(state._args, args)) {
        state._value = callback;
        state._args = args;
        currentComponent.__hooks._pendingEffects.push(state);
    }
}

useMemo

 function useMemo(factory, args) {  
    const state = getHookState(currentIndex++, 7);
    if (argsChanged(state._args, args)) {
        state._args = args;
        state._factory = factory;
        return (state._value = factory());
    }
    return state._value;
}

useRef

function useRef(initialValue) {
    currentHook = 5;
    return useMemo(() => ({ current: initialValue }), []);
}

useCallback

function useCallback(callback, args) {
    currentHook = 8;
    return useMemo(() => callback, args);
}

[Lemonreds]

useEffect相关