useState, part 1: useState的初始化

February 22, 2020 ... ☕️ 2 min read

useState是函数式组件引入的一个全局方法,用于替代class组件的state。使用的时候很好奇,没有了生命周期,它是怎么工作的呢?全局存储?或者是在fiber节点上挂了啥黑科技?

还是debug吧。

useState
-dispatcher = resolveDispatcher() // 返回当前dispatcher
dispatcher.useState(initialState)
-mountState(initialState)

mountState是初始化的核心函数,做了两件事:初始化一个hook对象,以及绑定dispatch回调。

初始化hook对象

hook结构

{
    baseState:null
    baseUpdate:null
    memoizedState: 'foo' // 初始值    next:null
    queue:{
        last: null,
        dispatch:dispatchAction,
        lastRenderedReducer: basicStateReducer,
        lastRenderedState: 'foo'  // 初始值    }
}

绑定dispatch回调

dispatch = queue.dispatch = dispatchAction.bind(null, currentFiber, queue)
//...
return [hook.memoizedState, dispatch]

所以调用useState第二个返回值的时候,会实际触发dispatchAction函数,由于这个函数还bind了fiber节点和queue更新队列,所以获取组件变量的问题也解决了。

经过上面步骤,useState最终把初始值放入了hook,即workInProgressHook这个链表里。链表通过next属性串联起来,以firstWorkInProgressHook作为头节点。

usestate-init Fiber Node和workInProgressHook的关联

Fiber结构中,也有一个memoizedState属性,这个属性就保存了firstWorkInProgressHook。通过这个属性,hook与fiber节点就建立了关联。

#React#useState