pureComponent
是 ReactComponent.prototype = isPureComponent = true
为了在前面渲染的时候 checkShouldUpdate的时候 如果是isPureComponent 会进行shallowequall对oldProps,newProps 以及 newState oldState 两个都进行比拟,如果不平等从新更新,进行的是前浅比拟(object的话会判断keys 的length 以及keys)
hooks 要确保每一次渲染都中都依照同样的程序被调用,不要再循环、嵌套以及条件中调用hooks
useState
初始化的时候回让memorizedState 等于 initialState
useState返回的是[memorizedState,dispatch]
useState 是依照执行程序执行的,其外部是以单向链表的模式
Hook {
memorizedState: any, //指向以后渲染节点的fiber,上一次残缺更新之后的最终状态值baseState: any, // 初始化的initialState,以及每次dispatch之后的newStatebaseUpdate, // 以后须要更新的update,每一更新完会赋值上一个updatequeue: updateQueue | null // 缓存更新队列,存储屡次更新昕蔚next: HOOk || null 指向下一个须要执行的hook,通过next串联每一个hook
}
对于首次加载还是更新
useState = 以后fiber是否为空 , ReactCurrentDispatcher.current.useState 将要赋值成HooksDispatcherOnMount.useState,否则就是HooksDispatcherOnUpdate.useState.
useState = ReactCurrentDispatcher.current.useState = HooksDispatcherOnMount.useState = mountState;更新时 useState = ReactCurrentDispatcher.current.useState = HooksDispatcherOnUpdate.useState = updateState。
基于上从而初始化的时候调用的是mountState, 此时会创立一个新的hook,并返回以后的workInProgressHook, 初始化赋值memorizedState = baseState = initialState
创立dispatch绑定子以后fiber和队列。
useEffect
mountEffect
hook.memorizedState = pushEffect(hookEffectTag, create(useEffect穿进去的函数), undefined,deps(触发依赖的数组)) => return mountEffectImpl(hooksEff)
updateEffect
类同mountEffect,只是第三项会存在一个destroy,并且会areHookInputsEqual(nextDeps,prevDeps) 是否响应执行,如果是的则pushEffect(NoHookEffect,create,destroy,nextDeps)
pushEffect
针对mountEffect和updateEffect都执行了pushEffect做了条件判断,这外面是一个循环链表,这外面判断componentUpdateQueue是否为空,空从而是执行的mountEffect,此时责创立一个componentUpdateQueue,外面是{lastEffect: null};并且lastEffect指向effect.next,就是下一个effect
Fiber外围
Fiber的外围是从ReactDOM.render
render的外围是掉哟就那个updateContainer ==》 来源于react-reconciler =》 ReactFiberReconciler.JS
updateContainer ==》 执行返回 return updateContainerAtExpirationTime
updateContainerAtExpirationTime ===》 return scheduleRootUpdate
scheduleRootUpdate ==> 外部执行 enqueueUpdate & scheduleWork return expirationTime
重点在于sheduleWork(相当于Fiber入口)此时外部有 renderRoot
renderRoot外面关注两点
- workLoop 是代码的外围局部,配合循环是是实现工作循环
- 在超时的状况,会进入commit阶段
在workLoop中 performUnitOfWork