useState分为 mountState 和 updateState 来看,
首先mountState把 initialState 设置到了workInProgressHook的memoizedState和baseState 上,这是 state 最终保存的地方。 然后创建了一个 queue,上面包含了优先级,上一次渲染的state的值,这个queue是用于多个 setState 的时候记录每次更新的。
然后这个mountState返回两个值,一个是mountWorkInProgressHook的memoizedState,就是平时我们取useState设置的值,
另一个是修改这个值的一个方法,是一个dispatch函数,我们使用setState的时候就会走这个dispatch逻辑,dispatch会传入当前state的fiber节点、在mountstate创建的queue和新的state,
然后会使用queue的优先级和新的state创建一个update对象,然后这个update对象就标记了当前fiber节点有更新。 标记完更新之后就是调度下次渲染了, 也就是调用 scheduleUpdateOnFiber 这个方法, 它里面最终会调用到 renderRootSync,也就是从跟节点开启新的 vdom 转 fiber 的循环:这样就触发了新一次渲染。
怎么决定 state 要更新成啥呢?
自然也是根据优先级,这里会根据 lane 来比较,然后做 state 的合并,最后返回一个新的 state 这样组件里拿到的就是新 state,然后根据它做渲染。
useState 同样分为 mountState 和 updateState 两个阶段:
mountState 会返回 state 和 dispatch 函数,dispatch 函数里会记录更新到 hook.queue,然后标记当前 fiber 到根 fiber 的 lane 需要更新,之后调度下次渲染。
再次渲染的时候会执行 updateState,会取出 hook.queue,根据优先级确定最终的 state 返回,这样渲染出的就是最新的结果。
作者:zxg_神说要有光
链接:juejin.cn/post/720333…
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。