当前位置: 首页 > Web前端 > vue.js

React相关整理

时间:2023-04-01 13:07:37 vue.js

pureComponentisReactComponent.prototype=isPureComponent=true为了后面渲染的时候checkShouldUpdate,如果是PureComponent,shallowequall会比较oldProps,newProps和newStateoldState。如果它们不相等,则重新更新它们。最重要的是前面的浅比较(对象会判断键的长度和键)。挂钩应确保以相同的顺序调用每个渲染。不要在循环、嵌套或条件中调用挂钩。在初始化useState的时候,让memorizedState等于initialStateuseStatereturns[memorizedState,dispatch]useState是按照执行顺序执行的,其内部是单向链表的形式Hook{memorizedState:any,//指向当前渲染节点的fiber,最后一次完成更新后的最终状态值baseState:any,//初始化initialState,每次dispatch后newStatebaseUpdate,//当前需要更新的更新,之前的updatequeue会是每次更新后分配:updateQueue|null//缓存更新队列,存储多个更新weinext:HOOk||null指向下一个需要执行的hook,每个hook通过next串联起来}对于第一次加载或者更新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绑定子currentfiber和queue。useEffectmountEffecthook.memorizedState=pushEffect(hookEffectTag,create(useEffectthreadedfunction),undefined,deps(triggerdependentarray))=>returnmountEffectImpl(hooksEff)updateEffect和mountEffect类似,只是第三项会有一个destroy,以及是否areHookInputsEqual(nextDeps,prevDeps)响应执行,如果是则pushEffect(NoHookEffect,create,destroy,nextDeps)pushEffect对mountEffect和updateEffect都执行pushEffect做条件判断,是循环链表,判断componentUpdateQueue是否是empty,empty就是要执行的mountEffect。这时,它负责创建一个componentUpdateQueue,其中包含{lastEffect:null};而lastEffect指向effect.next,也就是下一个effectFiber核心。Fiber的核心是来自ReactDOM.renderrender的核心是DropyojustthatupdateContainer=="fromreact-reconciler="ReactFiberReconciler.JSupdateContainer=="执行returnreturnupdateContainerAtExpirationTimeupdateContainerAtExpirationTime==="returnscheduleRootUpdatescheduleRootUpdate==>内部执行enqueueUpdate&scheduleWorkreturnTime入口(相当于Fibershediration的入口)此时renderRootrenderRoot里面有两个注意点。WorkLoop是代码的核心部分。协调循环是实现任务循环超时,会进入commit阶段。在workLoop中,perf工作单元