Javascript

react源码解析13.hooks源码

本文主要是介绍react源码解析13.hooks源码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
## react源码解析13.hooks源码 #### 视频课程(高效学习):[进入课程](https://xiaochen1024.com/series/60b1b600712e370039088e24/60b1b636712e370039088e25) #### 课程目录: [1.开篇介绍和面试题](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b311cf10a4003b634719) [2.react的设计理念](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b31ccf10a4003b63471a) [3.react源码架构](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b328cf10a4003b63471b) [4.源码目录结构和调试](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b32ecf10a4003b63471c) [5.jsx&核心api](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b334cf10a4003b63471d) [6.legacy和concurrent模式入口函数](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b33acf10a4003b63471e) [7.Fiber架构](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b340cf10a4003b63471f) [8.render阶段](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b348cf10a4003b634720) [9.diff算法](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b354cf10a4003b634721) [10.commit阶段](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b360cf10a4003b634722) [11.生命周期](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b367cf10a4003b634723) [12.状态更新流程](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b36ecf10a4003b634724) [13.hooks源码](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b374cf10a4003b634725) [14.手写hooks](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b37acf10a4003b634726) [15.scheduler&Lane](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b556cf10a4003b634727) [16.concurrent模式](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b55ccf10a4003b634728) [17.context](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b564cf10a4003b634729) [18事件系统](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b56ccf10a4003b63472a) [19.手写迷你版react](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b57bcf10a4003b63472b) [20.总结&第一章的面试题解答](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b581cf10a4003b63472c) [21.demo](https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b587cf10a4003b63472d) #### hook调用入口 ​ 在hook源码中hook存在于Dispatcher中,Dispatcher就是一个对象,不同hook 调用的函数不一样,全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate ```js ReactCurrentDispatcher.current = current === null || current.memoizedState === null//mount or update ? HooksDispatcherOnMount : HooksDispatcherOnUpdate; ``` ```jsx const HooksDispatcherOnMount: Dispatcher = {//mount时 useCallback: mountCallback, useContext: readContext, useEffect: mountEffect, useImperativeHandle: mountImperativeHandle, useLayoutEffect: mountLayoutEffect, useMemo: mountMemo, useReducer: mountReducer, useRef: mountRef, useState: mountState, //... }; const HooksDispatcherOnUpdate: Dispatcher = {//update时 useCallback: updateCallback, useContext: readContext, useEffect: updateEffect, useImperativeHandle: updateImperativeHandle, useLayoutEffect: updateLayoutEffect, useMemo: updateMemo, useReducer: updateReducer, useRef: updateRef, useState: updateState, //... }; ``` #### hook数据结构 ​ 在FunctionComponent中,多个hook会形成hook链表,保存在Fiber的memoizedState的上,而需要更新的Update保存在hook.queue.pending中 ```js const hook: Hook = { memoizedState: null,//对于不同hook,有不同的值 baseState: null,//初始state baseQueue: null,//初始queue队列 queue: null,//需要更新的update next: null,//下一个hook }; ``` 下面来看下memoizedState对应的值 - useState:例如`const [state, updateState] = useState(initialState)`,`memoizedState等于`state的值 - useReducer:例如`const [state, dispatch] = useReducer(reducer, {});`,`memoizedState等于`state的值 - useEffect:在mountEffect时会调用pushEffect创建effect链表,`memoizedState`就等于effect链表,effect链表也会挂载到fiber.updateQueue上,每个effect上存在useEffect的第一个参数回调和第二个参数依赖数组,例如,`useEffect(callback, [dep])`,effect就是{create:callback, dep:dep,...} - useRef:例如`useRef(0)`,memoizedState`就等于`{current: 0} - useMemo:例如`useMemo(callback, [dep])`,`memoizedState`等于`[callback(), dep]` - useCallback:例如`useCallback(callback, [dep])`,`memoizedState`等于`[callback, dep]`。`useCallback`保存`callback`函数,`useMemo`保存`callback`的执行结果 #### useState&useReducer 之所以把useState和useReducer放在一起,是因为在源码中useState就是有默认reducer参数的useReducer。 - useState&useReducer声明 ​ resolveDispatcher函数会获取当前的Dispatcher ```js function useState(initialState) { var dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); } function useReducer(reducer, initialArg, init) { var dispatcher = resolveDispatcher(); return dispatcher.useReducer(reducer, initialArg, init); } ``` - mount阶段 ​ mount阶段useState调用mountState,useReducer调用mountReducer,唯一区别就是它们创建的queue中lastRenderedReducer不一样,mount有初始值basicStateReducer,所以说useState就是有默认reducer参数的useReducer。 ```js function mountState(// initialState: (() => S) | S, ): [S, Dispatch<BasicStateAction>] { const hook = mountWorkInProgressHook();//创建当前hook if (typeof initialState === 'function') { initialState = initialState(); } hook.memoizedState = hook.baseState = initialState;//hook.memoizedState赋值 const queue = (hook.queue = {//赋值hook.queue pending: null, dispatch: null, lastRenderedReducer: basicStateReducer,//和mountReducer的区别 lastRenderedState: (initialState: any), }); const dispatch: Dispatch, > = (queue.dispatch = (dispatchAction.bind( null, currentlyRenderingFiber, queue, ): any)); return [hook.memoizedState, dispatch];//返回memoizedState和dispatch } function mountReducer<S, I, A>( reducer: (S, A) => S, initialArg: I, init?: I => S, ): [S, Dispatch] { const hook = mountWorkInProgressHook();//创建当前hook let initialState; if (init !== undefined) { initialState = init(initialArg); } else { initialState = ((initialArg: any): S); } hook.memoizedState = hook.baseState = initialState;//hook.memoizedState赋值 const queue = (hook.queue = {//创建queue pending: null, dispatch: null, lastRenderedReducer: reducer, lastRenderedState: (initialState: any), }); const dispatch: Dispatch = (queue.dispatch = (dispatchAction.bind(//创建dispatch函数 null, currentlyRenderingFiber, queue, ): any)); return [hook.memoizedState, dispatch];//返回memoizedState和dispatch } ``` ```react function basicStateReducer(state: S, action: BasicStateAction): S { return typeof action === 'function' ? action(state) : action; } ``` - update阶段 update时会根据hook中的update计算新的state ```react function updateReducer<S, I, A>( reducer: (S, A) => S, initialArg: I, init?: I => S, ): [S, Dispatch] { const hook = updateWorkInProgressHook();//获取hook const queue = hook.queue; queue.lastRenderedReducer = reducer; //...更新state和第12章的state计算逻辑基本一致 const dispatch: Dispatch = (queue.dispatch: any); return [hook.memoizedState, dispatch]; } ``` - 执行阶段 useState执行setState后会调用dispatchAction,dispatchAction做的事情就是讲Update加入queue.pending中,然后开始调度 ```react function dispatchAction(fiber, queue, action) { var update = {//创建update eventTime: eventTime, lane: lane, suspenseConfig: suspenseConfig, action: action, eagerReducer: null, eagerState: null, next: null }; //queue.pending中加入update var alternate = fiber.alternate; if (fiber === currentlyRenderingFiber$1 || alternate !== null && alternate === currentlyRenderingFiber$1) { //如果是render阶段执行的更新didScheduleRenderPhaseUpdate=true } didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true; } else { if (fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes)) { //如果fiber不存在优先级并且当前alternate不存在或者没有优先级,那就不需要更新了 //优化的步骤 } scheduleUpdateOnFiber(fiber, lane, eventTime); } } ``` #### useEffect - 声明 获取并返回useEffect函数 ```js export function useEffect( create: () => (() => void) | void, deps: Array | void | null, ): void { const dispatcher = resolveDispatcher(); return dispatcher.useEffect(create, deps); } ``` - mount阶段 ​ 调用mountEffect,mountEffect调用mountEffectImpl,hook.memoizedState赋值为effect链表 ```jsx function mountEffectImpl(fiberFlags, hookFlags, create, deps): void { const hook = mountWorkInProgressHook();//获取hook const nextDeps = deps === undefined ? null : deps;//依赖 currentlyRenderingFiber.flags |= fiberFlags;//增加flag hook.memoizedState = pushEffect(//memoizedState=effects环状链表 HookHasEffect | hookFlags, create, undefined, nextDeps, ); } ``` - update阶段 ​ 浅比较依赖,如果依赖性变了pushEffect第一个参数传HookHasEffect | hookFlags,HookHasEffect表示useEffect依赖项改变了,需要在commit阶段重新执行 ```jsx function updateEffectImpl(fiberFlags, hookFlags, create, deps): void { const hook = updateWorkInProgressHook(); const nextDeps = deps === undefined ? null : deps; let destroy = undefined; if (currentHook !== null) { const prevEffect = currentHook.memoizedState; destroy = prevEffect.destroy;// if (nextDeps !== null) { const prevDeps = prevEffect.deps; if (areHookInputsEqual(nextDeps, prevDeps)) {//比较deps //即使依赖相等也要将effect加入链表,以保证顺序一致 pushEffect(hookFlags, create, destroy, nextDeps); return; } } } currentlyRenderingFiber.flags |= fiberFlags; hook.memoizedState = pushEffect( //参数传HookHasEffect | hookFlags,包含hookFlags的useEffect会在commit阶段执行这个effect HookHasEffect | hookFlags, create, destroy, nextDeps, ); } ``` - 执行阶段 ​ 在第9章commit阶段的commitLayoutEffects函数中会调用schedulePassiveEffects,将useEffect的销毁和回调函数push到pendingPassiveHookEffectsUnmount和pendingPassiveHookEffectsMount中,然后在mutation之后调用flushPassiveEffects依次执行上次render的销毁函数回调和本次render 的回调函数 ```jsx const unmountEffects = pendingPassiveHookEffectsUnmount; pendingPassiveHookEffectsUnmount = []; for (let i = 0; i < unmountEffects.length; i += 2) { const effect = ((unmountEffects[i]: any): HookEffect); const fiber = ((unmountEffects[i + 1]: any): Fiber); const destroy = effect.destroy; effect.destroy = undefined; if (typeof destroy === 'function') { try { destroy();//销毁函数执行 } catch (error) { captureCommitPhaseError(fiber, error); } } } const mountEffects = pendingPassiveHookEffectsMount; pendingPassiveHookEffectsMount = []; for (let i = 0; i < mountEffects.length; i += 2) { const effect = ((mountEffects[i]: any): HookEffect); const fiber = ((mountEffects[i + 1]: any): Fiber); try { const create = effect.create;//本次render的创建函数 effect.destroy = create(); } catch (error) { captureCommitPhaseError(fiber, error); } } ``` #### useRef ​ sring类型的ref已经不在推荐使用(源码中string会生成refs,发生在coerceRef函数中),ForwardRef只是把ref通过传参传下去,createRef也是{current: any这种结构,所以我们只讨论function或者{current: any}的useRef ```js //createRef返回{current: any} export function createRef(): RefObject { const refObject = { current: null, }; return refObject; } ``` - 声明阶段 ​ 和其他hook一样 ```js export function useRef(initialValue: T): {|current: T|} { const dispatcher = resolveDispatcher(); return dispatcher.useRef(initialValue); } ``` - mount阶段 ​ mount时会调用mountRef,创建hook和ref对象。 ```js function mountRef(initialValue: T): {|current: T|} { const hook = mountWorkInProgressHook();//获取useRef const ref = {current: initialValue};//ref初始化 hook.memoizedState = ref; return ref; } ``` ​ render阶段:将带有ref属性的Fiber标记上Ref Tag,这一步发生在beginWork和completeWork函数中的markRef ```js export const Ref = /* */ 0b0000000010000000; ``` ```js //beginWork中 function markRef(current: Fiber | null, workInProgress: Fiber) { const ref = workInProgress.ref; if ( (current === null && ref !== null) || (current !== null && current.ref !== ref) ) { workInProgress.effectTag |= Ref; } } //completeWork中 function markRef(workInProgress: Fiber) { workInProgress.effectTag |= Ref; } ``` ​ commit阶段: ​ 会在commitMutationEffects函数中判断ref是否改变,如果改变了会先执行commitDetachRef先删除之前的ref,然后在commitLayoutEffect中会执行commitAttachRef赋值ref。 ```js function commitMutationEffects(root: FiberRoot, renderPriorityLevel) { while (nextEffect !== null) { const effectTag = nextEffect.effectTag; // ... if (effectTag & Ref) { const current = nextEffect.alternate; if (current !== null) { commitDetachRef(current);//移除ref } } } ``` ```js function commitDetachRef(current: Fiber) { const currentRef = current.ref; if (currentRef !== null) { if (typeof currentRef === 'function') { currentRef(null);//类型是function,则调用 } else { currentRef.current = null;//否则赋值{current: null} } } } ``` ```js function commitAttachRef(finishedWork: Fiber) { const ref = finishedWork.ref; if (ref !== null) { const instance = finishedWork.stateNode;//获取ref的实例 let instanceToUse; switch (finishedWork.tag) { case HostComponent: instanceToUse = getPublicInstance(instance); break; default: instanceToUse = instance; } if (typeof ref === 'function') {//ref赋值 ref(instanceToUse); } else { ref.current = instanceToUse; } } } ``` - update阶段 ​ update时调用updateRef获取获取当前useRef,然后返回hook链表 ```js function updateRef(initialValue: T): {|current: T|} { const hook = updateWorkInProgressHook();//获取当前useRef return hook.memoizedState;//返回hook链表 } ``` #### useMemo&useCallback - 声明阶段 和其他hook 一样 - mount阶段 mount阶段useMemo和useCallback唯一区别是在memoizedState中存贮callback还是callback计算出来的函数 ```js function mountMemo( nextCreate: () => T, deps: Array | void | null, ): T { const hook = mountWorkInProgressHook();//创建hook const nextDeps = deps === undefined ? null : deps; const nextValue = nextCreate();//计算value hook.memoizedState = [nextValue, nextDeps];//把value和依赖保存在memoizedState中 return nextValue; } function mountCallback(callback: T, deps: Array | void | null): T { const hook = mountWorkInProgressHook();//创建hook const nextDeps = deps === undefined ? null : deps; hook.memoizedState = [callback, nextDeps];//把callback和依赖保存在memoizedState中 return callback; } ``` - update阶段 update时也一样,唯一区别就是直接用回调函数还是执行回调后返回的value作为[?, nextDeps]赋值给memoizedState ```js function updateMemo( nextCreate: () => T, deps: Array | void | null, ): T { const hook = updateWorkInProgressHook();//获取hook const nextDeps = deps === undefined ? null : deps; const prevState = hook.memoizedState; if (prevState !== null) { if (nextDeps !== null) { const prevDeps: Array | null = prevState[1]; if (areHookInputsEqual(nextDeps, prevDeps)) {//浅比较依赖 return prevState[0];//没变 返回之前的状态 } } } const nextValue = nextCreate();//有变化重新调用callback hook.memoizedState = [nextValue, nextDeps]; return nextValue; } function updateCallback(callback: T, deps: Array | void | null): T { const hook = updateWorkInProgressHook();//获取hook const nextDeps = deps === undefined ? null : deps; const prevState = hook.memoizedState; if (prevState !== null) { if (nextDeps !== null) { const prevDeps: Array | null = prevState[1]; if (areHookInputsEqual(nextDeps, prevDeps)) {//浅比较依赖 return prevState[0];//没变 返回之前的状态 } } } hook.memoizedState = [callback, nextDeps];//变了重新将[callback, nextDeps]赋值给memoizedState return callback; } ``` #### useLayoutEffect useLayoutEffect和useEffect一样,只是调用的时机不同,它是在commit阶段的commitLayout函数中同步执行 #### forwardRef forwardRef也非常简单,就是传递ref属性 ```js export function forwardRef<Props, ElementType: React$ElementType>( render: (props: Props, ref: React$Ref) => React$Node, ) { const elementType = { $$typeof: REACT_FORWARD_REF_TYPE, render, }; return elementType; } //ForwardRef第二个参数是ref对象 let children = Component(props, secondArg); ```
这篇关于react源码解析13.hooks源码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!