React hooks实战总结

这个函数接收一个参数 initialState: (() => S) | S
,初始state的函数或者我们的state初始值。
然后调用

                <code>dispatcher.useState(initialState);</code>

,这里我们看一下 dispatcher
是怎么来的：

function resolveDispatcher() {
    const dispatcher = ReactCurrentDispatcher.current;
    ...
    return dispatcher;
}

发现是通过 ReactCurrentDispatcher.current
得到，那 ReactCurrentDispatcher
又是何方神圣呢？

我们进一步看看它怎么来的

        <pre>import type {Dispatcher} from 'react-reconciler/src/ReactFiberHooks';

const ReactCurrentDispatcher = {

current: (null: null | Dispatcher),
};
export default ReactCurrentDispatcher;

根据type，我们可以判断dispatcher的类型是 react-reconciler/src/ReactFiberHooks
里面定义的 Dispatcher
,可以看到这个current属性是个null。那它是什么时候被赋值的呢？

我们来看看functionComponent的render过程 renderWithHooks
，

export function renderWithHooks(
    current: Fiber | null,
    workInProgress: Fiber,
    Component: any,
    props: any,
    refOrContext: any,
    nextRenderExpirationTime: ExpirationTime,
): any{
    ....
    if (__DEV__) {
        ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
    } else {
        ReactCurrentDispatcher.current =
        nextCurrentHook === null
            ? HooksDispatcherOnMount
            : HooksDispatcherOnUpdate;
    }

}

这里react源码根据 nextCurrentHook
做了一些判断，我移除掉了，只关注 ReactCurrentDispatcher.current
的值，可以看到它的取值分为两种， HooksDispatcherOnMount
和 HooksDispatcherOnUpdate
分别对应 mount/update
两个组件状态;这里我们先看
HooksDispatcherOnMount

：

const HooksDispatcherOnMount: Dispatcher = {
...
useState: mountState,
...
};

这就是我们寻寻觅觅的 Dispatcher
的长相，最终我们 useState
在组件mount的时候执行的就是这个
mountState

了，那我们就迫不及待如饥似渴的来看看 mountState
又做了什么吧。

function mountState(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction>] {
const hook = mountWorkInProgressHook();
if (typeof initialState === 'function') {
    initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
const queue = (hook.queue = {
    last: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: (initialState: any),
});
const dispatch: Dispatch<
    BasicStateAction,
> = (queue.dispatch = (dispatchAction.bind(
    null,
    // Flow doesn't know this is non-null, but we do.
    ((currentlyRenderingFiber: any): Fiber),
    queue,
): any));
return [hook.memoizedState, dispatch];
}

function mountWorkInProgressHook(): Hook {
    const hook: Hook = {
        memoizedState: null,
        baseState: null,
        queue: null,
        baseUpdate: null,
        next: null,
    };

    if (workInProgressHook === null) {
    // This is the first hook in the list
        firstWorkInProgressHook = workInProgressHook = hook;
    } else {
    // Append to the end of the list
        workInProgressHook = workInProgressHook.next = hook;
    }
    return workInProgressHook;
}

const hook: Hook = {
        memoizedState: null,
        baseState: null,
        queue: null,
        baseUpdate: null,
        next: null,
    };

        实际上，workInProgressHook是这样的一个链表结构，React里面广泛使用了这样的结构存储副作用。
        <pre>{
memoizedState: null,
baseState: null,
queue: null,
baseUpdate: null,
next: {
    ...
    next: {
        ...
        next: {
            next: {...},
            ...
        },
    },
}

if (typeof initialState === 'function') {
    initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;

type UpdateQueue = {
    last: Update | null,
    dispatch: (A => mixed) | null,
    lastRenderedReducer: ((S, A) => S) | null,
    lastRenderedState: S | null,
};