9.hooks源码(想知道Function Component是怎样保存状态的嘛)

最新推荐文章于 2024-08-31 08:49:42 发布

全栈潇晨

最新推荐文章于 2024-08-31 08:49:42 发布

阅读量178

点赞数

分类专栏： react源码文章标签： react 源码

本文链接：https://blog.csdn.net/bemystery/article/details/113943130

版权

本文深入解析React Hooks的源码，重点探讨如何在Function Component中保存状态。内容涵盖hooks的入口、数据结构，以及useState、useReducer、useEffect、useRef、useMemo和useCallback的实现细节。通过学习，读者可以更好地理解React的状态管理和生命周期。

摘要由CSDN通过智能技术生成

人人都能读懂的react源码解析(大厂高薪必备)

9.hooks源码(想知道Function Component是怎样保存状态的嘛)

视频课程&调试demos

视频课程的目的是为了快速掌握react源码运行的过程和react中的scheduler、reconciler、renderer、fiber等，并且详细debug源码和分析，过程更清晰。

视频课程：进入课程

demos：demo

课程结构:

hook调用入口

在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate

ReactCurrentDispatcher.current = 
  current === null || current.memoizedState === null//mount or update
  ? HooksDispatcherOnMount
	: HooksDispatcherOnUpdate;

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中

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

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。

function mountState<S>(//
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
     
  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<//创建dispatch函数
    BasicStateAction<S>,
  > = (queue