关于vue.js:react相关整理

1次阅读

共计 2002 个字符，预计需要花费 6 分钟才能阅读完成。

是 ReactComponent.prototype = isPureComponent = true
为了在前面渲染的时候 checkShouldUpdate 的时候如果是 isPureComponent 会进行 shallowequall 对 oldProps，newProps 以及 newState oldState 两个都进行比拟，如果不平等从新更新，进行的是前浅比拟（object 的话会判断 keys 的 length 以及 keys）

hooks 要确保每一次渲染都中都依照同样的程序被调用，不要再循环、嵌套以及条件中调用 hooks

初始化的时候回让 memorizedState 等于 initialState
useState 返回的是[memorizedState,dispatch]

useState 是依照执行程序执行的，其外部是以单向链表的模式
Hook {

memorizedState: any, // 指向以后渲染节点的 fiber，上一次残缺更新之后的最终状态值
baseState: any,  // 初始化的 initialState，以及每次 dispatch 之后的 newState
baseUpdate，// 以后须要更新的 update，每一更新完会赋值上一个 update
queue：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 和队列。

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 外面关注两点